HTML 목록(List) 태그 | 웹 개발 입문

유튜브 '짐코딩 GYM CODING' 님의 강의를 통하여 공부한 것을 기록합니다.

✍🏻 HTML 강의 Ep04_2 - HTML 목록(List) 태그 | 웹 개발 입문 | 함께 웹 개발에 입문해 보는 건 어떨까요?

https://youtu.be/rbd_HWUHCIc?si=9fq9we9-XPste7-2

 

 

 

목록 태그

 

• <ol> 순서가 있는 목록 표현. type 속성으로 글머리 기호를 변경할 수 있음
• <ul> 순서가 없는 목록 표현.
• <li> 목록하위 항목으로 사용, <ul> 태그 또는 <ol> 태그의 하위에 위치
• <dl> Definition List(정의 목록)의 약자, 사전처럼 용어를 설명하는 목록

예) A는 B이다. 와 같은 Key = Value로 사용할 때 유용

• <dt> Definition Term(정의 용어)의 약자로, 정의되는 용어의 제목을 넣을 때 사용
• <dd> Definition Description(정의 설명)의 약자로, 용어를 설명하는 데 사용

 

주의사항

• <dl> 태그는 하나 이상의 <dt>-<dd> 쌍의 태그를 갖고 있어야 함

• 단, <dt>-<dd> 태그가 반드시 하나의 짝으로 지어져야 하는 것은 아님

• <li>, <dt>-<dd> 태그는 밖에서 독립적으로 사용할 수 없음
• <ul> 태그 하위요소로는 <li> 태그가 위치해야 함

 

3_2_list-tag.html 파일 생성 후

title을 List Tag로 설정

 

ctrl+alt 누르면서 아래방향키를 누르면 여러 줄이 선택 가능하다

 

<li> 태그 선언

shif 누르면서 오른쪽방향키 누르면 선택 가능

 

맨 우측으로 이동 후 ctrl+v 해서 <li> 태그로 감싸기

 

<ol> 태그는 순서가 있는 목록 태그이기 때문에 앞에 넘버링까지 해서 표현된다

 

<h1> 태그 사용해서 김치볶음밥, 헬스 3대 운동 표시

ul>li*3 적은 후 enter

 

끝에서 tab 하면 바로 다음 태그 적을 수 있게 이동함

 

순서 없는 목록이기 때문에

앞에 글머리 기호가 나온다

 

dl>(dt+dd)*3

dt,dd는 형제 노드이기 때문에 괄호로 함께 적어준다

후 enter

 

<dl>, <dt>, <dd>, <br>, <strong> 태그 실습

 

<dt>, <dd>, <br> 태그 실습

 

<dt>, <dd>, <br> 태그 실습

 

<b> 태그 실습

 

<dt> 정의하는 제목

<dd> 설명하는 태그

 

<dt> 태그가 하나일 필요는 없다