#3 CSS Box Model, Dimension, overflow

CSS 박스 모델에 대한 이해와 margin, border, padding 등 박스를 구성하는 속성과 width, height 와 같은 수치 속성을 사용해 박스의 크기를 설정하는 방법에 대해 알아봅니다.

CSS 를 사용해 HTML 요소를 레이아웃(배치)을 조작하기 위해서는 박스 모델에 대해 이해하고 있어야 합니다.

CSS 박스 모델(Box Model)

block vs inline vs inline-block 요소간 특성에 대한 이해

박스 모델을 이해하기 위해서는 block 요소와 inline 요소 그리고 inline block 요소에 대해 알고 있어야 합니다.

block level 요소 (Flow Contents)

블록 박스는 다른 블록 박스에 포함되거나, 포함할 수 있고, 너비(width) / 높이(height) 설정이 가능합니다.

내부에 콘텐츠를 포함하지 않을 경우 높이는 0입니다.

기본적으로 width 값이 auto로 적용되어 자신을 포함하는 부모 영역의 너비만큼 늘어납니다.
그러므로 마크업 상 나중에 작성된 다음 형제 요소는 해당 요소의 아래에 위치합니다.
간단히 말해, 일반적으로 줄바꿈되는 요소를 의미합니다.

section, article, aside, header, footer, nav, main, hx, div, o, dl, dt, dd, ul, ol, p, audio, video, blockquote, canvas, fieldset, figure, figcaption, footer, form, table, tfoot, hr, noscript, pre etc ...

프론트엔드 UI 개발을 하다보면 자연스럽게 터득되지만 크롬의 개발자 도구를 통해 요소의 특성을 확인해 볼 수 있습니다.

inline 요소 (Phrasing Contents)

인라인 박스는 다른 인라인 박스에 포함되거나, 포함할 수 있지만, 블록 요소는 포함할 수 없습니다.

너비(width) / 높이(height) 설정이 가능하지 않고 내부에 포함한 콘텐츠 만큼 높이와 너비를 가지게 됩니다.

다시 말해, 자신이 포함하는 콘텐츠(예: 텍스트) 만큼만 너비를 가질 수 있습니다.
사용자가 임의로 width 속성을 부여해도 반영되지 않습니다.
그러므로 마크업 상 다음 형제 요소는 기본 흐름 상에서 오른쪽 옆에 붙습니다.

inline-block 요소

인라인 블록 박스는 기본적으로는 인라인 특성을 가지고 인라인처럼 화면에 렌더링되지만, 블록 박스처럼 너비(width) / 높이(height) 설정이 가능합니다. (<img>, <input>, <button> 등)

기본적으로 자신이 포함하는 콘텐츠 만큼만 너비를 가지지만 (inline 요소처럼) 사용자가 임의로 width 속성을 부여해 너비를 설정할 수 있습니다. 이 점이 inline 요소와의 차이점입니다.
예를 들어 레이아웃을 나란히 배치해야 하는 상황에서 각 요소에 width 속성을 적용해야 하는 상황이라고 생각해 봅시다.
간단한 예로 수평 내비게이션을 들자면... 물론 a 요소만 나열해도 수평 배치 되지만, width 속성은 적용되지 않습니다.
a 요소는 기본적으로 inline 이기 때문입니다.
하지만 a 요소에 inline-block을 설정하면 block 설정과 달리 수평 배치를 유지한 상태에서 width 속성을 부여해 동일한 너비만큼 아이템들을 설정할 수 있습니다.

HTML5 에서부터는 블럭 요소를 Flow Contents 라고 하며, 인라인 요소를 Phrasing Contents 라고 부릅니다.

현재는 블럭과 Flow Contents, 인라인과 Phrasing Contents 를 혼용하여 사용하고 있습니다.

margin-box, border-box, padding-box, content-box

박스(box)는 외부 공간 박스(margin-box), 테두라 공간 박스(border-box), 내부 공간 박스(padding-box), 콘텐츠 공간 박스(content-box)로 구성되어 있습니다.

content-box

인라인 박스는 좌/우 방향으로 마진,패딩 공간을 설정할 수 있으나, 상/하 방향으로는 공간이 설정되지 않습니다.

content-box,padding-box, border-box 는 배경을 지정해 줄 수 있지만 margin-box 는 배경이 적용되지 않습니다.

마진 박스는 박스와 박스 사이의 간격을 제어할 때 사용할 수 있습니다.

그리고 마진 박스는 음수값을 사용할 수 있는 반면에 나머지 박스들은 음수값을 사용하실 수 없습니다.

margin, padding

Padding 은 요소의 안쪽 여백을 margin 은 요소의 바깥 여백을 지정하는 속성입니다.

margin 속성은 다음과 같습니다.

• margin : margin 속성들의 축약 속성
• margin-top : 요소 외부의 상단 간격을 지정
• margin-right : 요소 외부의 우측 간격을 지정
• margin-bottom :요소 외부의 하단 간격을 지정
• margin-left : 요소 외부의 좌측 간격을 지정

css

margin: 10px 5px 15px 20px; (top right bottom left)
margin: 10px 5px 15px; (top right-left bottom)
margin: 10px 5px; (top-bottom right-left)
margin: 10px; (top-right-bottom-left)

padding 속성은 다음과 같습니다.

• padding : padding 속성들의 축약 속성
• padding-top : 요소 내부의 상단 간격을 지정
• padding-right : 요소 내부의 우측 간격을 지정
• padding-bottom :요소 내부의 하단 간격을 지정
• padding-left : 요소 내부의 좌측 간격을 지정

css

