고정 헤더 영역
상세 컨텐츠
본문
반응형
<ul> 태그, <li> 태그 - 순서 없는 목록 만들기
- 순서가 필요하지 않는 목록(unordered list)을 만들 때 <ul> 태그를 사용하고 <ul> 태그 안에 <li> 태그를 사용해 각 항목을 표시한다.
- 각 항목 앞에 작은 원이나 사격형 같은 블릿이 붙는다.
<!DOCTYPE content-Type="text/html; charset=utf-8">
<html>
<head>
<meta charset="utf-8">
<title>목록 태그</title>
</head>
<body>
<ul>
<li>목록 1</li>
<li>목록 2</li>
<li>목록 2</li>
</ul>
</body>
</html>실행 화면
<ol> 태그, <li> 태그 - 순서 목록 만들기
- <ol>태그에는 순서와 관련된 몇 가지 속성이 있으므로 속성 값에 조금씩 다른 형태로 표시할 수 있다.
- type 종류
- 1 : 숫자(기본값)
- a : 영문 소문자
- A : 영문 대문자
- i : 로마숫자 소문자
- I : 로마숫자 대문자
- start 속성 : 순서 목록을 기본적으로 1부터 시작하는데 start 속성을 이용하면 중간 번호부터 시작할 수 있다.
- reverse 속성 : 항목을 역순으로 표시한다.
<!DOCTYPE content-Type="text/html; charset=utf-8">
<html>
<head>
<meta charset="utf-8">
<title>목록 태그</title>
</head>
<body>
<ol>
<li>박물관</li>
<li>미술관</li>
<li>경복궁</li>
</ol>
<ol type="a" start="3">
<li>박물관</li>
<li>미술관</li>
<li>경복궁</li>
</ol>
</body>
</html>실행 화면
<dl>, <dt>, <dd> 태그 - 설명 목록 만들기
- <dl> 태그는 사전 구성처럼 '제목'과 '설명'이 한 쌍인 설명 목록을 만들어준다.
- 예를 들어 '단어/정의' 목록이나 '질문/답' 목록에서 사용할 수 있다.
<!DOCTYPE content-Type="text/html; charset=utf-8">
<html>
<head>
<meta charset="utf-8">
<title>목록 태그</title>
</head>
<body>
<dl>
<dt>애국가 1절</dt>
<dd>동해물과 백두산이 마르고 닳도록</dd>
<dd>하느님이 보우하사 우리나라 만세</dd>
<dd>무궁화 삼천리 화려강산</dd>
<dd>대한사람 대한으로 길이보전 하세</dd>
</dl>
</body>
</html>실행 화면
반응형
'IT > HTML 및 CSS' 카테고리의 다른 글
| [HTML 기초] 폼 만들기 (0) | 2021.03.31 |
|---|---|
| [HTML 기초] 링크 만들기 (0) | 2021.03.30 |
| [HTML 기초] 텍스트를 한 줄로 표시하는 태그 (0) | 2021.03.28 |
| [HTML 기초] 테스트를 덩어리로 묶어 주는 태그 (0) | 2021.03.27 |
| [HTML 기초] 테이블 태그 (0) | 2021.03.21 |
댓글 영역