본문으로 바로 이동 페이지 설정으로 이동 메뉴로 이동
페이지 설정
  • 어떠한 의견도 좋습니다. 웨버스터디가 더 나은 모습이 되도록 의견을 보내주세요.

목록 요소

최초 작성일
최종 수정일
이번 시간에는...
HTML 문서에서 목록을 나타내는 요소인 ul 태그, ol 태그, li 태그에 대해 살펴보고, 정의 목록인 dl, dt, dd 태그에 대해 알아 봅니다.

이번에 살펴볼 요소는 목록 들을 표현하는 요소들입니다.

ol (Ordered List) 요소

ol 요소는 Ordered List의 줄임 말로, 순서가 있는 목록입니다. ol 요소 안에 li(list 의 줄임) 요소로 목록 항목을 표현합니다.

이 ol 요소로 순위나, 레시피 등 순서가 있는 부분을 나타낼 수 있습니다.

아래와 같이 작성하며, 그 아래와 같이 보여집니다.

  1. 항목
  2. 항목

보통 브라우저의 기본 표현이 숫자이며, css로 로마자 같은 다른 형식으로도 표현 가능합니다.

ol과 li 요소는 모드 블럭 요소입니다. 하지만, ol 요소 안에는 오직 li 요소만 올 수 있습니다. 다른 요소를 바로 넣으면 안됩니다. li 안에 넣는 것은 상관없습니다. li 요소 안에는 심지어 ol 요소가 중첩되어 들어갈 수 도 있습니다.

ol 요소의 순서는 보통 1부터 시작하나, ol의 속성값을 줘서 바꿀 수 있습니다. 다음과 같이 start 속성을 주면 해당하는 숫자부터 시작이 됩니다.

또한, reversed 속성을 주면 역순으로 시작됩니다.

여기서 reversed 속성의 속성값은 같은 'reversed'이며, 다른 값이 들어갈 순 없습니다. 이는 독타입(doctype)에 따라 속성값을 생략하고 속성만 선언할 수도 있습니다. 이러한 속성을 '불리언 속성'이라 부르며, 속성을 선언하는 것 자체만으로 동작합니다.

ul (Unordered List) 요소

ul 요소는 Unordered List의 줄임 말로, 말 그대로 Un-order 된, 순서가 없는 목록 요소입니다.

ol과 거의 동일하여, ul 역시 블럭요소이지만 자식으로 li 요소만 포함할 수 있습니다. 당연하지만, ol에서 썼던 start나 reversed 같은 속성은 사용할 수 없습니다. 보통 메인 메뉴 같은 요소들도 ul 요소로 마크 업을 하기 때문에, 자주 사용하게 되는 요소 중 하나 입니다.

다음의 ul 요소의 예입니다.

  • 항목
  • 항목
  • 항목

dl 요소

dl 요소는 Description List의 줄임 말로, 앞서 살펴본 ol, ul과는 조금 다른 형태의 목록입니다. dl 요소는 개념과, 정의로 이루어진 목록입니다. 개념은 dt요소로 정의는 dd요소로 작성하며, 다음과 같이 작성 합니다.

dl 요소는 ol과 ul이 li 요소만 자식으로 놓듯이, dt와 dd 요소만을 자식으로 둘 수 있습니다. 그리고 주의할 점은 dt는 인라인 요소이며, dd는 블럭 요소입니다. 때문에 dt 안에 블럭 요소를 넣으시면 안됩니다.

앞서 dt와 dd를 사전적 개념과 정의로 보여 드렸지만, 다른 방식으로도 활용할 수 있습니다.

상품 광고에 활용한 예

미려한 디자인
국내 최고의 수석디자이너가 디자인한 상품, 인테리어에도 좋습니다.
합리적인 가격
다른 경쟁 상품보다 질은 높이면서 더 낮은 합리적인 가격을 제공합니다.

또한, 이 dt와 dd는 1:1 형태가 아닌, 1:다, 다:1, 다:다의 형태를 취할 수 있습니다.

이름
Name
홍길동
취미
Hobby
축구
Football

위와 같은 방식으로 작성될 수 있으며, dd는 앞선 dt에 대한 정의 값입니다.

목록의 중복 사용

방금 살펴본 목록 요소들은 서로 중첩되어 사용할 수 있습니다. 다음은 목록 요소들을 사용해서 라면 레시피를 마크 업 했습니다.

라면 레시피
준비물
  • 물 550cc
  • 라면봉지
조리법
  1. 물을 끓인다.
  2. 물이 끓으면, 면과 스프를 넣는다.
  3. 다 익으면 불을 끄고 맛있게 먹는다.
요점 정리
  • ol 요소는 순서가 있는 목록.
  • ul 요소는 순서가 없는 목록.
  • ol, ul 요소는 자식으로 li 요소만 올 수 있음.
  • li 요소는 블럭 요소로 자신을 포함한 대부분의 블럭 요소를 가질 수 있음
  • dl 요소는 개념-정의를 나타내는 목록.
  • dl 요소는 자식으로 dt, dd 요소만 올 수 있음.
  • dt 요소는 개념을 나타내며 인라인 요소.
  • dd 요소는 정의를 나타내며 블럭 요소.
  • dt와 dd는 1:1 뿐 아니라 다:다의 형식도 가질 수 있음.

이 글이 유용하셨다면 친구들에게 공유 해주세요.