본문 바로가기

IT & TECH/HTML

4. HTML 리스트 관련 태그

오늘은 리스트 관련 태그에 대해 알아보는 시간을 갖겠습니다. 리스트란 무엇인가? 리스트 하면 저는 오늘 할 일 List와 같은 것들이 생각납니다. 리스트는 말 그대로 여러 개의 것을 나열한 형태라고 생각하시면 됩니다. 그렇다면 HTML에서 말하는 리스트는 어떤 형태이며 어떻게 만들 수 있을까요? 함께 알아보도록 해보겠습니다. 예시부터 먼저 확인하겠습니다.



<예시1>

짜장면 만들기 순서

  1. 짜장 소스를 만든다
  2. 면을 삶는다
  3. 삶은 면을 꺼내어 짜장 소스를 넣어 비빈다.
  4. 맛있게 먹는다.


<예시2>

오늘 할 일

  • 방 청소하기
  • 빨래하기
  • html 공부하기
  • 게임하기

보시다시피, 순서가 있는 리스트와 순서가 없는 그냥 무작위 정렬을 해놓은 리스트가 있습니다. HTML에서 말하는 리스트는 크게 이 두가지 종류를 말합니다. 이것은 각각 ordered list, unordered list라고 불리우며, 이것들의 줄임말인 <ol>, <ul>이 태그로 사용됩니다.



참고



이전 강좌와 마찬가지로 아래 내용을 먼저 습득한 후에, 연습2.txt 파일을 다운받아서 코드를 복사한 후에, 아래 링크에 들어가서 복사 붙여넣기를 하시면 됩니다. 

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic


복사 붙여넣기를 하신 후에, 결과 값을 보게될 것입니다. 그리고 코드를 다 지우고 똑같은 결과값을 출력하는 코드를 스스로 한 번 짜보시길 바라겠습니다. 타입 후 See Result 버튼을 누르면 출력값을 볼 수 있습니다. 


연습2.txt





1. 순서가 있는 리스트


<ol> ... 내용 ... </ol>  


ol은 영어로 ordered list의 줄임말입니다. "순서가 있는 리스트" 라는 말입니다. 이 태그를 사용해서 순서가 있는 리스트를 만들 수 있습니다.

아래 예시는 수능 시간표를 순서 있는 리스트로 표현한 코드입니다. 수능 시간표는 순서가 있습니다. 언어영역부터 탐구영역까지 1교시, 2교시, 3교시 그리고 4교시 순서가 있는 시험입니다. 이런 경우에 우리는 ordered list를 사용하여 표현하는 것이 관례입니다. 하지만 <ul> 태그만으로 내용을 완성 시킬 수 없습니다. 왜냐하면 말 그대로 <ul>태그는 출력물에 나타난 숫자를(예시에서는 1,2,3,4) 의미하는 것이 지나지 않습니다. <ol> 태그 안에 있는 내용은 전부다 ordered list로 출력을 하라는 말이지, 어떤 것을(아래 예시에선 언어 영역, 수리 영역 등) list로 나타내란 말을 하진 않았기 때문입니다. 그렇다면 옆에 언어 영역, 수리 영역 같은 것은 어떻게 출력할까요? 그것은 <li> 태그의 사용과 관련이 있습니다. 


<li> .. 내용 .. </li> 


이 태그의 설명은 생각보다 간단합니다. <li>는 list item을 의미합니다. 리스트에 있는 아이템이라는 것이죠. 그 아이템은 아래 예시처럼 4개 일수도 아니면 수백 가지 일수도 있습니다. 만약 아래처럼 <ol>.. </ol>태그 안에 어떠한 리스트를 넣고 싶다면 단순하게 <li>태그를 추가해서 생성하시면 됩니다. 그러면 <ol> 태그 안에 있는 모든 <li>태그 들이 순서대로 표시가 됩니다.





<예시>






<출력물>


수능 시간표

  1. 언어 영역
  2. 수리 영역
  3. 외국어 영역
  4. 탐구 영역





2. 순서가 없는 리스트


<ul>...내용... </ul>


ul은 영어로 unordered list의 줄임말입니다. "순서가 없는 리스트" 라는 뜻이죠. 이 태그를 우리는 순서 없는 리스트를 출력할 수 있습니다. 아래 예시에서 보듯이 미술 준비물은 순서가 없습니다. 이런 경우에 우리는 unordered list 태그를 사용하여 html 코드를 만듭니다. 이 경우에도 마찬가지로 <li>태그를 이용해 리스트를 만들어 내야 합니다.


<li>...내용... </li>


위 1번의 <li> 내용과 동일하여 생략하겠습니다. <li>태그를 4번 사용하여 4개의 리스트를 순서 없이 정렬하였습니다. 만약 리스트를 추가하고 싶다면 단순히 <li> 태그를 이용해 추가하시면 됩니다. 



<예시>




<출력물>


미술 준비물

  • 크레용
  • 팔레트
  • 도화지




3. 연습문제


오늘의 연습문제입니다. 바로 맨 위에 예시가 오늘의 문제입니다. 코딩을 하여 아래와 같이 출력이 되게 만들어 보세요! 

마찬가지로 정답은 연습 2.txt 파일에 있습니다. 혼자 힘으로 작성을 해보시고 정답을 확인해 주세요.