HTML 쉽게 배우기 | 목록 (ul, li, ol, dl, dt, dd)
안녕하세요.
오랜만이네요.
오늘은 HTML에서 목록을 만드는 방법을 알아볼 거예요.
목록하면 앞에 점으로 돼있는 목록, 그리고 숫자로 돼있는 목록이 있죠.
당연히 HTML에서도 이런 목록들을 아주 쉽게 만들 수 있습니다.
먼저 점으로 돼있는 목록을 볼게요.
점으로 되있는 목록을 만들 때 사용하는 태그들은 <ul> 과 <li> 입니다.
<ul>은 Unordered List(언오더드 리스트)의 약자이고,
<li> 는 List Item(리스트 아이템)의 약자라고 생각하면 외우기 쉽죠.
언오더드 리스트, 말 그대로 정렬되지 않은 리스트죠.
리스트 된 내용이 어떤 순차적인 의미가 없는 경우에 사용합니다.
예를 들어 캠핑 갈 때 적는 준비물 리스트 같은 거죠.
그럼 HTML 코드를 볼게요.
<ul> 안에 <li> 가 들어갑니다.
그럼 <ul> 없이 <li>만 사용하면 안 돼?
사용해도 되는데, 사용하면 안 되죠.
브라우저는 똑똑해서 <li>만 있어도 "이거 목록 같으니까 목록으로 보여줘야지" 하고 알아서 목록으로 보여주지만,
HTML 구조상 맞지 않죠.
위에서 설명했듯이 <ul> 은 이 내용이 언오더드 리스트라고 브라우저한테 알려주는 건데, 그냥 리스트 아이템만 쭉 써놓으면 이게 어떤 목록인지 설명이 안되는 거죠.
다음 목록을 보면 이게 뭔 말인지 이해될 거예요.
이제 숫자로 돼있는 목록을 볼게요.
이 목록은 <ol> 과 <li> 를 사용합니다.
위에서 처럼 <li> 는 리스트 아이템이고 <ol> 은 Ordered List(오더드 리스트) 입니다.
언오더드 리스트와 반대로 목록의 내용이 순차적인 의미가 있을 때 사용하는 목록입니다.
예를 들어서 라면 끓이는 방법을 적을 때 사용할 수 있죠.
(저는 수프 먼저 넣습니다.)
그럼 HTML 코드를 볼게요
이제 왜 <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>가 왼쪽이 좀 떨어져서 보이죠.
설명 목록 이란 이름처럼 뭔가에대한 설명을 할때 사용할수 있죠.
오늘은 이렇게 세 가지의 목록을 알아봤습니다.
솔직히 마지막 설명 목록은 저도 사용해본적이 없어서 공부했어요.
오늘도 수고 하셨습니다.
끝!