블록(Block)과 인라인(Inline)

CSS를 작성하는데 있어 블록요소와 인라인요소를 구분하는 것은 기본이 될 수 있습니다. 두 속성이 가지고 있는 특징이 다르기 때문이죠.

대표적으로 두 속성을 비교하는데 자주 이용되는 태그는 span태그와 div 태그로 두 태그 모두 영역을 설정할 때 사용을 합니다.

하지만, div요소로 감싼 영역의 경우 한 줄에 하나씩만 배치가 되지만, span요소로 감싼 영역의 경우 바로 옆에 다른 요소가 위치할 수 있는 것을 확인할 수 있습니다.

이렇게 배치를 하는데 있어 인라인요소와 블록요소를 구분하는 것은 중요합니다. 아래 조금 더 자세한 블록요소와 인라인 요소의 특징을 정리해보았습니다.

1. 블록(Block)

• 블록레벨 요소는 언제나 새로운 줄에서 시작하고, 좌우 양쪽으로 최대한 늘어나 가능한 모든 너비를 차지합니다.
• 즉, 블록요소는 한줄의 영역을 모두 차지하게 되는 거죠.
• 상자를 아래로 쌓는 것이라고 생각을 하면 조금 더 이해가 쉽겠습니다.

블록요소의 종류
dt, dd, ul, li, ol, dl, div, p, h1, h2, h3, h4, h5, h6 등

2 인라인(Inline)

• 인라인 요소는 최대한 너비를 줄이려고 하는 특징이 있습니다.
• 따라서 인라인 요소는 줄의 어느 곳에서나 시작할 수 있습니다.바로 이전 요소가 끝나는 지점부터 시작하며, 요소의 내용만큼만 차지합니다.
• 모두 그런 것은 아니지만, 대체로 글자와 관련한 요소들이 인라인 요소인 경우가 많습니다.

인라인요소의 종류
a, img, span, strong, input, textarea, select 등

3 포함규칙

• 같은 형태의 다른 요소를 안에 포함할 수 있습니다. (블록> 블록, 인라인> 인라인)
• 대부분의 블록요소는 다른 인라인 요소도 안에 포함할 수 있습니다.
  • (div 태그 안에 span태그도, div태그도 사용이 가능합니다.)
• 인라인 요소는 블록요소를 포함할 수 없습니다.
  • (span 태그 안에 span요소를 포함할 수 있지만, div요소는 포함할 수 없습니다.)

✅ 예외적인 a태그

• 단, 예외적으로 인라인 요소인 a태그의 경우 div요소를 1개까지는 넣을 수 있습니다.
• 즉 a태그는 예외적으로 자식요소가 1개인 경우 블록요소를 포함할수 있습니다.

4. 속성 변경

4-1 display를 이용한 속성변경

• display: block, display: inline를 이용해 각 요소의 속성을 변경할 수 있습니다.
• 단, HTML 인라인 요소에 display: block; 속성을 적용했다고 해서, HTML 인라인 요소는 인라인 요소만을 포함할 수 있다는 규칙이 무시되지는 않는다는 점을 주의해야합니다.

4-2 position을 이용한 속성변경

• position: absolute와 position: fixed를 사용한 요소의 경우 따로 명시를 하지 않아도 해당요소가 블록 요소로 변경되게 됩니다.
• 단, 블록요소로 변경되지만, 가로는 최대한 줄어드려고 하는 특징을 가지며 인라인 요소의 속성도 가지게 됩니다.