HTML 내에서 어떤 태그가 요소들을 그룹핑하는데 쓰이는지 알아보려고 합니다!!

🗂️ ol, ul, li 태그

주로 여러가지 목록을 나열할 때 사용합니다.

<ol> 태그

ordered list의 약자로 순서가 있는 목록을 뜻합니다.

<ul> 태그

unordered list의 약자로 순서가 없는 목록을 뜻합니다.

<li> 태그

list item의 약자로 각 항목들을 나열하는 태그입니다.

<h1>분야별 공부 분야 추천</h1>
<h2>Front-End</h2>
	<ol>
    	<li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ol>
<h2>Back-End</h2>
	<ul>
    	<li>Python</li>
        <li>Django</li>
    </ul>

• 그림에서 확인할 수 있듯이, li 요소는 <ol> 혹은 <ul> 요소 안에서만 사용해야 하며, <ol> 과<ul>의 직계 자식 요소르는 <li>만 사용 되어야 합니다.

📕 dl, dt, dd 태그

<dl>, <dt>, <dd>는 사전처럼 어떠한 것을 정의할 때 쓰이는 목록입니다.

<dl> 태그

definition list의 약자로 정의 목록을 뜻합니다.

<dt> 태그

definition term의 약자로 정의할 용어을 뜻합니다.

<dd> 태그

definition description의 약자로 용어를 설명할 때 쓰입니다.

<dl>
    <dt>HTML</dt>
    <dd>마크업 언어입니다.</dd>
</dl>

📦 div 태그

레이아웃을 나눌 때 사용하는 태그 입니다. 컨텐츠의 형태를 변형시키지는 않지만 하위에 있는 여러 요소를 묶어 스타일을 변경시킬 수 있습니다.

<div>hello</div>

🖼️ figure, figcaption 태그

이미지와 캡션이 연결되도록 하는 태그 입니다.

<figure>
        <img src="img/seohee.png" alt="전서희 프로필" width="200px">
        <figcaption>
            전서희 프로필
        </figcaption>
 </figure>

🔤 P 태그

단락을 표시하는 태그 입니다. 하나의 완결된 문단을 의미하기 때문에 <p>태그 안에 자식으로 <p>를 또 사용하지 않으며, 줄바꿈의 용도로 사용해서도 안됩니다.

<h1>hello world</h1>
<p>hello world</p>

⌨️ pre 태그

HTML에 작성한 내용 그대로 화면에 표현합니다. 주로 컴퓨터 코드를 표현할 때 사용합니다. 띄어쓰기나 줄바꿈 등 입력한 것을 표현해줍니다.

<pre>
  <code>
    let val= 1;
    function myFunc(value){
      return value;
    }
    myFunc(val);
  </code>
</pre>

💬 blockquote 태그

• 인용 블록입니다.
• <q>는 인용구 입니다. 주로 문장안에서 사용됩니다.
• <cite>는 출처를 의미하고, 기울어진 글씨체로 작성됩니다.
  
  

<blockquote>
        <p>인생은 자전거를 타는 것과 같다. 균형을 잡으려면 움직여야 한다.</p>
        <cite>알버트 아인슈타인</cite>
</blockquote>

<p><q>인생은 자전거를 타는 것과 같다. 균형을 잡으려면 움직여야 한다.</q>라고 아이슈타인이 외쳤습니다.<p>

🎯 main 태그

• 주요 콘텐츠를 나타냅니다.
• 문서의 핵심 주제나 기능에 직접적으로 연결되어 있는 부분을 의미합니다.
• 문서의 유일한 내용이어야 합니다.
• 반복적으로 표시될 수 있는 정보, 로고, 검색 폼, 저작권 정보 등은 들어가지 않습니다.
• IE에서는 지원하지 않는 비교적 최근에 등장한 요소입니다.
  
  

🏁 hr 태그

• 가로줄을 표현하기 위해 사용했으나 HTML5에 오면서 의미가 생긴 요소입니다.
• 이야기의 장면 전환 혹은 문단 안에서 주제가 변경되었을 때 그 구별을 위해 사용합니다.
• 단락을 구분할 때 사용하므로

  태그 내 사용은 웹 표준에 어긋납니다.

• 요즘에는 hr 보다는 border-bottom 을 더 많이 쓴다.
  
  

  <h1>hello world</h1>
  <hr>
  <p>hello <br> world</p>
  <hr width="300px" align="center" size="3" color="red" noshade>