CSS [3] – Box Model(박스 모델) 개념 알아보기

CSS Box Model

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

• 개발자도구 Computed 탭에서 계산된 영역을 확인할 수 있다.
• 가장 안쪽에서부터 content – padding – border – margin 영역으로 구분된다.
• 브라우저마다 기본적인 스타일이 적용되어 있어 이러한 영향을 쉽게 예측하기 어렵기 때문에 아래와 같이 브라우저 세팅 값을 리셋(CSS Reset)하기도 한다.

box-sizing 속성

* {
  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의 사이즈만 설정하겠다는 의미이다.

margin

.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

border

.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 등을 개별 속성으로 지정할 수 있다.

border와 outline 차이?

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

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

CSS로 원 그리기

.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;
}