HTML 요소의 타입 - 블록(Block)과 인라인(Inline)

HTML에서 각 요소는 기본적으로 웹 브라우저가 해당 요소를 화면에 표시하는 방식을 결정짓는 display 속성을 가집니다. 대부분의 요소는 display 속성값으로 블록(block) 또는 인라인(inline) 두 가지 유형 중 하나를 갖게 됩니다. 이 두 가지는 요소가 레이아웃에 어떻게 작용하는지에 큰 영향을 미칩니다.

1. 블록(Block) 요소란?

블록 요소는 항상 새로운 줄에서 시작되며, 가로 방향으로 부모 요소의 전체 너비를 차지합니다. 기본적으로 블록 요소는 레이아웃의 큰 틀을 만드는 데 사용됩니다.

블록 요소의 대표적인 예

<p>, <div>, <h1>~<h6>, <ul>, <ol>, <form> 등의 태그가 블록 요소에 속합니다.

 

예시 코드

<p style="border: 3px solid red;">
    이 문단은 블록 요소입니다. 새로운 줄에서 시작하며, 부모 요소의 전체 폭을 차지합니다.
</p>

 

<div> 요소: 블록 요소의 대표

<div>는 다양한 HTML 요소를 묶어 하나의 그룹으로 관리하기 위한 블록 요소로, 주로 스타일을 한 번에 적용하거나 레이아웃을 구성할 때 사용됩니다.

 

<div> 요소 활용 예시

<div style="background-color: lightgrey; color: green; text-align: center;">
    <h1>div 요소로 스타일을 적용하기</h1>
    <p>div를 사용하면 여러 요소를 그룹화한 뒤, 한 번에 스타일을 적용할 수 있습니다.</p>
</div>

2. 인라인(Inline) 요소란?

인라인 요소는 새로운 줄로 넘어가지 않으며, 요소의 내용 크기만큼 너비를 차지합니다. 이는 텍스트 내에서 특정 부분을 스타일링하거나, 레이아웃에 영향을 미치지 않는 요소를 처리할 때 유용합니다.

인라인 요소의 대표적인 예

<span>, <a>, <img> 태그 등이 인라인 요소에 해당합니다.

 

예시 코드

<p>
    <span style="background-color: grey; color: orange;">
        이 텍스트는 인라인 요소인 span으로 스타일이 적용되었습니다.
    </span>
</p>

 

 

<span> 요소: 인라인 요소의 대표

<span>은 텍스트의 특정 부분만 스타일링하거나 구별해야 할 때 사용됩니다. 이는 레이아웃에 영향을 미치지 않으면서 특정 텍스트를 선택적으로 강조할 수 있도록 합니다.

 

<span> 요소 활용 예시

<p>
    텍스트의 특정 부분을 강조하고 싶다면, 
    <span style="border: 2px solid blue;">span 태그를 활용</span>
    하세요.
</p>

 

블록 요소와 인라인 요소의 차이점 요약

구분	블록 요소	인라인 요소
새 줄 시작	항상 새로운 줄에서 시작	새로운 줄로 넘어가지 않음
너비	부모 요소의 전체 폭을 차지함	내용물의 크기만큼만 너비를 차지함
대표 요소	<div>, <p>, <form> 등	<span>, <a>, <img> 등

 

SEO와 HTML 구조의 최적화

HTML 요소의 올바른 사용은 단순히 디자인뿐 아니라 검색 엔진 최적화(SEO)에도 큰 영향을 미칩니다. 예를 들어, <h1>~<h6> 태그는 페이지 구조를 나타내는 데 중요하며, <div>와 <span>은 불필요한 중복을 줄이고 가독성을 높이는 데 도움을 줍니다.

정확한 요소를 적재적소에 활용해, 콘텐츠의 가독성과 검색 엔진 친화도를 함께 높여 보세요!