본문 바로가기

FrontEnd/HTML

웹 문서의 목록 만들기

728x90
반응형

웹 문서에서 목록은 어떤 항목을 나열할 때뿐 아니라 CSS와 함께 사용하여 내비게이션을 만들거나 콘텐츠를 배치하는 등 다양한 용도로 사용합니다. 

 

목록에는 순서가 있는 목록인 <ol>과 순서가 없는 <ul>을 사용합니다. 각 태그 사이에는 <li>을 입력하여 항목을 삽입니다. 

<ol>과 <ul> 사용법

<ol> 태그과 <ul> 태그는 위 사진 처럼 사용하며 출력 결과를 확인해보면 아래와 같이 나타냅니다.

출력 결과 

<ol> 태그는 기본적으로 숫자 1,2,3... 으로 번호를 붙입니다. <ol> 태그 안에 type 속성을 사용하면 영문자나 로마 숫자등으로 순서를 나타낼 수 있고 start 속성을 사용하여 시작 번호를 바꿀 수 있습니다.

<ul>의 경우 항목 앞에 작은 원이나 사각형을 붙여서 구분하는데 이런 작은 그림을 불릿이라고 합니다.

아래의 표는 <ol> 태그의 속성 값을 정리하였습니다.

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

다음으로 설명 목록을 만드는 태그가 있습니다. 우선 설명 목록의 정의는 이름과 값 형태로 된 목록을 말합니다.

설명 목록의 태그로는 <dt>, <dd>, <dl>이 있으며 기본 형태는 다음과 같습니다.

<dl>

   <dt>이름</dt>

    <dd></dd>

</dl>

 

728x90
반응형