#16 목록(리스트)을 나타내는 태그들 배우기
- HTML/HTML 기초
- 2018. 12. 7.
목록태그에 대해 알아보겠습니다.
목록을 나타내는 태그에는 dl, dt, dd와 같이 각 목록앞에 숫자나 부호가 아무것도 붙지 않는 정의 리스트용 태그와 ul, li와 같이 목록 앞에 3가지 모양의 부호(type=disc / cicle / square) 중에서 한가지를 나타나는 무번호 리스트용 태그, 그리고 ol와 같이 5가지 종류의 목록(type=1/A/a/I/i)중 하나를 순서대로 나타나게 하는 순서 리스트용 태그가 있습니다.
1. 정의 리스트 태그
- <dl> : 목록의 시작과 끝을 지정하는데 사용됩니다.
- <dt> : 정의하고자 하는 항목(제목)을 나타내는데 사용됩니다.
- <dd> : 내용을 적을 곳에 사용합니다.
예제))
<dl> <dt> 총기시대 공략 </dt> <dd> it-fix 블로그를 이용해주세요 </dd> </dl>
출력))
총기시대 공략
- it-fix 블로그를 이용해주세요
2. 무번호 리스트 태그
- <ul> : 목록 앞에 3가지 모양의 부호(type=disc / cicle / square) 중에서 한가지를 나타납니다.
- <li> : <ul>태그로 지정한 목록의 각 세부항목을 표시합니다.
예제))
<ul type="disc"> <li>총기시대 공략<li>it-fix블로그에서</ul>
출력))
- 총기시대 공략
- it-fix블로그에서
3. 순서 리스트 태그
- <ol> : 5가지 종류의 타입목록(1/A/a/I/i) 중에서 한가지를 순서대로 출력되게 해주는 태그입니다.
- <li> : <ul> 또는 <ol> 태그로 지정한 목록중의 세부목록을 나눠주는 태그입니다.
예제))
<ol type="A"> <li> 총기시대의 공략 및 팁 <li> it-fix 블로그에서 <ol>
출력))
- 총기시대의 공략 및 팁
- it-fix 블로그에서
이상에서 간단히 목록의 리스트를 데이터 입력시 자동으로 나타나게 해주는 태그들의 사용법을 살펴보았습니다.
위의 태그들의 최대의 장점은 데이터 입력중에 한개의 목록을 입력한 후 엔터를 누를 경우 자동으로 다음 순서의 리스트 순서태그를 입력해준다는 점일 것입니다.
'HTML > HTML 기초' 카테고리의 다른 글
많이 쓰는 브라우저용 단축키 16가지 (0) | 2020.04.30 |
---|---|
프레임 태그와 테이블 태그 (0) | 2019.06.03 |
#15 문자속성의 태그 배우기 (0) | 2018.08.25 |
#14 위치정렬 태그 배우기 (0) | 2018.08.03 |