목록 리스트(list) 관련 태그
이번 포스팅에서는 html 목록 리스트(list) 관련 태그에 대해서 알아보려고 한다. 리스트와 관련된 태그들은 텍스트나 이미지 등을 목록화하여 정리하며 카테고리 등을 표현하기 위해서도 자주 사용되는 중요한 태그 중 하나이다.
<ul>, <li> tag
<ul> 태그는 순서가 없는 목록(unorder list)을 만들 때 사용되며, <ul> 내부에 <li> 요소(list item)를 포함하여 각 항목을 표시한다. 대부분의 브라우저에서 리스트에는 원과 같은 불릿(bullet)이 표현된다.
<!DOCTYPE>
<html>
<head>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JAVASCRIPT</li>
<li>JAVA</li>
<li>JSP</li>
<li>ORACLE</li>
</ul>
</body>
</html>
<ol>, <li> tag
<ol> 태그는 순서 있는 목록을 만들기 위해서 사용되며 <ul>과 같이 내부에 <li>를 포함한다. 대부분의 브라우저에는 리스트가 숫자(기본값)로 표현되며 속성을 지정하여 변경이 가능하다. <ol>에는 type, start, reserved와 같은 속성을 사용할 수 있으며 속성에 대한 내용은 아래와 같다.
|
속 성
|
내 용
|
|
type
|
목록에 사용될 마커를 지정
* 속성값 : 1(숫자/기본값), a(영어 소문자), A(영어 대문자), i(로마숫자 소문자), I(로마숫자 대문자) |
|
start
|
시작 목록의 순번을 지정
* 속성값 : 숫자로 순번을 지정 |
|
reserved
|
항목을 역순으로 표시
|
<!DOCTYPE>
<html>
<head>
</head>
<body>
<ol type="A">PYTHON
<li>variable</li>
<li>operator</li>
<li>data type</li>
<li>control statement</li>
</ol>
</body>
</html>
<dl>, <dt>, <dd> tag
<dl>태그는 제목과 설명이 한 쌍인 설명 목록(description list)을 만들 때 사용한다. <dt>와 <dd>와 함께 사용되며, <dt>는 제목을 표시하며 <dd>는 설명(내용)을 표시한다.
<!DOCTYPE>
<html>
<head>
</head>
<body>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dd>웹페이지를 위한 지배적 마크업 언어</dd>
<hr />
<dt>JAVA</dt>
<dd>객체지향 프로그래밍 언어</dd>
<dd>웹 애플리케이션 등 가장 많이 사용되는 언어</dd>
</dl>
</body>
</html>
중첩 목록/리스트
그리고 다른 태그들과 같이 중첩하여 사용이 가능하다. 즉, <ul> 내에 <ol>을 포함하거나 또 다른 <ul> 등 여러 요소들을 포함하여 사용하는 것이 가능하다.
<!DOCTYPE>
<html>
<head>
</head>
<body>
<ul>
<li>HTML
<ol>
<li>태그</li>
<li>요소</li>
<li>속성</li>
<li>기타</li>
</ol>
</li>
<hr />
<li>JAVA
<ol type="I">
<li>변수</li>
<li>자료형</li>
<li>제어문</li>
<li>배열</li>
<li>메소드</li>
</ol>
</li>
<hr />
<li>tensorflow
<ol type="A" reversed>
<li>Linear Regression</li>
<li>Logistic Regression</li>
<li>Softmax</li>
<li>Neural Network</li>
</ol>
</li>
</ul>
</body>
</html>
'HTML' 카테고리의 다른 글
| HTML - 변경문자 (0) | 2022.12.16 |
|---|---|
| HTML - 주석 종류 (0) | 2022.09.29 |
| HTML - <a> (0) | 2022.09.08 |
| HTML - ARIA란 (1) | 2022.09.06 |
| HTML - label for (0) | 2022.09.05 |