HTML - 태그의 두 가지 성격 (Block 요소와 Inline 요소)

Block 요소와 Inline 요소

내가 사용하는 태그가 인라인 요소인지, 블럭요소인지 알아야 레이아웃 작업이 원활하게 진행될 수 있음. 두 요소를 구분 짓는 세 가지 주요 특징은 다음과 같음.

 

1. 줄바꿈 현상이 있는지
2. 가로나 세로로 공간에 대한 크기를 만들 수 있는지
3. 상하 배치작업이 가능한지

<!-- Block 요소 -->
<p>Hello devSsom</p>
<p>Hello devSsom</p>
<p>Hello devSsom</p>

Hello devSsom Hello devSSom Hello devSSom

 

위에처럼 <p>태그를 연달아서 입력할 때, 글자들이 y축 방향으로 정렬되고 있는데, 이와 같은 특징을 가지고 있는게 Block 요소. <h1>~<h6>, <p>, <header>, <div> 등 공간을 만들 때 사용했던 태그들이 다 Block 요소임. 이 Block 요소들은 공간을 만들 수 있기 때문에, width, height를 이용해서 공간에 대한 크기를 설정할 수 있음. 그리고 마지막으로, 이렇게 설정된 공간에 대해서 margin과 padding값으로 상하 배치 작업이 가능함.

 

<!-- Inline 요소 -->
<a>Bye devSsom</a>
<a>Bye devSsom</a>
<a>Bye devSsom</a>

Bye devSsom Bye devSsom Bye devSsom

 

위에처럼 <a>태그를 연달아서 입력하게 되면 x축으로 정렬이 됨. 이와 같은 정렬 방식을 보이는게 Inline 요소. Block 요소와는 정반대로, 어떤 공간을 만들 수 없고(width, height값 적용 불가), 그렇기 때문에 상하 배치 작업(margin-top, margin-bottom, padding-top, padding-bottom값 적용)도 불가능함.