Web/HTML

블럭요소와 인라인요소

투런포 2021. 11. 22. 18:03
반응형

블럭요소와 인라인요소

블럭요소

  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/