목록만들기, ol, ul, dl, li, dl, dt, dd

이제 lists.html 파일을 작업합니다. ol 의 type 속성을 이용하여 5가지 타입의 ol을 만들어주시면 됩니다. 내용물은 꼭 li 태그 안에 넣으시고 HTML, CSS, JavaScript 이렇게 3가지 li 만들어주세요

목록 즉 여러가지 아이템을 집어넣고 싶을 때 사용하시면 되는 태그입니다. 먼저 ol 태그입니다. 이름의 뜻부터 Ordered List로 순서가 적용된 목록이라는 뜻입니다.

	<main>
      <section>
      	---	여기서 부터 작업하면 됨 ---
        <h1>ol - ordered list</h1>
        <ol>
          <li>HTML</li>
          <li>CSS</li>
          <li>JavaScript</li>
        </ol>
      </section>
    </main>

순서를 조금 다르게 표현하고 싶은데? 하시면 ol 태그 안의 type 속성을 사용하면 됩니다. type 속성이라는 것만 외우시면 됩니다. ol type="커서위치" 하신 뒤에 ctrl + space 누르면 어떤 것들이 있는지 메뉴를 보여주기 때문입니다.

		<ol>
          <li>HTML</li>
          <li>CSS</li>
          <li>JavaScript</li>
        </ol>

        <ol type="A">
          <li>HTML</li>
          <li>CSS</li>
          <li>JavaScript</li>
        </ol>

        <ol type="a">
          <li>HTML</li>
          <li>CSS</li>
          <li>JavaScript</li>
        </ol>

        <ol type="I">
          <li>HTML</li>
          <li>CSS</li>
          <li>JavaScript</li>
        </ol>

        <ol type="i">
          <li>HTML</li>
          <li>CSS</li>
          <li>JavaScript</li>
        </ol>

제일 상단의 ol태그에는 type 속성이 적용되지 않았음에도 불구하고 숫자가 나오는 것을 볼 수 있는데요. 아무런 type 을 지정해주지 않으면 기본적으로 type="1" (숫자라는 뜻)이 값으로 주어졌다는 것을 볼 수 있습니다.

ul의 뜻은 Un-Ordered List 로 순서가 없는 겁니다. 대신에 기본 값으로 bullet-point 가 앞에 붙습니다.

 		<ul>
          <li>HTML</li>
          <li>CSS</li>
          <li>JavaScript</li>
        </ul>

ul 태그 안에서 type 속성에 뭔가를 집어넣기 위해 뭐가 있는가 보고 싶어도 아무것도 없습니다. 스타일로 이런저런 모습을 만들 수 있기 때문에 ul을 가지고 많은 작업을 진행할 예정입니다.

마지막은 dl 입니다. description list 로 그냥 텍스트만 넣을 때 사용합니다. 위의 ol, ul 과의 차이점은 시작한 때 기본 값으로 주어지는 padding 이 없다는 점과, bullet-point 또는 순서가 없습니다. 하지만 가장 큰 차이점으로 들여쓰기 값이 있다는 점입니다.

		<dl>
          <dt>HTML</dt>
          <dd>HTML</dd>
          <dt>CSS</dt>
          <dd>CSS</dd>
          <dt>JavaScript</dt>
          <dd>JavaScript</dd>
        </dl>

이처럼 dl 안에는 dt와 dd 태그를 사용하여 차이점을 확인해보시면 되겠습니다.