HTML & CSS - [CSS] Boxmodel(박스모델 - 요소의 형태의 이해)

서론

지난 포스트들에서 웹 페이지의 레이아웃을 설정하기 위해서 요소의 크기나, 배치 방법에 관한 속성들을 배웠습니다.

직접 구현을 하는 과정에서 다양한 position 속성, size 속성들을 이용해도 원하지 않는 결과가 나오는 경험이 있을 것입니다. 

본문에서는 요소의 형태가 어떻게 구성되어 있고 형태의 종류마다 특성을 살펴보면서 좀 더 효율적으로 웹 페이지의 레이아웃을 구성할 수 있는 능력을 키워보도록 합시다.

 

Boxmodel(박스 모델)

CSS에서 Element(요소) 또는 Tag(태그)를 하나의 박스의 형태로 관리합니다. 

따라서 CSS에서 부르는 Boxmodel은 요소의 형태를 일컫는 말입니다.

그림처럼 모든 요소는 박스 형태로서 CSS에서 존재합니다. 

이 요소의 박스단위를 어떻게 잘 제어하는가가 좋은 웹페이지 레이아웃을 만드는데 결정적인 역할을 합니다. 

 

블록과 인라인(Block and Inline) - 박스 모델의 종류

HTML을 먼저 접해봤다면 <span>과 <div>를 가지고 블록과 인라인의 개념을 들어봤을 것입니다.

기본적으로 요소들을 생성하는 태그마다 박스의 종류들이 정해져 있습니다.

CSS에서는 display속성을 이용해서 박스의 종류를 제어할 수 있습니다.

 

그중 대표적인 display속성이 바로 블록과 인라인 박스입니다. 

• Block - 블록과 같은 형태의 박스입니다.
• Inline - 한 줄을 제어하는 형태의 박스입니다.

이 둘의 차이를 잘 생각해보면 줄의 개념인 Inline은 폭과 높이를 제어하지 못합니다.

하지만 블록의 개념인 Block는 폭과 높이를 제어할 수 있습니다. 

이제 하나씩 살펴보면서 좀 더 자세히 특징을 알아보도록 하겠습니다.

 

Block Box ( display : block )

display속성이 block로 되어있는 요소는 요소들을 세로 배치되는 효과를 가지고 옵니다.

정확히는 block 요소의 특징이 있기 때문입니다.

• 줄 바꿈이 이뤄집니다.
• width와 height 속성이 사용 가능합니다.
• 요소 전체에 여백을 지정하고 적용할 수 있다. (다른 요소와의 여백의 적용이 가능하다.)

 

See the Pen BlockBox by Gon (@gon-91) on CodePen.

예제를 보면 각각의 요소마다 줄 넘김이 일어납니다.

단 첫 번째 div 요소를 보면 폭이 제한되어 있지 않기 때문에 인라인 방향(우측)으로 요소를 채우게 됩니다.

그리고 각각의 요소마다 여백이 보이는 것을 확인할 수 있습니다. 이런 여백에 대해서는 아래에서 자세히 설명하겠습니다.

 

div 태그로 생성된 요소는 자동적으로 block 요소로 생성됩니다.

 

InlineBox ( dispaly : inline ) 

dispaly 속성이 Inline으로 되어있는 요소는 요소들이 가로 배치되는 효과를 가지고 옵니다.

정확히는 inline 요소의 특징이 있기 때문입니다.

• 줄 바꿈을 하지 않습니다. (한 줄에 존재합니다.)
• width와 height 속성이 적용되지 않습니다.
• 수평에 관한 여백은 적용됩니다.
• 수직에 관한 여백은 잘못된 영향을 미칠 수 있습니다.

See the Pen Untitled by Gon (@gon-91) on CodePen.

block 요소와 달리 inline요소는 화면이 작아진다면 스크롤이 생기는 것이 아니라 연속적으로 이어져서 작성이 됩니다.

따라서 예제와 같이 상하의 여백은 문제가 발생할 여지가 있습니다. 

