그룹화가 가능한 태그들 🪢

<p>
: Paragraph의 약어, 평범하게 문단을 작성하는데 사용하는 태그이다.

<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. At consequuntur cumque dignissimos voluptatem explicabo, debitis itaque dolorem est reiciendis voluptatibus ex. Amet quos quis rem aliquid quo, dolorem ratione ad.</p>

<ul>
: unorder list의 약어, 순서가 상관없는 리스트를 생성하는데 사용한다. 네비게이션을 만드는데 자주 사용되는 태그이다.

	<ul>
      <li>one</li>
      <li>two</li>
      <li>three</li>
    </ul>

<ol>
: order list의 약어, 순서가 중요한 리스트를 생성하는데 사용한다. attribute "type"을 적용하여 앞의 기호 형식을 바꿀 수 있다.

** type= "a, A, i, I" 로 숫자 기호 바꾸는게 가능하다. 아라비아숫자/영어 소문자/영어 대문자등으로 바꿀 수 있다.

	<ol type="I">
      <li>one</li>
      <li>two</li>
      <li>three</li>
    </ol>

<dl>, <dt>, <dd>
: 목록을 정의할때 사용하는 태그, 사전처럼 어떠한 것을 정의할 때 사용한다.

<dl> : Definition list, 정의 목록
<dt> : Definition term, 정의할 용어
<dd> : Definition description, 설명

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

<div>
: <div>는 레이아웃을 나눌 때 사용하는 태그이다. 주로 공통된 스타일을 묶어서 적용하는데 사용한다.
같은 역할을 하는 <header>, <section>, <article>, <nav>는 <div>로 대용할 수 있지만 적합한 요소를 찾은 후 적합한 태그가 없을 때 최후의 수단으로 사용하길 권장한다.
독립된 컨텐츠라면 div 대신 article을 사용, div를 대신해 섹션/헤더/네비/아티클을 쓸 수있으나

	<div>
      <h2>Hello world</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi laudantium quaerat, voluptatem sint, ducimus vero totam molestiae ipsa assumenda minima consequatur dolor aliquam molestias aut, nam quos culpa alias earum?</p>
    </div>
    <div>
      <h2>Hello world</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi laudantium quaerat, voluptatem sint, ducimus vero totam molestiae ipsa assumenda minima consequatur dolor aliquam molestias aut, nam quos culpa alias earum?</p>
    </div>

<figure>
: 이미지에 대한 캡션이 필요하다면 <figure>를 사용하여 자식태그로 안에 <img>와 <figcaption>을 사용하여 캡션을 삽입 가능하다.

	<figure>
      <img width="100px" height="100px"src="https://cdn.pixabay.com/photo/2020/10/29/19/56/lighthouse-5697134_960_720.jpg" alt="바다에 있는 작은 등대">
      <figcaption>
        바다에 있는 작은 등대
      </figcaption>
    </figure>

<pre>
: 행/열의 간격을 설정한대로 유지하고 싶을 때 사용하는 태그, 아래의 코드에서 <p>태그와 비교해보면 <p>태그는 행/열의 간격을 무시하고 한줄로 출력하지만 <pre>를 이용한 태그는 그대로 출력하고 있다.

	<p>
      function 제곱(x){
        return x**2;
      }
    </p>

    <pre>
      <code>
        function 제곱(x){
          return x**2;
        }
      </code>
    </pre>

<blockquote>
: 전체블록을 인용구형태로 사용하게 해주는 태그이다.
<cite>
: 저작물의 출처를 표기할 때 사용하는 태그이다.

	<blockquote>
      <p>제발 그만해.. 이러다가 다~~ 죽어!</p>
      <cite>오징어게임 오일남</cite>
    </blockquote>

<main>
: 문서의 주요 콘텐츠를 나타내는 태그이다. 문서의 핵심 주제나 웹어플리케이션의 핵심 기능에 직접적으로 연결되어 있는 부분인 주요 콘텐츠 영역에 사용되어야하며, 메인 요소안에 들어가는 내용은 문서의 유일한 내용이어야 한다.
하지만 비교적 최근에 나온 <main>는 IE가 지원하지않아서 사용하는데 주의가 필요하다.

    <main>
      <section></section>
      <section></section>
    </main>

<hr>
: 구분선을 넣는 태그이다. 웹브라우저마다 다르게 출력되는 경우가 있어 사용에 주의가 필요하다.

	<hr>
    <p>class</p>
    <hr>