HTML(h, br, p, 강조태그, sub/sup, ol/ul/li, dl/dt/dd)

<h> 태그

- 제목을 나타낼 때 사용하는 태그로 <h1>, <h2>, <h3>, <h4>, <h5>, <h6>이 있다.

- 작성 시 글꼴이나 크기를 지정하지 않으면 브라우저의 기본 글꼴과 크기로 표시된다.

예)

<h1>Hello world!</h1>
<h2>Hello world!</h2>
<h3>Hello world!</h3>
<h4>Hello world!</h4>
<h5>Hello world!</h5>
<h6>Hello world!</h6>

결과)

---

<br> 태그

- HTML은 엔터를 눌러 다음줄로 넘겨도 자동으로 병합이 된다.

- 다음줄로 넘기고 싶을 때 <br>태그를 사용한다.

예)

<p>Hello<br>world!</p>

결과)

---

<p> 태그

- 문단을 구분할때 사용된다.

- 앞뒤로 여백이 들어가는데 <br>이 두번 들어간 것과 같은 결과가 나온다.

예)

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, nulla!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt labore soluta voluptatibus itaque voluptatum molestiae magni aut maxime, ipsam est?</p>

결과)

길이가 길어지면 자동으로 다음줄로 넘어가게 된다. 서로 다른 p태그일 경우 문단을 구분하기 위해서 문단간 떨어져 있는 간격이 커진다. 

---

<b>, <strong>, <i>, <em>, <mark> 태그

- b와 strong은 html에서 텍스트를 강조할 때 사용하는 태그

- 다만 b는 단순히 진하게 보이기 위해서 사용, strong은 브라우저가 중요한 부분으로 인식하고 음성인식도 된다.

- i와 em은 텍스트를 기울어져 보이게 하는 태그

- i는 단순히 기울어져 보이기 위해 사용, em은 의미적으로 강조를 하기 위해 사용

- mark는 텍스트를 형광펜으로 강조해 보이게 하기 위해서 사용하는 태그

예)

<p>
<b>Lorem</b> ipsum dolor sit <strong>amet</strong>, consectetur <i>adipisicing</i> elit. <em>Nam</em>, eos nulla fugiat.
 Saepe in, animi illum dicta <mark>dignissimos</mark> tenetur omnis quia ab repudiandae ipsum nihil, vel beatae quibusdam provident ullam!
</p>

결과)

---

<sub>, <sup> 태그

- sub는 H₂O를 표현할때 2에 해당하는 작은 숫자

- sup는 X² = 4를 표현할때 2에 해당하는 작은 숫자

예)

<p>H<sub>2</sub>O</p>
<p>X<sup>2</sup> = 4</p>

결과)

---

<ol>, <ul>, <li> 태그

- ol은 order list의 약자로, 숫자나 알파벳 등 순서가 있는 목록을 만들 때 사용한다.

- ul은 unorder list의 약자로, 순서가 필요없는 목록을 만들 때 사용한다. 

- li는 list item의 약자로, 각 항목들을 나열할 때 사용한다.

예)

<ol type = "i">
    <li>hello world</li>
    <li>hello world</li>
    <li>hello world</li>
</ol>
<ul>
    <li>hello world</li>
    <li>hello world</li>
  <li>hello world</li>
</ul>

결과)

ol같은 경우는 타입을 지정해서 타입별로 순서의 형태를 지정할 수 있다.

---

<dl>, <dt>, <dd> 태그

- dl은 definition list의 약자로, 사전처럼 용어를 설명하는 목록을 만든다.

- dt는 definition term의 약자로, 정의되는 용어의 제목을 넣을 때 사용한다.

- dd는 definition description의 약자로, 용어를 설명하는데 사용한다.

예)

<dl>
    <dt>제목</dt>
    <dd>설명</dd>
</dl>

결과)

dl로 리스트를 만들고 dt로 제목, dd로 설명내용을 작성한다.