border 속성

border 속성을 사용하면 요소에 테두리를 줄 수 있다. 선의 굵기와 스타일, 그리고 색을 다양한 값으로 줄 수 있다.
ex) border: 2px solid black / 0.5em dashed #ccc 등

box-sizing 속성

너비와 높이 값에 padding과 border 값을 포함시킬지 결정한다.

box-sizing: content-box
width값 = 컨텐츠만! 문장이 시작되어서 끝나는 곳까지의 간격. padding값, border 값 제외!

box-sizing: border-box
width값 = padding값 + border값

border-radius 속성

각 모서리를 둥글게 하는데 사용. ex)2em, 50%, 24px 0 등

방향별 border 설정

border-top/bottom/left/right

overflow 속성

부모 요소보다 자식 영역이 더 클 때 어떤 식으로 처리해줄지를 결정하는 것.
기본 : auto

자식이 더 작을때는 내버려둔다.

overflow 속성의 여러 값들

(자식이 더 클 때)
auto = 기본값 -> 윈도우에서는 스크롤바가 항시 가시적으로 나타난다.
visible = 부모 영역을 벗어난 자식을 그대로 보여준다. -> 줄거면 양쪽 x y 축에 똑같이 줘야한다. 그렇지 않는다면 auto값과 똑같이 된다.
hidden = 부모 영역을 벗어난 것들은 아예 보이지 않게 한다.
scoll = 무조건 스크롤바가 나타나게 된다. (자식이 더 작을 때에도)

overflow-x / overflow-y : 가로와 세로 각각 따로 값을 나타낼 수 있다.

box-shadow

박스 요소에 그림자를 줄 수 있다. text-shadow에 spread 값과 inset 여부가 추가된 형식이다.
순서 -> inset 여부 | offset-x | offset-y | blur-radius | spread-radius | color

ex) box-shadow: inset 4px 4px 4px 4px gray / 4px 4px gray / inset 4px 4px 12px gray
inset여부를 넣을수도 있고 안 넣을수도 있다. (들어간 느낌?)
spread-radius는 그림자의 크기를 나타낸다.

smooth shadow 사이트를 이용해보자.