Block & Inline Block

HTML element는 블럭 요소와 인라인블럭 요소로 나뉜다.

Block

종류

  • div
  • h1, h2, h3…
  • header, footer
  • p
  • section
  • video

특징

  • 크기를 지정할 수 있다.
  • 사용 가능한 최대 가로 너비 (100%), 높이는 ‘content-height’를 사용한다.
  • 줄바꿈이 된다. (수직으로 쌓인다)
  • 다른 인라인 요소를 포함할 수 있다.
  • width, height, margin, padding 등의 속성을 사용해 레이아웃을 수정할 수 있다.
  • 레이아웃을 잡을 때 사용

Inline Block

종류

  • span
  • a
  • label
  • strong

특징

  • 필요한 만큼의 너비를 사용한다.
  • 크기를 지정할 수 없다.
  • 줄바꿈이 없다. (수평으로 쌓인다)
  • 항상 블럭 요소 안에 포함되어 있으며, 다른 인라인 요소를 포함할 수는 없다.
  • line-height 속성으로 줄의 높낮이를 조절할 수 있다.
  • text-align 속성으로 텍스트의 정렬을 수정할 수 있다.
  • html 문서에서 <span> 태그를 줄 바꿈을 줘 나열 할 경우, 요소 간에 공백이 삽입된다.
  • 텍스트를 다룰 때 사용

각 요소간 전환

각 요소를 block과 inline-block으로 전환하고 싶은 경우 css의 display 요소를 변경하면 된다. 필요에 따라 display를 변경하면서 사용할 줄 알아야 한다.

1
2
3
4
5
6
7
div {
  display: inline;
}

span {
  display: block;
}