HTML- 순서형 비순서형 요소

우리가 글을 쓸 때 어떤 순서에 따라 내용을 나열해야 할 때 1. 2. 3. 이런 식의 방식을 사용한다.

HTML은 <ol> ordered list라는 태그를 사용하며 순서형 요소라고 부른다.

 

그 외에도 - * • 이런 다양한 기호들을 사용해서 중요한 내용을 나열하기도 한다.

HTML은 <ul> unordered list이라는 태그를 사용하며 비순서형 요소라고 부른다. 

 

두 태그 모두 어떤 내용을 나열하기 위해 사용하며 내부 요소로 <li>라는 태그를 갖는다. 

list item이라는 의미를 갖는 자식 요소 <li>는 부모 요소에 따라 다르게 나타난다. 

순서형
 <ol>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ol>
    
비순서형
<ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>

 

순서형 요소는 자식요소를 계층적으로 보여준다.
비순서형 요소는 불릿마크를 통해 자식요소를 순차적으로 보여준다.

<ol>의 주요 속성에는 type, start, reversed가 있다.

각 속성의 역할은 아래 정리되어 있다.

속성	값	설명
type	1 (기본값)	숫자 순서로 나열됨(1, 2, 3, 4...)
	A	대문자 알파벳 순서로 나열(A, B, C, D...)
	a	소문자 알파벳 순서로 나열(a, b, c, d...)
	I	로마 숫자 대문자 순서로 나열(I, II, III, IIII...)
	i	로마 숫자 소문자로 순서로 나열(i, ii, iii, iiii...)
start	number	목록 시작 번호 설정 (<ol start="5"> → 5, 6, 7...)
reversed	null	목록을 역순으로 표시 (4, 3, 2, 1...)

<ol> 안에는 <ol>이나 <ul>을 중첩해서 사용할 수도 있다.

<ol>
    <li>과일
        <ol type="a">
            <li>사과</li>
            <li>바나나</li>
        </ol>
    </li>
    <li>채소
        <ul>
            <li>당근</li>
            <li>오이</li>
        </ul>
    </li>
</ol>

 

<ul>의 속성에서는 type으로 불릿 마크의 형태를 변경해 줄 수 있다.

속성	값	설명
type	disc (기본값)	기본 원형 불릿
	circle	테두리 원형 불릿
	square	사각형 불릿
	none	불릿 없음

새롭게 안 사실은 <ul>의 type 속성은 HTML5에서는 사용하지 않을 것을 권장한다.

 

웹 표준 원칙에 따르면 HTML은 문서의 구조를 담당하고 CSS는 디자인 요소를 담당하기 때문에 분리되어야 한다.

단순한 불릿마크로 구분을 하는 <ul>의 경우 단순한 스타일 변경의 성격이 강하기 때문에 CSS로 자유롭게 디자인하거나  CSS의 list-style-type 속성으로 컨트롤하는 것이 좋다.

반면 ol은 숫자로 계층적으로 나타나기 때문에 시멘틱한 의미가 담겨있어 type 속성 사용이 가능하다. 

<menu>라는 요소도 있다. 

 

MDN에 따르면 <menu>는 <ul>을 대체하는 시멘틱한 의미의 태그로 보일 수 있으나 브라우저상에서는 큰 차이가 없다고 한다.
<menu> 역시 자식요소로 <li> 태그를 갖는다.

차이점을 따져보면 <ul>의 경우 순서가 중요하지 않은 목록을 만들 때 유용하다. 주로 사이트맵을 이동하는 내비게이션을 만들 때 사용한다.

<menu>의 경우 상호작용을 위한 항목들을 포함하도록 의도되었다고 한다. 예시에서도 <button> 요소로 이루어진 툴바 같은 것을 만들 때 주로 사용한다고 한다. 블로그에서 글을 쓸 때 편집하기 위해 모여있는 툴바를 생각하면 될 것 같다.