h14. HTML 블록 태그 및 인라인 태그

HTML 블록 태그 및 인라인 태그

모든 HTML 태그는 기본적으로 블록 태그와 인라인 태그로 나눌 수 있습니다.

블록 태그들은 화면의 전체폭을 갖으며 줄바꿈으로 시작합니다. 

<div> 태그가 이런 종류의 태그입니다.

<div>, <h1>, <h2>..., <p> 등이 있습니다.

<div> A </div><h1> B </h1><h2> C </h2><p> D </p>

A

B

C

D

인라인 태그들은 새로운 줄에서 시작하지 않습니다. 그리고 폭도 필요한 만큼만 가지게 됩니다.

<span> 태그는 <p> 태그 내에서 인라인 태그로 사용됩니다. 

인라인 태그에는 <span>, <a>, <img> 태그가 있습니다.

<span> 1 </span>
<a> 2 </a>
<img src="https://cdn4.iconfinder.com/data/icons/48-bubbles/48/27.Phone-128.png">
<img src="https://cdn4.iconfinder.com/data/icons/48-bubbles/48/28.Tablet-128.png">

1 2

<div> 태그는 다른 HTML 태그를 담는 그릇과 같은 역할을 하는 블록 태그 입니다.

<div> 태그에 style 및 class 를 지정하여 사용할 수 있습니다. 

이때 <div> 태그는 스타일이 적용되는 영역으로 사용될 수 있습니다.

<div style="background-color: DeepSkyBlue; color: white; padding: 10px;">
<h2>수소폭탄</h2>
<p>수소폭탄은 일반 핵폭탄을 이용해 수소 핵융합을 일으켜 폭발력을 증가시킨 핵폭탄을 말합니다.</p>
</div>

수소폭탄

수소폭탄은 일반 핵폭탄을 이용해 수소 핵융합을 일으켜 폭발력을 증가시킨 핵폭탄을 말합니다.

---

<span> 태그는 인라인 태그인데, 문자를 담는 용도로 종종 사용됩니다. 

<span> 태그는 스타일 및 class 를 지정하여 사용할 수 있습니다. 

이때 <span> 요소는 텍스트에 스타일이 적용되는 영역이 됩니다.

<p>&lt;span&gt; 태그를 사용하여 일부만 <span style="color: blue;">청색글자</span>로 표시하였습니다.</p>

<span> 태그를 사용하여 일부만 청색글자로 표시하였습니다.

---

[광고] Udemy 동영상 강의로 보기