Chapter2-2. 박스를 구성하는 요소

CSS 박스 모델

border(테두리)를 기준으로 padding(안쪽 여백)과 margin(바깥 여백)

border(테두리)

각 영역이 차지하는 크기를 파악하기 위해, 레이아웃을 만들면서 그 크기를 시각적으로 확인할 수 있도록 만듭니다.

p {
  border: 1px solid red;
}

[코드] p 요소에 1px의 빨간색 실선을 추가합니다.

border 속성에 적용된 각각의 값 : 테두리 두께( border-width ), 테두리 스타일( border-style ), 테두리 색상( border-color)

괄호 안에 적힌 것들이 바로 border 속성에 추가할 수 있는 세부 속성입니다.

 

 

margin(바깥 여백) *각각의 값은 top, right, bottom, left로 시계방향입니다. *

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

[코드] p 요소의 상하좌우에 여백을 추가합니다.

 

만약 값을 두개만 넣으면? top-bottom , right-left 값이 적용 됩니다.

p {
  margin: 10px 20px;
}

[코드] p 요소의 위아래(top-bottom)와 좌우(left-right)에 각각 여백을 추가합니다.

 

위치를 특정해 여백을 추가 할 수 있습니다.

p {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-left: 40px;
}

위와 같은 규칙은 padding에도 동일하게 적용됩니다.

 

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

p {
  margin-top: -2rem;
}

 

 

padding(안쪽 여백)

padding은 border를 기준으로 박스 내부의 여백을 지정합니다. 값의 순서에 따른 방향은 margin과 동일하게 top, right, bottom, left입니다.

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

[코드] p 요소의 padding 속성에 여백을 추가합니다.

 

 

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

박스 크기보다 콘텐츠 크기가 더 큰 경우에는 콘텐츠가 박스 바깥으로 빠져나옵니다.

이렇게 콘텐츠가 박스를 뚫고 나가는 경우에는 박스 크기에 맞게 콘텐츠를 더 이상 표시하지 않거나, 혹은 박스 안에 스크롤을 추가하여 콘텐츠를 확인할 수 있게 만듭니다.

p {
  height: 40px;
  overflow: auto;
}

[코드] p 태그에 overflow 속성을 지정해 박스보다 큰 콘텐츠에는 스크롤을 표시합니다.

만약 넘치는 콘텐츠의 내용을 보여주고 싶지 않을때에는 -> overflow: hidden 값을 사용합니다.만약 x축과 y축을 지정해 가로 방향으로 스크롤 하거나 세로 방향으로 스크롤 할수 있게끔 지정할 수 있습니다.x축: overflow-xy축: overflow-y

 

 

박스 크기 측정 기준

박스 크기를 측정하는 기준은 매우 중요합니다.

<div id="container">
  <div id="inner">
    안쪽 box
  </div>
</div>
/* html 예시 */

#container {
  width: 300px;
  padding: 10px;
  background-color: yellow;
  border: 2px solid red;
}

#inner {
  width: 100%;
  height: 200px;
  border: 2px solid green;
  background-color: lightgreen;
  padding: 30px;
}
/* css 예시 */

#container 의 너비는 300px가 아닌 324px입니다.

300px (콘텐츠 영역) + 10px (padding-left) + 10px(padding-right) + 2px(border-left) + 2px(border-right)

 

#inner의 너비의 100%는 300px가 아닌 364px입니다.

300px (콘텐츠 영역) + 30px (padding-left) + 30px(padding-right) + 2px(border-left) + 2px(border-right)

 

박스에 적용할 여백을 고려하지 않고 박스의 크기를 디자인하는 경우입니다.

박스의 크기를 디자인할 때 콘텐츠 영역만 고려하면, 개발 과정에서 처음 생각한 레이아웃을 벗어날 수 있습니다.

여백을 고려하지 않은 계산 방식은 레이아웃 디자인을 어렵게 만듭니다.

이를 쉽게 하는 방법은 여백과 테두리 두께를 포함해서 박스 크기를 계산하게 만드는 것입니다.

* { /* *은 모든 요소를 선택하는 셀렉터 */
  box-sizing: border-box;
}

이렇게 모든 요소에 box-sizing: border-box를 적용하면, 모든 박스에서 여백과 테두리를 포함한 크기로 계산됩니다.