목록을 만드는 태그
:: 목록을 만드는 태그는 기본적으로 블록 속성을 갖는다.
<ul> 태그 (MDN)
:: 순서가 상관없는 목록을 만들때 사용하는 태그.
:: 항목 앞에 작은 원이나 사각형 같은 불릿(bullet)이 붙는다.
:: HTML5에서는 이 불릿을 수정할 때 css의 list-style-type 속성을 사용할 것을 추천하고 있다.
<ol> 태그 (MDN)
:: 순서가 중요한 목록을 만들때 사용하는 태그.
:: 항목 앞에 마커로 아라비아 숫자나 로마숫자, 영어가 붙는다.
:: 이 카운터는 css의 list-style-type 속성으로 수정할 수 있다.
:: 하지만 기술적, 법률적 문서에서는 HTML 태그 속성이 중요하므로 type 속성으로 바꿀 수 있다.
:: type 속성은 1(숫자, 기본값), i(로마숫자 소문자), I(로마숫자 대문자), a(영문 소문자), A(영문 대문자)의 값을 갖는다.
:: start 속성으로 순서 목록의 시작 값을 바꿀 수 있다.
:: reversed 속성으로 항목을 역순으로 표시할 수 있다.
<li> 태그 (MDN)
:: <ul> 태그나 <ol> 태그 내부의 개별 리스트를 표현할 때 사용하는 태그.
:: <ol> 태그 안에 사용할 때 vlaue 속성으로 항목의 순서를 설정할 수 있다.
:: value값이 사용되면 그 값부터 순서를 센다.
:: <li> 태그는 닫는 태그가 필요한 태그지만 <li> 태그가 연속될 때는 닫는 태그를 생략할 수도 있다.
목록을 만드는 태그들에 관한 예제 코드
See the Pen PobrPYw by lypi (@Lypi) on CodePen.
<dl> 태그
:: 제목과 설명이 한쌍인 설명 목록을 나타내는 태그
:: 예를 들어 '단어/정의', '질문/답' 목록 등에 사용할 수 있다.
<dt> 태그
:: <dl>태그 내부에서 제목을 나타내는 태그
<dd> 태그
:: <dl>태그 내부에서 설명을 나타내는 태그.
dl,dt,dd 태그와 관련된 예제 코드
See the Pen dl dt dd Tag by lypi (@Lypi) on CodePen.
썸네일용