[css 속성] border

2020. 8. 25. 10:22

css로 원하는 영역에 테두리 효과를 주고싶을 때

border 속성을 사용한다.

<style>
   .box {border:3px solid #333; background:yellow; width:300px; height:300px;}
</style>
<body>
   <div class="box"></div>
</body>

위와 같이 border 속성은 원하는 영역에 테두리 효과를 줄 수 있다.

border로 준 테두리는 실제 영역의 너비나 높이 값에 영향을 주게 되는데

위 예시의 경우 css로는 가로 300px, 세로 300px 의 값을 줬지만

실제 크기는 상하좌우 border 3px이 포함되어

총 너비는 가로 306px, 세로 306px이 된다.

border는 margin, padding과 같이 상하좌우로 적용할 수 있고,

축약형으로도 사용이 가능하다.

ex) border-right: 1px solid #333 (우측에만 적용) / border:1px solid #333 (상하좌우에 적용)

뿐만 아니라

border는 1px solid #000 과 같이 한번에 속성들을 사용하는 것과 더불어

border-width, border-style, border-color 와 같이 각각의 사용도 가능하다.

border-width는 축약형과 마찬가지로
border-width: 1px 0 혹은 border-width: 1px 0 3px 1px 와 같이 사용할 수 있다.

border-width: 2px; (테두리 두께)

border-style: dashed; (테두리 스타일 - solid, dashed, dotted 등 여러 스타일이 있다.)

border-color: red (테두리 색상)

↓

border: 2px dashed red (축약형)

[css 속성] text-size-adjust (모바일 폰트 크기 조정 관련) (0)	2020.10.13
[css 속성] user-select (텍스트 선택, 드래그 설정) (0)	2020.10.12
[css 속성] padding (0)	2020.08.22
[css 속성] margin (0)	2020.08.22
[css 속성] box-sizing (0)	2020.08.22

About Web