HTML에서 목록을 생성할 때 사용되는 주요 태그는 <ul>, <ol>, <li>, 그리고 <dl>입니다. 각 태그는 목록을 구성하거나 항목을 정의하는 데 사용됩니다. 이 글에서는 각 태그의 용도와 사용 방법에 대해 설명하겠습니다.
기본 HTML 구조
<!DOCTYPE html> <!-- HTML5 문서 형식을 선언 --> <html lang="en"> <!-- 문서의 언어를 영어로 설정 --> <head> <meta charset="UTF-8"> <!-- 문서의 문자 인코딩을 UTF-8로 설정 --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 화면 크기에 맞춰 콘텐츠를 조정 --> <title>목록관련태그</title> <!-- 문서 제목 --> </head> <body>
목록 태그 (<li>)
<li>목록1</li> <li>목록2</li>
<li>태그는 리스트 항목을 정의합니다.<ul>또는<ol>태그 내부에서 사용됩니다. 위 예시는 순서 없는 리스트나 순서 있는 리스트 없이 단독으로 사용된 예시입니다.
순서 없는 목록 태그 (<ul>)
<h1>ul : 순서없는 목록 태그</h1> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>jQuery</li> </ul>
<ul>태그는 순서 없는 목록을 생성합니다. 각 항목은<li>태그로 감싸집니다. 목록의 항목은 일반적으로 원형 마커로 표시됩니다.
<ul> <li>HTML</li> <ul> <li>글자관련태그</li> <li>목록관련태그</li> </ul> <li>CSS</li> <li>JavaScript</li> <li>jQuery</li> </ul>
<ul>태그를 중첩하여 계층 구조의 목록을 만들 수 있습니다. 예를 들어, "HTML" 항목 아래에 하위 항목으로 "글자관련태그"와 "목록관련태그"가 포함된 목록을 만들 수 있습니다.
순서 있는 목록 태그 (<ol>)
<h1>ol : 순서있는 목록 태그</h1> <ol> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>jQuery</li> </ol>
<ol>태그는 순서 있는 목록을 생성합니다. 각 항목은<li>태그로 감싸집니다. 목록의 항목은 기본적으로 숫자 마커로 표시됩니다.
<!-- type 속성을 통해서 순서 표현 방식을 변경할 수 있다 (A, a, i...) --> <!-- start 속성을 이용해서 시작 순서를 변경할 수 있다. --> <ol type="A" start="0" reversed> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>jQuery</li> </ol>
<ol>태그의type속성을 사용하여 순서 표현 방식을 변경할 수 있습니다.A,a,i등 다양한 형식이 있습니다. 또한,start속성을 사용해 시작 번호를 지정할 수 있으며,reversed속성으로 목록의 순서를 역순으로 표시할 수 있습니다.
정의 목록 태그 (<dl>, <dt>, <dd>)
<!-- 정의 목록 태그는 설명을 나열할 때 사용 --> <dl> <dt>HTML</dt> <!-- 용어(제목)을 정의 --> <dd>HyperText Markup Language</dd> <!-- 용어에 대한 설명 --> </dl>
<dl>태그는 정의 목록을 나타냅니다.<dt>태그는 정의할 용어(제목)를,<dd>태그는 해당 용어에 대한 설명을 나타냅니다. 정의 목록은 주로 용어와 그 설명을 나열하는 데 사용됩니다.
초보부터 시작하는 개발자 생활