HTML 쉽게 배우기 | 목록 (ul, li, ol, dl, dt, dd)

안녕하세요. 

오랜만이네요.

 

오늘은 HTML에서 목록을 만드는 방법을 알아볼 거예요.

 

목록하면 앞에 점으로 돼있는 목록, 그리고 숫자로 돼있는 목록이 있죠.

 

당연히 HTML에서도 이런 목록들을 아주 쉽게 만들 수 있습니다.

 

 

 

먼저 점으로 돼있는 목록을 볼게요.

점으로 되있는 목록을 만들 때 사용하는 태그들은 <ul> 과 <li> 입니다.

<ul>은 Unordered List(언오더드 리스트)의 약자이고,

<li> 는 List Item(리스트 아이템)의 약자라고 생각하면 외우기 쉽죠.

 

언오더드 리스트, 말 그대로 정렬되지 않은 리스트죠.

리스트 된 내용이 어떤 순차적인 의미가 없는 경우에 사용합니다.

예를 들어 캠핑 갈 때 적는 준비물 리스트 같은 거죠.

 

그럼 HTML 코드를 볼게요.

<ul>과 <li>를 사용한 목록 예시

<ul> 안에 <li> 가 들어갑니다.

 

그럼 <ul> 없이 <li>만 사용하면 안 돼?

 

사용해도 되는데, 사용하면 안 되죠.

브라우저는 똑똑해서 <li>만 있어도 "이거 목록 같으니까 목록으로 보여줘야지" 하고 알아서 목록으로 보여주지만,

HTML 구조상 맞지 않죠.

 

위에서 설명했듯이 <ul> 은 이 내용이 언오더드 리스트라고 브라우저한테 알려주는 건데, 그냥 리스트 아이템만 쭉 써놓으면 이게 어떤 목록인지 설명이 안되는 거죠.

 

다음 목록을 보면 이게 뭔 말인지 이해될 거예요.

 

 

 

이제 숫자로 돼있는 목록을 볼게요.

이 목록은 <ol> 과 <li> 를 사용합니다.

위에서 처럼 <li> 는 리스트 아이템이고 <ol> 은 Ordered List(오더드 리스트) 입니다.

언오더드 리스트와 반대로 목록의 내용이 순차적인 의미가 있을 때 사용하는 목록입니다.

 

예를 들어서 라면 끓이는 방법을 적을 때 사용할 수 있죠.

(저는 수프 먼저 넣습니다.)

 

그럼 HTML 코드를 볼게요

<ol> 과 <li>를 사용한 목록 예시

이제 왜 <li>만 사용하면 안되는지 감이 오죠?

 

그럼 숫자 필요할땐 <ol>쓰고 아니면 그냥 <li>만 써도 문제 없겠네?

 

뭐... 틀린말은 아닌데, 틀렸어요.

위에서 말했듯이 HTML 구조상 틀렸어요.

 

그래서 구조상 뭐가, 어디가, 어떻게 틀렸는데? 

 

이렇게 한번 볼까요?

<ul>, <ol>, 그리고 <li> 처럼 두 가지의 요소를 같이 사용해야하는 경우

글자를 조합해서 한 단어를 만든다고 볼수 있을거 같아요.

 

<ul> + <li> = 언오더드 리스트 라는 단어가 나오고

<ol> + <li> = 오더드 리스트 라는 단어가 나오고

 

이렇게 보면 <li> 로만으로는 단어를 완성 할수 없죠.

 

 

 

 

 

다음은, 솔직히 저도 조금 생소한 목록인데요.

바로 <dl> Description List, 설명 목록입니다.

<dl>은 <dt>, <dd>와 같이 사용 됩니다.

 

<dt> 는 설명할 것의 이름을 뜻하고

<dd> 는 <dt> 의 설명 입니다.

 

쉽게 배우자며? 이게 쉽냐?

 

🤔🤔🤔

 

사전이라고 생각하면 될거같아요.

일단 HTML코드를 볼게요

설명 목록 예시

<dl> 안에 <dt> 가 들어가고 바로 밑에 <dd> 가 있습니다.

이렇게 하면 먼저 <dt>가 보이고 그 밑에 <dd>가 왼쪽이 좀 떨어져서 보이죠.

 

설명 목록 이란 이름처럼 뭔가에대한 설명을 할때 사용할수 있죠.

 

 

 

 

 

오늘은 이렇게 세 가지의 목록을 알아봤습니다.

솔직히 마지막 설명 목록은 저도 사용해본적이 없어서 공부했어요.

 

 

오늘도 수고 하셨습니다.

 

끝!