css/블록 레벨 요소와 인라인 레벨 요소

CSS의 인라인 레벨과 블록 레벨에 대해 공부하며 챗 GPT를 활용하여 글을 작성해 보았습니다. CSS에서 블록 레벨(block-level) 요소와 인라인 레벨(inline-level) 요소는 HTML 요소가 표시되는 방식을 나타내는 개념입니다.

1. 블록 레벨 요소

화면 전체의 가로폭을 차지하며, 수직으로 쌓입니다.
기본적으로 width(너비)와 height(높이)를 지정할 수 있습니다.
margin, padding 값을 모두 지정할 수 있습니다.
div, h1, p, ul, ol 등이 블록 레벨 요소에 해당합니다.

2. 인라인 레벨 요소

필요한 만큼의 가로폭을 차지하며, 수평으로 쌓입니다.
기본적으로 width(너비)와 height(높이)를 지정할 수 없습니다.
margin-right, margin-left, padding-right, padding-left만 지정할 수 있습니다.
a, span, img, input 등이 인라인 레벨 요소에 해당합니다.
또한, HTML5에서는 inline-block 레벨 요소도 추가되었습니다. 이는 인라인 레벨 요소와 같이 수평으로 쌓이면서, 블록 레벨 요소와 같이 width와 height 값을 지정할 수 있습니다. inline-block 요소는 일반적으로 inline 요소와의 간격 문제를 해결할 때 많이 사용됩니다.

위와 같은 차이점으로 인해 블록 레벨 요소는 주로 레이아웃 구성에, 인라인 레벨 요소는 주로 텍스트나 이미지 등의 내용 구성에 사용됩니다. 또한, CSS에서는 display 속성을 이용하여 요소의 레벨을 변경할 수 있습니다.

<div class="parent">
  <a class="child">Hello, world!</a>
</div>

위 코드에서 .parent는 블록 레벨 요소이며, .child는 인라인 레벨 요소입니다.

.parent {
  display: inline; /* 블록 레벨 요소를 인라인 레벨 요소로 변경 */
}

.child {
  display: block; /* 인라인 레벨 요소를 블록 레벨 요소로 변경 */
}

위 코드에서 .parent 요소에 display: inline;을 적용하면 블록 레벨에서 인라인 레벨로 변경되어 가로 방향으로 배치됩니다. 반대로 .child 요소에 display: block;을 적용하면 인라인 레벨에서 블록 레벨로 변경되어 세로 방향으로 배치됩니다.

이렇게 display 설정을 사용하여 요소의 레벨을 변경하는 것은 여러 가지 장점이 있습니다.

1. 레이아웃 변경 용이성

display 설정을 변경하여 요소의 레벨을 조절할 수 있으므로, 레이아웃 변경이 용이해집니다. 예를 들어, 블록 레벨 요소를 인라인 레벨 요소로 변경하여, 요소들이 한 줄에 나란히 배치되도록 만들 수 있습니다.

2. 코드 재사용성

display 설정을 변경하여 요소의 레벨을 변경할 경우, 코드 재사용성이 높아집니다. 예를 들어, 같은 스타일을 적용해야 하는데, 블록 레벨 요소와 인라인 레벨 요소가 섞여있는 경우, display 설정을 이용하여 요소의 레벨을 통일시킨 후, 스타일을 적용할 수 있습니다. 이렇게 하면 코드 중복을 피할 수 있으므로, 코드의 유지보수가 용이해집니다.