<aside> <img src="/icons/cursor-click_yellow.svg" alt="/icons/cursor-click_yellow.svg" width="40px" /> 빠른 이동을 원하시면, 아래 키워드를 클릭하세요!
</aside>
HTML은 약속된 태그들의 조합 으로 만들어진 문서입니다.
div, span, input, button 등, 우리가 이미 아는 태그가 몇가지 존재하죠.
그리고 HTML에는 리스트, 목록을 표현하기 위한 태그도 존재합니다.
ul 태그는 Unordered List의 약자입니다.
이름처럼 순서가 정해지지 않은 목록을 표현 할 때 사용하게 되죠.
ul 태그로 표현하게 되는 목록은 순서가 정해지지 않았기 때문에 bullet, 검은 점으로 항목들을 표현 합니다.
<ul>
데이터
</ul>
그리고 이때, ul 태그만을 작성하고 내부에 바로 내용을 입력하면 제대로된 목록이 출력되지 않는 것을 확인할 수 있습니다. HTML에서 목록을 표현할 때는 li 라고 하는 태그 내부에 존재하는 내용이 그 본질이 됩니다.
즉, 어떠한 목록의 각 항목을 표시할 때는 li 태그를 입력해 주어야 하는 것이죠.
li 태그는 ul 태그 내부에 만들어주시면 됩니다.
<ul>
<li>항목</li>
<li>항목</li>
<li>항목</li>
</ul>
이렇게 작성해주면 순서가 표현되지 않은 세개의 목록이 출력되죠.
ol 태그는 Ordered List의 약자입니다.
ul 태그와 다르게 순서가 정해진 목록을 표현 할 때 사용하게 됩니다.
순서가 정해진 목록을 표현하기 때문에 bullet이 아닌 숫자에 항목들을 할당해서 나열 합니다.
ol 태그 역시 그 자체만을 활용해서는 제대로된 목록을 표현하지 못합니다.
이 역시도 li 태그와 조합 이 되어야 하죠.
<ol>
<li>1번 항목</li>
<li>2번 항목</li>
<li>3번 항목</li>
</ol>
이렇게 ol 태그로 감싼 li 태그들이 존재한다면, 이때 li 태그가 입력된 순서에 따라서 화면에 표현되는 순서도 정해지게 됩니다.
ol 태그는 내부의 li 태그들의 순서를 숫자로 표현하는 것을 default 값으로 지정하고 있습니다.
default는 숫자이지만, 우리가 원한다면 type 속성을 조작해 알파벳, 로마 숫자 등으로 표현할 수도 있습니다.