css-8: 박스모델 2

2022-10-11 최대 1 분 소요

박스모델 2

border 속성을 사용하면 요소에 테두리를 줄 수 있습니다.

선의 굵기와 스타일, 그리고 색을 다양한 값으로 줄 수 있죠.

ex) dashed, dotted, bold etc..

👉 이 MDN 문서에서와 같이 따로따로 지정할 수도 있습니다.

box-sizing 속성은 너비와 높이 값에 padding과border 값을 포함시킬지를 결정합니다.

content-box의 width를 440px로 할 경우,

첫글자로부터 마지막 글자까지의 크기를 440으로 하고, 패딩이 16px 있다면 패딩은 추가로 더해 줌.(440+16)

하지만, border-box는 패딩까지 합쳐서 440으로 한것임. (424+16)

border-radius 속성은 모서리를 둥글게 하는데 사용됩니다.

border 속성 역시 아래와 같이 특정 방향으로만 설정이 가능합니다.

*자식이 부모보다 클 경우 자동으로 scroll생성.

box-shadow로 박스 요소에
그림자를 줄 수 있습니다.

text-shadow에 spread 값과
inset 여부가 추가된 형식입니다.

쉐도우 도구: https://shadows.brumm.af/