[CSS 개념잡기] 박스모델(Box model)

 

 

4. Box model

 

CSS 박스 모델

✔ 박스 모델이란?

웹 페이지는 여러 박스로 구성되어 있다.

• content: 콘텐츠가 표시되는 영역
• padding: 콘텐츠와 테두리(border) 사이 여백
• border: padding과 margin 사이 테두리(default = 0)
• margin: 가장 바깥 쪽 레이어
  • 콘텐츠와 패딩, 테두리를 둘러며 해당 박스와 다른 요소 사이 공백 역할

 

 

✔ 크기 - width, height

content의 크기 지정

• defalut: auto
• 상속되지 않음
• 블록 요소에만 적용됨!!
  • 인라인 요소에 적용 하려면 display 값을 block 또는 inline-block으로 바꿔줘야 함

 

 

✔ 크기 - max-width, min-width, max-height, min-height

특정 지점에 도착하면 블록 요소 크기가 변하지 않도록 하고 싶을 때 지정한다.

 

 

✔ margin

박스 모델의 가장 바깥쪽 여백

/* 네 면 */
margin: 1em;
margin: -3px;

/* shorthand - 상하, 좌우 순 */
margin: 5% auto;

/* shorthand - 상 우 하 좌 */
margin: 2px 1em 0 auto;

/* 전역 값 */
margin: inherit;
margin: initial;
margin: unset;

• %는 부모의 width 값을 기준으로 함

 

 

✔ 여백 - margin collapsing

여러 블록 요소들의 상, 하 margin이 가장 큰 크기를 가진 margin으로 결합되는 현상

1. 인접 형제
   • 두 형제 요소의 상, 하 여백이 만나는 경우
2. 부모-자식요소
   • 부모 블록에 border, padding, inline content가 없어 부모와 자식의 margin-top이 만나는 경우
   • 부모 블록에 border, padding, inline content가 없고 부모-자식을 분리할 height 값이 지정되지 않아 부모와 자식의 margin-bottom이 만나는 경우
   • 결합을 끊을 수 있는 padding이나 border 속성이 있으면 사라짐
3. 빈 블록
   • border, padding, content, height가 존재하지 않으면 해당 블록의 margin-top과 margin-bottom이 상쇄돰

 

 

✔ padding

블록 안쪽 여백, 속성 shorthand 등은 margin과 동일하다.

• padding 상쇄는 없음
• %는 부모 블록의 width 값을 기준으로 함.

 

 

✔ 테두리 - border-style, border-width, border-color

• default: none
• border-style

  border-style: none;
  border-style: hidden;
  border-style: dotted;
  border-style: dashed;
  border-style: solid;
  border-style: double;
  border-style: groove;
  border-style: ridge;
  border-style: inset;
  border-style: outset;

• 상하좌우 스타일을 따로 지정 가능
• none으로 지정시 width와 color를 지정해도 보이지 않음!
• border-width: 테두리 두께
• border-color: 테두리 색

 

 

✔ 테두리 - border(shorthand)

.box {
    border: 1px solid black;
}

• border-style 속성이 들어있지 않다면 보이지 않음
• 외곽선(outline)과 차이?
  • 외곽선은 요소를 강조하기 위해 넣음
  • 테두리는 레이아웃 자체를 보여주기 위한 역할

 

 

✔ 테두리 - border-radius

테두리의 각을 조절 가능하다.

 

 

✔ box-sizing

요소의 너비, 높이를 계산하는 방법을 지정한다.

1. content-box
   • 기본 값
   • width, height 속성이 콘텐츠 영역만 포함함
   • 마진과 패딩에 따라 생각보다 커질 수 있음
   • 요소의 크기
     • 너비: 콘텐츠 너비
     • 높이: 콘텐츠 높이
2. border-box
   • width, height 속성이 안쪽 여백과 테두리는 포함하지만 바깥 여백은 포함하지 않는다.
   • 실제 우리가 보고 싶은 크기로 만들기 위해 적용한다.
   • 요소의 크기
     • 너비 = 테두리 + 안쪽 여백 + 콘텐츠 너비
     • 높이 = 테두리 + 안쪽 여백 + 콘텐츠 높이
   • *, body 등에 미리 지정하고 사용하는 경우가 많음