[CSS] Box Modeling에 필요한 모든 것(margin, padding, border)

한 웹 사이트를 봐보자.

 

웹사이트는 내가 디자인적으로 좋아하고 학습을 위해 벤치마킹 하고 있는 디자인 베이스를 볼 것이다.

여기 이 멋진 디자인베이스 홈페이지에도 Box Modeling이 적용되어 있다.

이런 빨간 네모들이 Box이고 Box 가 모여 하나의 멋진 웹 사이트를 구성한다.

 

바로 이게 오늘 배워볼 Box Modeling이다.

 

들어가기 전에 먼저 이야기 하자면 Box Model을 잘 이용해야 우리가 원하는 공간에 배치하고, 조절, 나열할 수 있게 된다.

 

최신 CSS 기술에는 Flexbox라는 것이 생겼다.

 

Flexbox도 사실상 Box Model에 상응하는 개념이니 다음에 배워볼 Flexbox를 위해 이번 시간에 Box model이 무엇인지 잘 알아보고 넘어가도록 하자.

Box Modeling

모든 HTML 요소들은 Box의 형태를 갖고 있다.

Box Model 은 HTML 요소의 Dimensions와 structure를 위해 존재한다.

이런 HTML 요소는 총 4개의 Box를 갖고있는데,

• content
• padding
• border
• margin

우리가 크롬의 개발자 도구를 보면

모든 요소들마다 아래와 같은 박스를 갖게된다.

 

우리는 이런 Box를 잘 이용해야 우리가 원하는 배치를 할 수 있게 되는 것이다.

Content Box

Content Box는 박스 모델의 가장 안쪽 속성으로 Css의 Height와 Width에 의해서 정의된다.

기본적으로 Content Box는 요소 내부에 있는 모든 것에 의해 정의가 된다.

이 말은 즉, 내용에 따라 확대 또는 축소된다는 뜻이다.

이렇게 두 개의 span 태그가 있을 때 Content 영역은 아래와 같이 내용물에 따라 크기가 달라진다.

 

See the Pen JjXgvzo by onigiri (@dhslrl321) on CodePen.

Border Box

border 영역은 말 그대로 Box의 경계(Border)이다.

border에도 다양한 속성이 존재하지만 border 속성은 매우매우매우 이상하고 이쁘지 않기 때문에 대부분 한 두가지 속성만 사용한다.

대부분 solid만 사용하고 solid를 사용할 일도 거의 없다.

 

내가 생각하기에 border은 Padding과 margin을 구분짓는 것이라고만 일단 알아두면 될 것 같다.

Padding Box

Padding은 Content의 바로 밖의 Box로

Margin 속성과 대조되는 개념이다.

 

Padding은 border 내부와 content 사이의 여백을 뜻한다.

위의 코드에서 padding을 조금 줘보자.

 

See the Pen JjXgvzo by onigiri (@dhslrl321) on CodePen.

Margin Box

margin은 border외부의 여백을 뜻한다.

 

위에서 썼던 코드에 margin을 조금 추가해보자.

 

See the Pen JjXgvzo by onigiri (@dhslrl321) on CodePen.