CSS - 박스모델

HTML 문서의 레이아웃

박스의 세부 모습. border(테두리)를 기준으로 padding(안쪽 여백)과 margin(바깥 여백)이 있다.

 

border(테두리)

테두리는 심미적인 용도 외에도, 개발 과정에서도 매우 의미 있게 사용한다. 각 영역이 차지하는 크기를 파악하기 위해, 레이아웃을 만들면서 그 크기를 시각적으로 확인할 수 있다. 다음 코드를 통해 테두리를 실선으로 확인할 수 있다.

p {
  border: 1px solid red;
 }

border 속성에 적용된 값은 각각 border-width, border-style, border-color이다.

 

 

margin(바깥 여백)

p {
  margin: 10px 20px 30px 40px;
  }

margin은 border를 기준으로 박스 외부의 여백을 지정한다. 각각의 값은 top, right, bottom, left로 시계방향이다. 값을 두 개만 넣으면 첫 번째 값이 상하, 두 번째 값이 좌우이다. 값을 하나만 넣으면 모든 방향으로 적용된다. margin-top 등을 이용하여 특정 방향만 적용시킬수도 있다.

p {
  margin-top: -2rem;
  }

바깥 여백에는 음수 값도 지정해 줄 수가 있다. 여백에 음수 값을 지정하면 다른 엘리먼트와의 간격이 줄어들며, 극단적으로 적용하면 화면(viewport)에서 아예 사라지게 하거나, 다른 엘리먼트와 겹치게 만들 수 있다.

 

 

padding(안쪽 여백)

padding은 border를 기준으로 박스 내부의 여백을 지정한다. 값의 순서에 따른 방향은 margin의 그것과 동일하다.

 

 

 

박스를 벗어나는 콘텐츠 처리

박스 크기보다 콘텐츠 크기가 더 큰 경우에는 콘텐츠가 박스 바깥으로 빠져나오게 된다. 이런 경우는 overflow 속성을 지정해 처리할 수 있다.

overflow: auto; // 콘텐츠가 넘치는 경우 스크롤을 생성한다.
overflow: hidden; // 넘치는 콘텐츠의 내용을 숨긴다.

 

 

박스 크기 측정 기준

* {
  box-sizing: border-box;
  }

여백과 테두리 두께를 포함해서 박스 크기를 계산하게 만들어주는 마법의 코드. 항상 사용하도록 하자.