블럭요소와 인라인요소

블럭요소와 인라인요소

블럭요소

1. div, h1, p.......
2. 사용 가능한 최대 가로 너비를 사용한다. (width:100%, height:0; 으로 시작)
3. 크기를 지정할 수 있다.
4. 수직으로 쌓인다.
5. margin, padding 속성의 위, 아래, 좌, 우 모두 사용 가능하다.
6. 레이아웃을 잡는 용도로 대부분 사용한다.

인라인요소

1. span, img.......
2. 필요한 만큼의 너비를 사용한다. (width: 0; height: 0; 으로 시작)
3. 크기를 지정할 수 없다.
4. 수평으로 쌓인다.
5. margin, padding 속성의 위, 아래는 사용을 할 수 없다.
6. 텍스트를 작업하는 용도로 대부분 사용한다.

display 속성

• display 속성으로 임의로 블럭요소로 인라인요소로 변경 가능하다.

<!-- 블럭요소를 인라인요소로 임의로 변형 -->
div {
    display: inline;
}

<!-- 인라인요소를 블럭요소로 임의로 변형 -->
span {
    display: block;
}

---

※ 참고 링크

- https://heropy.blog/