블록구조와 인라인구조의 특징과 차이점

모든 태그는 인라인태그와 블록태그로 나눌 수 있다.

인라인태그와 블록태그가 각각 어떤 특징을 가지고 있는지 살펴보자.

---

인라인 구조의 특징

1. 너비

인라인(inline) 구조는 자기에게 필요한 만큼의 공간만 차지한다.

즉, 텍스트의 크기가 곧 너비이며 줄이 바뀌지 않고 가로로 길게 정렬된다는 특징이 있다.

2. 태그

인라인 구조의 대표적인 태그는 다음과 같다.

<storng>,<mark>,<em>,<span>,<strong>,<mark>,<a>,<br>,<button>,<img> ...

 

블록구조의 특징

1. 너비

블록(block)구조는 자기가 속한 영역의 너비를 모두 차지한다. 즉 이름처럼 블록을 형성하는 것이다.이는 텍스트의 크기와 관계없이 줄 바꿈이 일어나기에 세로로 정렬된다는 특징이 있다. 

2. 태그

블록 구조의 대표적인 태그는 다음과 같다.

<div>,<form>,<h1>,<ul>,<p>,<section> ...

 

각 태그가 블록 구조인지, 인라인 구조인지 알아보기 위해서는 개발자도구를 활용해볼 수 있다.

 

---

 

아래 사진은 각각의 태그를 입력한 후 개발자 도구를 활성화 한 것이다.

인라인태그(inline)

 

<mark><strong><em><q><s>의 태그를 입력했을때, '인라인'이라는 내용은  줄바꿈이 되지않은 채 가로로 길게 정렬되었다.

파란 박스가 가리키는 영역은 태그의 너비이다. 즉, 인라인 태그는 텍스트의 크기만큼만 너비를 차지함을 알 수 있다.

 

블록태그(block)

 

<div><form><h1><p>의 태그를 입력했을때, '블록'이라는 내용은  옆에 자리가 많이 남아있음에도 줄바꿈이 된 것을 알 수 있다.

파란 박스가 가리키는 영역은 태그의 너비이다.

즉, 블록 태그는 자기가 속한 영역의 크기를 모두 너비로 사용하며, 한 줄에는 하나의 컨텐츠만 나타냄을 알 수 있다.

 

---

인라인 구조와 블록 구조의 차이점

✔ 위에서 살펴본 특징을 바탕으로 비교해보면, 두 구조의 가장 큰 차이점은 '줄바꿈'으로 나타낼 수 있다.

 

인라인 구조는 줄 바꿈이 일어나지 않고 가로로 길게 나타나는 반면,
블록 구조는 줄 바꿈이 일어나서 한 줄에 하나만 입력되며 세로로 길게 나타난다.