생활코딩 CSS_9.1-9.3 박스모델 (Box model)

9.1 Inline vs Block level

<h1> vs <a>

---

• <h1> 태그는 화면 전체를 사용한다: <h1> element 다음에 오는 콘텐츠는 다음 줄에서 부터 시작.
• <a> 태그는 다른 콘텐츠 안에 존재할 수 있다: 줄바꿈 없이 본문내에 링크가 걸린 텍스트를 적을 수 있음.

다음과 같은 예시로 각 element가 차지하는 부피를 확인할 수 있다.

h1, a {
    border-width: 5px;
    border-color: red;
    border-style: solid;
}

<h1> Header </h1>
<a> link </a>

Block level vs inline

---

• Block level element: <h1> 처럼 줄 전체를 차지하는 태그
• Inline element: <a> 처럼 자신의 크기 만큼만 부피를 차지하는 태그

Display

---

Display 속성을 이용해서 block level element와 inline element를 바꿀 수 있다.

/* h1 태그를 inline element로 바꿈 */
h1 {
    display: inline;
}

/* a 태그를 block level element로 바꿈 */
a {
    display: block;
}

9.2 박스모델 (Box Model)

Border

---

테두리(border)는 박스 모델의 기준선 역할을 하기 때문에 박스의 부피를 보다 용이하게 확인할 수 있다.

p {
    border: 10px solid red;
}

Padding

---

element 자체가 차지하는 부피를 설정한다.

p {
    padding: 20px;
}

Margin

---

element를 여러개 배치했을 때 element 사이의 간격, 즉 element 기준선 밖의 여백을 조절한다.

p {
    margin: 20px;
}

Width & Height

---

현재 Block element가 차지하고 있는 부피를 조절하려면 width와 height값을 조절한다.

Inline element에는 적용할 수 없다.

p {
    width: 100px;
    height: 30px;
}

9.3 Box-sizing

element의 크기를 지정할 때 보다 쉽게 예측할 수 있는 방법

element의 크기는 border의 두께를 포함하지 않기 때문에 박스모델의 크기 예측이 어렵다.

/* Box width를 150px로 설정 */
div {
    width: 150px
}

/* border의 두께가 다르기 때문에 id = "small"인 element와 "large"인 element의 크기가 다름 */
#small {
    border: 10px solid black;
}

#large {
    border: 30px solid black;
}

이런 문제는 box-sizing 속성을 바꿔서 해결할 수 있다.

보다 직관적인 편집을 위해 전체 태그(*)에 box-sizing을 적용하기도 한다.

/* box-sizing을 border-box로 바꾸면 border을 포함해서 크기를 지정 */
/* default: content-box */
div {
    width: 150px;
    box-sizing: border-box;
}

참고

---

• 생활코딩 CSS - 인라인 VS 블럭레벨
• 생활코딩 CSS - 박스모델
• 생활코딩 CSS - box-sizing
  
  
• 박스모델 by Poiemaweb