*전부 body 부분에 작성

<ul></ul>

순서가 필요하지 않은 목록을 만들 때 사용하는 목록 태그다. 리스트 앞에 특정 모양이 출력 되고 모양은 CSS로 수정할 수 있다. <ul>태그가 부모 태그로 <li>라는 자식 태그를 갖는 구조로 자식 태그가 필수적이다.

<ul>
  <li>html</li>
  <li>css</li>
  <li>javascript</li>
  <li>jquery</li>
</ul>

<ol></ol>

순서가 있는 목록을 만들 때 사용하는 목록 태그. 마찬가지로 <li>태그를 자식 태그로 갖는다. 순서 문자는 type=”설정문자” start=”시작순서”을 지정해서 변경할 수 있다.

<h1>ol 태그 사용하기</h1>
<p>자식태그로 li를 갖는 태그</p>
<p>순서가 있는 태그로 기본적으로 숫자로 표시한다.</p>
    <ol>
        <li>html</li>
        <li>css</li>
        <li>javacript</li>
        <li>jquery</li>
    </ol>

실제 페이지의 메뉴처럼 활용

목록 태그는 구조화 되어있기 때문에 css를 적용해서 실제 페이지의 메뉴바를 만들 때 사용한다.

<ul id="menu">
     <li>HOME</li>
     <li>Board</li>
     <li>Gallary</li>
     <li>WareHouse</li>
</ul>
<style>
  #menu>li{
      display: inline;
      margin-right: 30px;
      font-size: 30px;
      font-weight: bolder;
      color: beige;
  }
  #menu{
     background-color: cornflowerblue;
  }
  #menu>li:hover{
      color: coral;
      background-color: wheat;
  }
</style>

<ol>태그 문자 타입 변경

<h2>ol 태그는 출력되는 숫자에 대한 설정을 할 수 있다.</h2>
<p>type, start 속성을 이용해서 설정한다.</p>
    <ol type="a">
        <li>html</li>
        <li>css</li>
        <li>javascript</li>
        <li>jquery</li>
    </ol>
    <ol type="A">
        <li>html</li>
        <li>css</li>
        <li>javascript</li>
        <li>jquery</li>
    </ol>
    <ol type="i">
        <li>html</li>
        <li>css</li>
        <li>javascript</li>
        <li>jquery</li>
    </ol>
    <ol type="I" start="5" reversed>
        <li>html</li>
        <li>css</li>
        <li>javascript</li>
        <li>jquery</li>
    </ol>

<dl></dl>

용어나 문장에 대한 정의 리스트를 만들 때 사용하는 목록 태그로 자동으로 들여쓰기가 된다. <dl>태그가 부모 태그고 <dt>태그(정의 제목), <dd>태그(정의 내용)을 자식 태그로 갖는다.

<h3>정의 리스트 사용하기</h3>
    <p>
        dl 태그를 이용하고 자식 태그로 dt태그와 dd태그를 갖는다.<br>
        dt : 제목을 설정<br>
        dd : 제목에 대한 설명을 설정
    </p>
    <dl>
        <dt><b>Apple</b></dt>
        <dd>[명] 사과</dd>
        <dd>[대명사] 컴퓨터 회사</dd>
    </dl>