텍스트 관련 요소들 - 리스트 요소

본 포스트는 HTML 스터디에 사용할 자료 목적으로 작성하였습니다.

리스트의 기본 요소들

요소이름	설명
ol	순서가 있는 리스트
ul	순서가 없는 리스트
li	리스트 아이템

리스트의 기본 구성

<ol> 과 <ul> 을 사용해 리스트를 나타내주고,
그 리스트의 요소로써 <li> 요소를 하위에 자식으로써 포함시킵니다.

<ol>
  <li>첫번째 아이템</li>
  <li>두번째 아이템</li>
</ol>

Ordered List

순서가 있는 리스트를 나타낼 때 사용합니다.
아이템들의 순서가 바뀌면 이상해지는 리스트들.. 즉, 순서가 중요한 리스트를 나타낼 때 사용합니다.

<h1>대한민국 헌법</h1>
<ol>
  <li>
    제1조
    <ol>
      <li>대한민국은 민주공화국이다</li>
      <li>대한민국의 주권은 국민에게 있고, 모든 권력은 국민으로부터 나온다.</li>
    </ol>
  </li>
</ol>

대한민국 헌법

1. 제1조
   1-1. 대한민국은 민주공화국이다.
   1-2. 대한민국의 주권은 국민에게 있고, 모든 권력은 국민으로부터 나온다.

Unordered List

순서가 없는 리스트를 나타낼 때 사용합니다.

딱히 아이템들의 순서가 바뀌어도 상관없는 리스트를 나타낼 때 사용합니다.

<h1>시장에서 사올 것들</h1>
<ul>
  <li>감자 2개</li>
  <li>돼지고기 앞다리살 반근</li>
  <li>두부 한 모</li>
</ul>

시장에서 사올 것들

• 감자 2개
• 돼지고기 앞다리살 반근
• 두부 한 모

속성들

<ol> 의 속성들

• type : 세는 방법
  • a - 소문자 알파벳 순
  • A - 대문자 알파벳 순
  • i - 소문자 로마숫자
  • I - 대문자 로마숫자
  • 1 - 아라비안 숫자 (기본값)
• start : 카운팅을 시작할 숫자.
• reversed : 목록이 역순으로 배열된 것인지를 나타냅니다.

<ol type="I" start="5" reversed>
  <li>5부터 시작합니다</li>
  <li>6이 되어야 하지만 4가 됩니다</li>
  <li>아이템 앞의 숫자가 대문자 로마숫자로 표현됩니다.</li>
</ol>

<ul> 은 기본적으로 순서가 없는 리스트이므로 위의 속성들을 사용하지 않습니다.

<li> 의 속성

• value : 특정 아이템의 순서값을 명기할 수 있습니다.

<ol>
  <li value="99">...</li>
</ol>

주의사항

• reversed 속성을 사용하더라도 각 아이템 앞의 숫자 표기만 변경될 뿐, 실제 목록의 내용이 뒤집히진 않습니다.
• <li> 에 value 속성이 설정된 경우 그 다음 아이템은 해당 value 값부터 다시 카운팅됩니다.

<ol reversed>
  <li>첫번째</li>
  <li value="60">갑자기 60번째</li>
  <li>59번째</li>
  <li>57번째</li>
</ol>