CSS 속성(4) - 크기 계산(box-sizing) & 넘침 제어(overflow) & 출력 특성(display)

크기 계산(box-sizing)

box-sizing은 요소의 크기 계산 기준을 지정합니다.

content-box란 기본값이 있으며,

요소의 내용(content)으로 크기를 계산합니다.

이외, border-box값을 입력할 수 있습니다.

border-box는 요소의 내용 + padding + border로 크기를 계산합니다.

 

위 두 예시를 보시면 아시겠지만, 2번째 예시는 box-sizing: border-box; 입니다.

2번째는 요소 전체 크기 더 커지지 않고 그대로 유지하고 있습니다.

 

넘침 제어(overflow)

overflow는 요소의 크기 이상으로 내용이 넘쳤을 때, 보여짐을 제어하는 단축 속성입니다.

overflow는 visible란 기본값(넘친 내용을 그대로 보여줌)이 들어 있으며,

hidden(넘친 내용을 잘라냄), scroll(넘친 내용을 잘라내며 스크롤바 생성),

auto(넘친 내용이 있는 경우에만 잘라내고 스크롤바 생성) 값도 있습니다.

 

내용이 넘침 경우

scroll은 넘치던 안 넘치던, x축과 y축 모두 스크롤바를 보여줍니다.

auto는 넘치는 방향에만 스크롤바를 생성합니다.

 

내용이 넘치지 않은 경우

내용이 넘치지 않는 데도 scroll는 스크롤바를 생성했습니다.

그래서 보통 scroll를 사용하지 않고 auto를 사용해서 더 예쁘게 만듭니다.

 

요소의 크기 이상으로 내용이 넘쳤을 때, 보여짐을 제어하는개별 속성들이 있습니다.

overflow-x

overflow-y

 

 출력 특성(display)

display는 요소의 화면 출력(보여짐) 특성을 지정합니다.

즉, 요소들이 화면에서 어떻게 보여지느냐를 지정해주는 속성입니다.

각 요소에서 이미 지정되어 있는 값들이 있습니다.

block(상자 요소), inline(글자 요소), inline-block(글자 + 상자 요소),

table, table-row, table-cell등이 있습니다.

따로 지정해서 사용하는 값들도 있습니다.

flex: 플렉스 박스(1차원 레이아웃)

grid: 그리드(2차원 레이아웃)

none: 보여짐 특성 없음, 화면에서 사라짐