<오늘부터 CSS 마스터 3일차> Box model

2023/02/20 카테고리 CSS

CSS Box model

CSS Box model은 모든 HTML 요소를 감싸는 박스이다.

div {
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}

box model의 width, height를 설정하면, 이것은 content 부분의 width, height를 설정한 것이다.

전체 사이즈를 계산하기 위해서는 padding, border, margin을 모두 더해줘야한다.

div {
  width: 320px;
  padding: 10px;
  border: 5px solid gray;
  margin: 0;
}

요소의 총 width = width + left padding + right padding + left border + right border + left margin + right margin

요소의 총 height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

요소의 총 width는 350px이다.

width와 heigth로 올 수 있는 값은 다음과 같다.

max와 min은 length 값으로 설정할 수 있다.

ex) px, cm, containing block의 %

div {
  max-width: 500px;
  height: 100px;
  background-color: powderblue;
}

위

는 브라우저 width가 500px보다 작아지면 수평으로 스크롤이 생겨난다.

스크롤을 해결하기 위해서는 max-width를 사용하면 가능하다.

div {
  max-width: 500px;
  height: 100px;
  background-color: powderblue;
}

max-width와 width를 같은 요소에 사용할 때, width 속성이 max-width 속성보다 큰 경우 max-width 속성이 사용된다.

만약, padding 값에 상관없이 width를 설정한 값을 content 그대로 사용하고 싶다면 box-sizing 속성을 설정한다.

div {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
}

위 코드는 padding 값이 어떻든 content의 width는 300px로 설정된다.

margin을 사용하면 컨테이너 내부의 요소를 수평으로 가운데에 위치하도록 설정할 수 있다.

div {
  width: 300px;
  margin: auto;
  border: 1px solid red;
}

두개의 margin이 하나처럼 동작할 때가 있다.

h1 {
  margin: 0 0 50px 0;
}

h2 {
  margin: 20px 0 0 0;
}

h1의 bottom margin이 50px이고 h2의 top margin이 20px이다.

h1 아래에 h2가 위치해 있을 때, 예상대로라면 h1과 h2 사이에는 70px이라고 예상되지만 margin-collpase 현상으로 인해 둘 중 큰 margin만 적용된다.

이는 오직 top, bottom에서만 발생한다. left, right margin에서는 발생하지 않는다.

margin과 padding과 달리 border는 style과 width, color를 설정할 수 있다.

또한 원하는 방향에 각각 스타일링을 해줄 수 있다.

1
2
3

p {
  border-left: 6px solid red;
}

1
2
3

p {
  border-bottom: 6px solid red;
}

p {
  border: 2px solid red;
  border-radius: 5px;
}