padding: 10px 5px 15px 20px; (top right bottom left)
padding: 10px 5px 15px; (top right-left bottom)
padding: 10px 5px; (top-bottom right-left)
padding: 10px; (top-right-bottom-left)

border

border 요소에 대한 선(테두리)을 적용할 때 사용하는 속성입니다.

border 속성은 요소에 테두리 효과를 주는 것이며, 모든 border 속성들을 한 번에 선언할 수 있는 축약 속성입니다.

border-color, border-width, border-style 속성들을 한꺼번에 선언할 수 있으며 {border:solid #ff0000;} 처럼 style-color 또는 style-width 만 적어도 무방하다.

대신 어떤 값을 주던 style 속성은 반드시 선언해 주어야 합니다.

border 속성,값은 다음과 같습니다.

• border : 테두리의 너비(굵기)를 지정
• border-(top|right|bottom|left)-width : 테두리의 너비(굵기)를 지정
• border-(top|right|bottom|left)-style : 테두리의 스타일을 지정
  dotted : 도트(점선) 테두리 지정, dashed : 대시 기호(-) 테두리 지정, solid : 일반적인 라인 테두리 지정, double : 두 줄로 테두리 지정
• border-(top|right|bottom|left)-color : 테두리의 색상을 지정

css

.selector {
    border-(top|right|bottom|left)-width
    border-(top|right|bottom|left)-style
    border-(top|right|bottom|left)-color
    border: width style color
    border-top: width style color
    border-right: width style color
    border-bottom: width style color
    border-left: width style color
}

margin, padding, border 의 공간 설정 방향은 시계방향 순으로 설정됩니다.

outline

outline 은 요소 바깥 주위에 둘러지는 선이며 만약 요소에 border 가 적용되어 있다면 outline 은 그 바깥에 생성된다.

outline 속성,값은 다음과 같습니다.

• outline : outline 속성들의 축약(속기) 속성
• outline-color : 요소 바깥 선의 색상을 지정
• outline-style : 요소 바깥 선의 스타일을 지정
• outline-width : 요소 바깥 선의 너비를 지정

outline 은 {outline:solid #FF0000} 과 같이 style-color 또는 style-width 만 적어도 무방하지만 대신 어떤 값을 주던 style 속성은 반드시 선언해주어야 합니다.

outline 은 요소의 영역을 차지하는 부분이 아니기 때문에 어떤 요소에 outline 을 주더라도 width 와 height 에는 영향이 없습니다.
즉, outline 은 width 와 height 박스에 outline 의 두께는 포함되지 않습니다.

Related Info

1. CSS 박스 모델
2. CSS 박스 스타일링(Styling boxes)

CSS Dimension

dimension 은 공간 등의 높이,너비의 치수를 말합니다.

CSS 에서는 너비, 높이를 다음과 같은 속성으로 정의할 수 있습니다.

• width -- 박스(요소) 너비
• height -- 박스(요소) 높이
• min-width -- 박스(요소)가 가질 수 있는 최소 너비
• min-height -- 박스(요소)가 가질 수 있는 최소 최소 높이
• max-width -- 박스(요소)가 가질 수 있는 최소 최대 너비
• max-height -- 박스(요소)가 가질 수 있는 최소 최대 높이

css

.selector {
    width: value;
    max-width: value;
    min-width: value;
    height: value;
    max-height: value;
    min-height: value;
}

CSS 수치에 대한 단위 사용

auto : 기본값(default), 브라우저 너비,높이에 따라 자동으로 설정
length : px, em, rem, ex 등의 단위로 직접 길이를 지정
% : 요소가 포함된 영역의 퍼센트 값으로 계산하여 지정

Box Sizing

요소에 정확한 너비와 높이값을 정의하는 것은 레이아웃을 정렬할 때 매우 중요합니다.

만일 요소에 안쪽 여백과 선이 적용되었을 때 요소의 너비와 높이값 계산을 잘못하게 되면 의도한 대로 레이아웃이 정렬되지 않을 수 있습니다.

박스 모델의 너비와 높이를 계산하는 방법은 다음과 같습니다.

content-box(default) :

width = content-box
height = content-box

border-box :

width = content-box + padding-box + border-box
height = content-box + padding-box + border-box

overflow

overflow 란 박스(요소)를 넘쳐난 상태(흐름)에 대한 것을 조정(제어)하는 속성으로 부모 박스의 영역을 자식 박스가 넘어서게 될 때 화면에 어떻게 렌더링할지를 결정하게 됩니다.

다시 말해, 박스(요소) 내의 콘텐츠가 넘쳤을 때 스크롤로 나타낼지 넘친 부분을 보이지 않게 할지 등 어떤 식으로 표현할지를 지정하는 것입니다.

overflow 속성,값은 다음과 같습니다.

• auto : 부모 박스의 영역을 자식 박스가 벗어난 부분이 있으면 자동으로 스크롤을 생성하게 지정
• visible : 기본값(default), 해당 영역에서 벗어난 부분을 짜르지 않고 모두 보여주게 지정
• hidden : 해당 영역에서 벗어난 부분을 숨겨서 보이지 않게 지정
• scroll : 해당 영역에서 벗어난 부분을 숨기되 스크롤을 생성하여 볼 수 있게 지정

See the Pen overflow 예제 by jaeheekim (@jaehee) on CodePen.

scroll 값을 사용하면 auto 값과 렌더링 화면이 비슷해 보일 수 있으나 다릅니다.

auto 는 부모보다 자식이 넘쳐났을 때만 스크롤이 생기는 거지만 scroll 같은 경우는 부모보다 자식이 작아도 기본적으로 스크롤바를 가지고 있습니다.

Jaehee's WebClub