[css] Block & Inline block

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를 변경하면서 사용할 줄 알아야 한다.

div {
  display: inline;
}

span {
  display: block;
}