Doit!-개인공부(HTML+CSS+자바스크립트)

06. DOIT - 웹 문서에 다양한 내용 입력하기(목록 만들기)

코골면서 딩가딩가 2024. 4. 3. 09:38
<ol>,<li> 태그

 

· 순서 있는 목록을 만드는 <ol> 태그

순서 있는 목록이란 각 항목을 순서대로 나열한 것입니다. 순서 목록은 어떤 과정을 순서대로 설명할 때 <ol>,<li> 태그를 사용해 만듭니다. ol은 ordered list의 줄임말이고,  li은 list 의 줄임말입니다. 목록을 표시할 내용 앞뒤에 각각<ol>과</ol> 태그를 두고, 그 사이에 <li>와 </li> 태그를 삽입합니다.

 

:  <ol>안에있는 <li> 태그

 

· <ol> 태그의 type, start 속성

앞의 예시처럼 순서있는 목록은 기본적으로 숫자 1,2,3 ... 으로 번호를 붙입니다. 이때 tpye 속성을 사용하면 영문자나 로마숫자 등으로 순서를 나타낼 수 있습니다. 

종류 설명
type = "1" 숫자(기본값)
type = "a" 영어 소문자
type = "A" 영어 대문자
type = "i" 로마 숫자 소문자
type = "I" 로마 숫자 대문자

 

 

 

<ul>,<li> 태그

 

· 순서 없는 목록을 만드는 <ul> 태그

순서 없는 목록은 항목의 순서가 중요하지 않을 떄 사용합니다. unordered list 의 줄임말인 <ul>과</ul> 태그를 목록 앞뒤에 붙인 후 <li>와 </li> 태그를 삽입합니다. 순서없는 목록은 항목 앞에 작은 원이나 사각형을 붙여서 구분하는데 이런 작은 그림을 불릿(bullet)이라고 합니다.

 

 :  <ul>안에있는 <li> 태그

 

 

<dl>,<dd>,<dd> 태그

 

· 설명 목록을 만드는 <dl>,<dd>,<dd> 태그

설명 목록이란 이름 형태로 된 목록을 말합니다. 설명 목록은 이름 부분을 지정하는 <dt> 태그와 값 부분을 지정하는 <dd> 태그로 구성됩니다. <dl>과</dl> 태그 사이에는 한 쌍의 <dt> 태그와 </dt> 태그를 넣습니다. 이때 <dt> 태그 하나에 <dd> 태그를 여러 개 사용할 수도 있습니다.

 

: <dt> 태그 : 이름

: <dd> 태그 : 값