웹프로그래밍 (12) Border영역 관련 속성들

📕 Border영역 관련 속성들

• boder : content를 감싸는 테두리선
• 다양한 속성과 속성값을 사용해서 선의 굵기, 모양, 색상을 지정할 수 있다.
  -border속성을 이용해 값을을 한번에 설정할 수 있다.

border: 10px solid #000;

📖 border-width

• 선의 굵기를 지정하는 속성이다.
• 위쪽 오른쪽 아래쪽 왼쪽으로 값을 넣어 다르게 표현할 수 있다.
  border-width: [top] [right] [bottom] [left];

📒 속성값

• 키워드 : thin, medium, thick
• 단위 : px, em (% 와 정수단위는 불가능하다!!)

border-width: 10px

📖 border-style

• 선의 모양을 지정하는 속성이다.
• 위쪽 오른쪽 아래쪽 왼쪽으로 값을 넣어 다르게 표현할 수 있다.
  border-style: [top] [right] [bottom] [left];

📒 속성값

• none :border를 표시 하지 않습니다.
• solid : border를 실선 모양으로 나타냅니다.
• double : border를 이중 실선 모양으로 나타냅니다.
• dotted : border를 점선 모양으로 나타냅니다.

📖 border-color

• 선의 색깔을 지정하는 속성이다.
• 위쪽 오른쪽 아래쪽 왼쪽으로 값을 각각 지정할 수 있다. (위쪽을 기준으로 시계 방향)
  border-top-color, border-bottom-color, border-right-color, border-left-color를 이용할 수도 있음.

border-color: [top] [right] [bottom] [left];

• 색의 지정방식은 #000000이나 rgb등으로 할 수 있다.

📖 border

• 위에서 다뤘던 값들을 한번에 사용할 수 있다.

border: [-width] [-style] [-color];

✍️예시코드

border: 10px solid #000;

👉 content를 감싸는 테두리선의 두께: 10px, 실선모양, 색상은 검정색으로.