HTML의 li태그, ul태그, ol태그

li, ul, ol 태그란?

웹페이지에 목록을 만들어주는 태그인 li, ul, ol 태그를 정리해놓으려 합니다. HTML의 태그 중 하나인 li태그, ul태그, ol태그는 목록을 만들어주는 태그입니다. 가령 현재 제 블로그의 카테고리를 예로들면,

 

1. 절세계좌 활용법

2. 현명한 투자자로 성장하기

3. 투자의 대가

4. 배당 일정표

 

이와 같이 목록을 나열해주는 태그가 이 li, ul, ol 태그입니다. li태그는 list(목록)의 약자이고, ul태그는 unordered list(순서가 정해지지 않은 목록)의 약자, ol태그는 ordered list(순서가 정해진 목록)의 약자입니다.

 

li태그

list태그로 예로든 카테고리를 작성해보면 다음과 같습니다. 메모장에 아래와 같이 입력해 봅니다.

<li>절세계좌 활용법</li>
<li>현명한 투자자로 성장하기</li>
<li>투자의 대가</li>
<li>배당 일정표</li>

메모장에 이렇게 작성한 후 가령, "카테고리.html"로 저장 후 실행해보면, 다음과 같이 브라우저에 표출됩니다. li태그로 작성하면 이렇게 쩜으로 표시된 목록들이 표출되는 것을 확인할 수 있습니다.

ol태그

이제 여기에 1~4까지의 순서를 부여해보고 싶습니다. 만약 리스트가 100개가 넘는데 하나하나 숫자를 매기는 건 쉽지 않겠지요? 이 때 ol태그가 이 li태그들을 다음과 같이 감싸줍니다. 이처럼 감싸준 ol태그를 '어미태그', 감싸진 li태그를 '자식태그'라고 부릅니다. 어미, 자식이란 표현이 참 재밌네요.

<ol>
  <li>절세계좌 활용법</li>
  <li>현명한 투자자로 성장하기</li>
  <li>투자의 대가</li>
  <li>배당 일정표</li>
</ol>

아까 작성한 카테고리.html 에서 ol태그만 추가하여 저장 후 실행해보면, 다음과 같이 순서가 지정되어 표출되는 것을 확인할 수 있습니다.

ul태그

ul태그는 이러한 li태그의 집합들끼리 구분해주는 역할을 합니다. 가령 아래와 같이 두 개의 주제를 구분해서 리스트를 만들고 싶은 경우 ul태그로 묶어주면 좋습니다.

 

- 절세계좌 활용법

- 현명한 투자자로 성장하기

- 투자의 대가

- 배당 일정표

 

- 기록, 끄적임

- 디지털노마드로 거듭나기

<ul>
  <li>절세계좌 활용법</li>
  <li>현명한 투자자로 성장하기</li>
  <li>투자의 대가</li>
  <li>배당 일정표</li>
</ul>
<ul>
  <li>기록, 끄적임</li>
  <li>디지털노마드로 거듭나기</li>
</ul>

이렇게 메모장에 작성후 브라우저로 열어보면 다음과 같이 주제별로 구분되어 표출되는 것을 확인할 수 있습니다.

 

네이버에서 li태그, ul태그, ol태그 살펴보기

가장 많이 들어가는 네이버 사이트를 예로 들어 보겠습니다. 크롬(Chrome) 브라우저를 사용할 경우 F12버튼을 누르면 아래와 같이 오른쪽에 웹페이지가 어떻게 짜여져 있는지 파악할 수 있습니다. 네이버를 켜놓고 F12를 누르니 아래와 같은 화면이 나옵니다.

이렇게 멋지게 짜여지고 디자인 된 네이버 사이트도 HTML과 CSS, 자바스크립트 등의 웹언어로 만들어졌을텐데요, 이중에서 아래의 빨간색 부분, 즉 CSS효과를 모아둔 "stylesheet" 부분을 Delete키를 눌러 지워버리면, 

다음과 같이 CSS효과는 없어지고, HTML로만 짜여진 네이버 화면이 나옵니다. 

빨간색부분을 보시면 쩜으로 된 목록들이 쫙 나오는 것을 확인할 수 있습니다. "메일, 카페, 블로그, 지식iN, 쇼핑, Pay, TV"의 그룹과 "사전, 뉴스, 증권, 부동산, 지도, 영화, VIBE, 책, 웹툰"의 그룹으로 나뉘어 있습니다. 오른쪽에 HTML소스를 확인해보면 그룹을 묶을 때 역시 li태그를 사용하였고, 그룹간을 구분해주기 위해 ul태그를 사용한 것을 확인할 수 있습니다.

네이버처럼 복잡할 것 같은 웹사이트도 일단 li, ul, ol태그로 짜여있는 것을 확인했습니다. 도대체 이렇게 간단한 태그들로 어떻게 저렇게 멋진 사이트가 만들어질 수 있을까요? 얼른 HTML을 마스터하고 CSS로 넘어가고 싶습니다. li tag, ul tag, ol tag 에 대해 배운 내용 정리를 마칩니다.