CSS [3] – Box Model, 박스 모델 개념 정리

CSS Tutorial – Full Course for Beginners

Lesson 5 – CSS Box Model

h1 {
  border: 2px dashed red;
  width: 50%;
  font-size: 3rem;
  padding: 0.5em;
}

• 개발자도구 Computed 탭에서 확인 가능
• content, padding, border, margin 영역 확인
• 브라우저 기본 값의 영향으로 font-size에 margin이 영향받는 것을 확인
  • 이러한 영향을 쉽게 예측하기 어렵기 때문에 브라우저 세팅 값을 리셋(CSS Reset)하기도 함

* {
  margin: 0;
  padding: 0;
  box-sizing: content-box;
}

• box-sizing: content-box;
  • width: 400px 설정시 content, padding, border를 합친 width가 400px로 설정됨
  • box-sizing 속성을 content-box로 설정시 padding, border 제외한 content의 사이즈만 설정하겠다는 의미

.container {
  border: 2px dashed red;
  font-size: 1.5rem;
  margin: 1.5em;
  /* margin-top: 1.5em;
  margin-right: 1.5em;
  margin-bottom: 1.5em;
  margin-left: 1.5em; */
  padding: 1.5em;
}

• margin: 1.5em 2em 2em 2em; 순서는 top / right / bottom / left
• margin: 1.5em 2em; 순서는 top, bottom / right, left
• margin: 1.5em 3em 5em; 순서는 top / right, left / bottom

.container {
  border: 2px dashed red;
  border-top: 5px solid;
  border-top-color: blue;
  border-top-width: 5px;
  border-top-style: ridge;
  border-right: 1px dotted;
}

• border의 top, right, bottom, left / width, color, style 등을 개별 속성으로 지정할 수 있음

...
  outline: 5px solid purple;
  outline-offset: 5px;
...

• border와 달리 박스모델에 영향을 주지 않음, space 차지하지 않음
• border 바깥이나 안쪽(negative)에 설정할 수 있음

.circle {
  margin: 3rem auto;
  background-color: gold;
  width: 100px;
  height: 100px;
  border: 2px solid #000;
  border-radius: 50px;
  outline: 2px solid red;
  outline-offset: 0.25rem;
}

• CSS로 원 그리기
• 재밌다!