CSS 블록(block), 인라인(inline), 인라인 블록(inline-block) 요소

css

CSS 블록(block), 인라인(inline), 인라인 블록(inline-block) 요소란?

블록 (block), 인라인 (inline), 그리고 인라인 블록 (inline-block) 은 웹 페이지의 레이아웃을 조절하는 데 중요한 역할을 합니다. 적절한 표시 속성을 선택하면 원하는 레이아웃을 구현할 수 있습니다. 각 요소에 대해 자세히 알아보겠습니다.

CSS 블록 (block) 요소

CSS의 블록 (block) 요소는 웹페이지의 구조와 레이아웃을 형성하는 데 중요한 역할을 합니다.
블록 요소는 일반적으로 한 줄 전체를 차지하며 수직으로 쌓이는 특징을 가지고 있습니다.
한 줄 전체를 차지하기 때문에 다른 요소를 밀어내게 됩니다.
예를 들어, <div>나 <p>와 같은 요소가 블록 요소에 속합니다.
이러한 블록 요소는 웹페이지의 헤더, 푸터, 사이드바 등을 정의하는 데 자주 사용됩니다.

<body>
  <div>block</div>
  <div>block</div>
  <div>block</div>
</body>

HTML

블록 요소는 일반적으로 한 줄 전체를 차지합니다.

CSS 인라인 (inline) 요소

인라인 (inline) 요소는 블록 요소와는 달리 문장이나 단락 안에서만 공간을 차지하며 수평으로 쌓입니다.
즉, 인라인 요소는 다른 요소들과 같은 라인에 배치됩니다.
요소가 인라인 이라면, 너비(width)나 높이(height) 값을 지정해도 무시됩니다.
<span>이나 <a>와 같은 인라인 요소는 일반적으로 텍스트 스타일링이나 하이퍼링크와 같은 작은 부분을 다룰 때 사용됩니다.

<body>
  <span>inline</span>
  <span>inline</span>
  <span>inline</span>
</body>

HTML

인라인 요소는 다른 요소들과 같은 라인에 배치 됩니다.

CSS 인라인 블록 (inline-block) 요소

인라인블록 (inline-block) 요소는 블록과 인라인의 특징을 모두 가지고 있는 유용한 개념입니다.
이들은 한 줄에 여러 개가 나란히 위치하면서도 내용을 감쌀 수 있습니다.
인라인 요소이면서 블록 요소이기 때문에 너비나 높이, 마진과 패딩이 적용 됩니다.
주로 레이아웃을 유연하게 만들 때 활용되며, 예를 들어 <img> 태그가 이에 해당합니다.

CSS 블록과 인라인 요소 간의 차이점 정리

크기와 배치:
- 블록 요소: 블록 요소는 수직으로 쌓이며, 부모 요소의 가로폭 전체를 차지합니다. 즉, 너비와 높이를 설정할 수 있습니다.
- 인라인 요소: 인라인 요소는 수평으로 나란히 흐르며, 컨텐츠가 차지하는 만큼의 공간만을 가집니다. 너비와 높이를 설정하기 어렵습니다.
줄 바꿈:
- 블록 요소: 블록 요소는 새로운 줄에서 시작하여 다음 블록 요소는 다음 줄에 배치됩니다.
- 인라인 요소: 인라인 요소는 앞 뒤의 내용과 나란히 흐르며, 내용이 끝나면 다음 요소는 같은 줄에 이어집니다.
기본 너비:
- 블록 요소: 블록 요소는 가로폭 전체를 차지하므로 부모 요소의 가로폭에 따라 크기가 결정됩니다.
- 인라인 요소: 인라인 요소는 컨텐츠의 크기에 맞게 자동으로 크기가 조절되며, 부모 요소의 너비에 영향을 받지 않습니다.
여백과 패딩:
- 블록 요소: 블록 요소는 상하좌우 여백(margin)과 내부 여백(padding)을 설정할 수 있습니다.
- 인라인 요소: 인라인 요소는 좌우 여백과 내부 여백을 설정할 수 있지만, 상하 여백은 적용되지 않습니다.
디폴트 표시 유형:
- 블록 요소: <div>,<p>,<h1> 과 같은 요소들은 블록 요소가 기본값 입니다.
- 인라인 요소: <span>,<a>,<strong>과 같은 요소들은 인라인 요소가 기본값 입니다.