HTML5〃목록 태그(ul / ol / dl )

텍스트와 폰트에 필요한 태그에 이어 이번에는 목록을 만드는 태그에 대해서 정리해보겠습니다. 이 목록 태그는 회원가입 프로그램을 만들때 많이 접해봤는데 여러개의 태그중에 어떤 것을 써야될지 정리할 필요가 있다고 생각했어요.

■ 목록 태그( ul / ol / dl )

〃 CSS를 입히지 않은 ul / ol / dl 출력 모습 〃

목록태그에는 크게 3가지로 순서가 없이 리스트로 나열되는 목록, 차례대로 순서가 있는 목록, 정의를 내리고 설명을 하는 목록이 있습니다. 스타일을 꾸미는 CSS를 적용하면 다양하게 표시할 수 있어 유용하게 쓰입니다. 

● <ul> : 순서가 없는 목록을 그룹으로 만듬.

● <ol> : 순서가 있는 목록을 그룹으로 만듬.

● <li> : 그룹안에 들어가는 세부 항목들

● <dl> : 정의를 내리는 그룹

● <dt> : 정의를 내리는 목록

● <dd> : 목록안에 들어가는 세부 항목들

■ CSS를 적용시킨 목록 태그 ( ul / ol )

〃 ul태그에 css를 적용시킨 모습 〃

순서가 없는 목록태그인 ul은 기본으로 ● 속이 들어 있는 원의 모형이지만, ■ 사각형과, ○ 속이 비어 있는 원의 모형으로도 표현할 수 있습니다. CSS를 입히는 방법인데요. 사진에 적혀 있는대로 <style>태그안에 명령어를 적고 블릿이 들어가는 공간에 다음과 같이 넣어주면 됩니다.

( ● : disc / ○ : circle / ■ : square )

〃 ol태그에 css를 적용시킨 모습 〃

다음은 순서있는 목록에 스타일을 적용시켰는데요. <ol> 태그안에 type="A" 이렇게 원하는 블릿을 넣는 방법입니다. start는 보통 생략해서 쓰지만 이런 기능도 있다라는걸 표현하기 위해 썼습니다. 블릿의 종류로는 다음과 같습니다.

( 1,2,3 / A,B,C / a,b,c / i,ii,iii / l,ll,lll )