HTML의 inline 요소와 block 요소

block, inline

HTML의 인라인(inline) 요소와 블록(block) 요소는 웹페이지의 레이아웃과 구조를 결정하는 데 중요한 역할을 한다.

 

인라인(inline) 요소

인라인 요소는 텍스트나 이미지 등과 같은 작은 내용을 표시하는 데 사용된다.

인라인 요소는 컨텐츠가 차지하는 공간 만큼만 공간을 차지한다.

즉, 다른 요소와 함께 한 줄에 표시될 수 있다.

ex) <span>, <a>, <img>, <em>, <strong> 등

 

<em>이것은 인라인 요소입니다.</em>
<span>이것은 인라인 요소입니다.</span>
<a href="#">이것은 인라인 요소입니다.</a>

 

See the Pen inline 요소 by Jo Sujeong (@suzzeong) on CodePen.

 

블록(block) 요소

블록 요소는 대형 콘텐츠, 예를 들어 단락, 제목, 목록 등과 같은 구조적 요소를 나타내는 데 사용된다.

블록 요소는 자신의 줄을 차지하며, 수직으로 쌓이기 때문에 다른 요소와 함께 한 줄에 위치할 수 없다.

ex) <div>, <p>, <h1>~<h6>, <ul>, <ol> 등

 

<h1>이것은 <em>블록</em> 요소입니다.</h1>
<p>이것은 블록 요소입니다.</p>
<ul>
  <li>아이템 1</li>
  <li>아이템 2</li>
  <li>아이템 3</li>
</ul>

 

See the Pen block 요소 by Jo Sujeong (@suzzeong) on CodePen.

 

따라서, 인라인 요소와 블록 요소는 웹페이지의 레이아웃과 구조를 결정하는 데 있어 중요한 차이가 있다.

페이지 레이아웃을 설계할 때 이러한 차이를 고려하여 적절한 요소를 선택하는 것이 중요하다.

 

---

출처

https://dev.to/akshayjaagirdhar/differences-between-html-inline-and-blocks-elements-43d7

https://www.daleseo.com/css-display-inline-block/