코밍이의 하루

[HTML5] 설명 목록 만들기 본문

웹언어 공부/HTML5

[HTML5] 설명 목록 만들기

코밍이 2021. 8. 11. 02:10

1. 개발 환경

구분 내용
사용 언어 HTML5
개발환경 Visual Studio Code
참고 도서 [Do it] HTML5 + CSS3 웹 표준의 정석
웹브라우저 Chrome

 

2. 주요 문법

1) 관련 태그

태그 내용
<dl> 목록 표시, 사전 구성처러 '제목'과 '설명이 한 쌍인 설명 목록을 만든다.
<dt> 제목 표시
<dd> 설명 표시

 

3. 소스 코드

- dl.html

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title>제주 올레</title>
	<style>
		dl {
			line-height:25px;   /* 줄 간격 */
		}
	</style>
</head>
<body>
	<h1>제주 올레 </h1>
	<dl>
		<dt>올레 1코스</dt>
		<dd>코스 : 시흥 초등학교 옆 - 광치기 해변</dd>
		<dd>거리 : 14.6km(4~5시간)</dd>
		<dd>난이도 : 중</dd>
		<dt>올레 2코스</dt>
		<dd>코스 : 광치기 해변 - 온평 포구</dd>
		<dd>거리 : 14.5km(4~5시간)</dd>
		<dd>난이도 : 중</dd>
	</dl>
	<hr>
	<h1>국가 전염병 위기 경보 수준</h1>
	<ol type="A">
		<li>관심</li>
		<li>주의</li>
		<li>경계</li>
		<li>심각</li>
	</ol>
</body>
</html>

 

4. 실행 화면

dl.html

저작자표시 비영리 변경금지

'웹언어 공부 > HTML5' 카테고리의 다른 글

[HTML5] 표를 만드는 태그(2)  (2) 2021.08.12
[HTML5] 표를 만드는 태그(1)  (0) 2021.08.12
[HTML5] 순서 있는 목록  (0) 2021.08.11
[HTML5] 순서 없는 목록  (0) 2021.08.11
[HTML5] 동아시아 글자 표시하기  (0) 2021.08.04
'웹언어 공부/HTML5' Related Articles more