5. HTML 이론 ( 목록, List, ul, ol, li)

 

목록을 표현하는

listtag는 대표적으로

두 가지가 많이 쓰인다.

 

첫 번째는 ol tag

두 번째는 ul tag

 

ordered list ( ol )는 는

순서가 중요할 때 사용된다.

 

순서가 중요할 때란

가령 요리 순서가 될 수도 있고

운동방법, 설명서, 실시간 검색어, 랭킹 등

이것들은 순서가 중요하기 때문에

ordered list를 사용해야 한다.

 

순서가 중요하지 않을 때는

unordered list ( ul )을 사용한다.

 

ul과 ol만 있다고 list가 만들어지지 않는다.

 

ul과 ol 내부에는

list item ( li ) tag를 사용해야 한다.

 

여기서 반드시 지켜야 하는 문법이 있다.

 

ul과 ol 태그 내부의 직계 자식은

반드시 li 태그만 사용 가능하다.

 

	<ul>
		<a><li></li></a>
		<div><li></li></div>
	</ul>
//불가능
    <ul>
		<li><a></a></li>
		<li><div></div></li>
		<li></li>
	</ul>
//가능

 

 

ol tag는 기본적으로 1부터 시작되지만

attr으로 start="시작할 숫자"를 작성하면

해당 숫자부터 나열된다.

 

<ol start="50"> 
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
// 또 다른 방법으로는 li tag attr으로 value="시작할 숫자"를 작성해도 된다.
<ol>
	<li value="100">Coffee</li>
	<li value="110">Tea</li>
	<li>Milk</li>
	<li>Water</li>
	<li>Juice</li>
	<li>Beer</li>
</ol>

 

숫자를 거꾸로 나열하고 싶을 때는

attr으로 reversed를 사용한다.

 

<ol reversed>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

 

ol과 ul을 조합해서 사용해도 무관하다.

<ol>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ol>

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

 

실전 예제 1)

	<h1>도구</h1>	
    <ul>
	    <li>여기를 가르키는 문서</li>
		<li>가리키는 글의 최근 바뀜</li>
		<li>파일 올리기</li>
		<li>특수 문서 목록</li>
		<li>고유 링크</li>
		<li>문서 정보</li>
		<li>이 문서 인용하기</li>
		<li>위키데이터 항목</li>
	</ul>
//앞에 점이 와도 html 은 맞는 설명이다. 점을 없애는 방법은 스타일 영역이기 때문에 나중에 배워보자

 

실전 예제 2)

<h1>HTML 2.0이 IETF의 RFC 1866로 발표되었다. 추보의 RFC의 추가된 기능:</h1>
    <ol>
		<li>1995년 11월 25일: RFC 1867 (양식 기반 파일 업로드)</li>
		<li>1996년 5월: RFC 1942 (테이블)</li>
		<li>1996년 8월: RFC 1980 (클라이언트 측 이미지맵)</li>
		<li>1997년 1월: RFC 2070 (국제화)</li>
	</ol>
//사진에는 점으로 표시되어있지만 사실상 날짜 기준으로 순서가 필요하기 때문에 ol을 사용하는것이 맞다.
//1,2,3,4 를 점으로 바꿔주는것도 스타일 영역이기 때문에 나중에 배워보자

 

 

참조

ol

https://www.w3schools.com/tags/tag_ol.asp

 

ul

https://www.w3schools.com/tags/tag_ul.asp