또한 요소들의 폭과 높이가 적용되지 않는 것을 확인할 수 있습니다.

 

Notice - 사용 관점에 차이가 있다. 

위의 예제를 보면서 어떤 생각이 들으셨나요? block요소와 inline요소는 전혀 다른 특징을 가지고 있습니다. 

이를 잘 활용한다면 효과적인 웹페이지를 만드는 과정에서 효율적입니다. 

레이아웃을 잡기 위해서는 block형태의 요소들이 유리하고, 글을 작성하고 정보를 제공하는 요소들을 inline으로 작성하는 것이 유리할 것입니다.  이런 박스 모델의 특성을 잘 파악해서 사용해야 웹페이지를 디자인하는데 효과적이며 에러를 줄일 수 있습니다.

Notice - Inline-block ( display : inline-block )

block과 inline 요소로만 웹페이지를 제어하다 보면 이런 문제점이 생길 수 있습니다. 블록 요소를 줄 넘김이 없이 하고 싶다 또는 인라인 요소를 블록 요소처럼 쓰고 싶다. 이런 경우 inline-block 요소로 해결할 수 있습니다.

inline-block은 block과 inline을 합친 요소로 다음과 같은 특징이 존재합니다.

• 줄 바꿈을 하지 않습니다.
• width와 height 속성이 사용 가능합니다.
• 요소 전체에 여백을 지정하고 적용할 수 있다. (다른 요소와의 여백의 적용이 가능하다.)
• 화면이 작아진다면 자동적으로 줄 넘김 효과가 일어난다 ( 요소 배치가 변경된다.)

 

이런 식으로

3가지 요소 형태로 효과적인 웹페이지를 구성할 수 있습니다.

물론 이외에 여러가지 형태로 웹페이지의 요소 배치나 구성을 하는 방법 또한 있고, 필요합니다. 

 

Box의 구성과 여백 - margine , padding , dorder

요소들은 Box형태로 구성되며 아래와 같은 구조를 가지게 됩니다.

• margin : 가장 외부에 부여되는 속성으로 다른 요소와의 여백을 지정하는 역할
• border : 테두리라고 하며 콘텐츠와 패딩까지 둘러쌉니다.
• padding : 콘텐츠와 테두리의 여백의 개념으로 사용합니다.
• content : 요소의 내용이 표시되는 영역입니다.

위와 같이 가장 기본적으로 요소가 구성이 되어있습니다. 

 

각각의 속성들이 어떻게 동작하는지 알아보도록 하겠습니다.

See the Pen Test by Gon (@gon-91) on CodePen.

Element(요소) 전체를 포함하는 크기

예제를 살펴보면 div를 50x50 px로 생성하였습니다. 그리고 각각의 margin, border, padding을 주었습니다.

div요소를 살펴보면 아래와 같습니다.

여기서 우리가 하나 알 수 있는 사실이 있습니다 왜 div는 90x90의 사이즈가 되었을까?

바로 padding과 border는 요소에 포함되기 때문입니다.

margin (요소 사이의 여백)

이제 예제에서 2개의 div를 바라보도록 합시다. 그러면 그 사이에 공간이 존재하는 것을 확인할 수 있습니다.

이 부분이 margin이 관여하는 부분으로서, 요소와의 여백을 제공해 줍니다. 예제에서는 두 요소의 상하의 공간이 margin이 관여하며 10px이므로 A요소의 아래 10px margin과 B 요소의 위 10px margin이 존재하여 여백을 구성합니다.

border (요소의 끝부분 또는 테두리)

예제에서는 파란색 10px 테두리를 만들었습니다. 실질적인 요소의 박스의 경계선의 영역 입니다.

padding (border와 content의 경계선)

예제에서 안에 있는 내용과 테두리 사이의 흰색 공간이 padding입니다. 요소 안에서의 여백인 셈입니다.

content (요소의 내용이 표시되는 부분)

요소에서 표시하고자 하는 내용이 담기는 부분입니다. 이 부분은 상위 요소의 overflow속성에 따라 차이가 있습니다.