HTML / ol, ul, dl / 순서 있는 목록, 순서 없는 목록, 정의 목록
순서 있는 목록 - ol
순서 있는 목록(Ordered List)은 1, 2, 3, ···처럼 차례대로 증가하는 번호가 붙는 목록이다. 순서 있는 목록은 ol로, 목록의 내용은 li로 만든다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>HTML</title>
</head>
<body>
<h1>Ordered List</h1>
<ol>
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolor</li>
</ol>
</body>
</html>
시작하는 번호를 지정하려면 start 속성을 추가한다.
<ol start="5">
특정 목록의 번호를 지정하려면 value 속성을 추가한다.
<li value="9">
다음은 번호 지정을 이용한 간단한 예이다. 번호는 5부터 시작하고, Dolor는 9로 지정했다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>HTML</title>
</head>
<body>
<h1>Ordered List</h1>
<ol start="5">
<li>Lorem</li>
<li>Ipsum</li>
<li value="9">Dolor</li>
</ol>
</body>
</html>
숫자 이외에 알파벳, 로마자, 그리스어 등으로 순서를 매길 수 있다. 이는 HTML보다 CSS를 이용하여 설정하는 게 좋다.
순서 없는 목록 - ul
순서 없는 목록(Unordered List)은 번호 대신 점이나 사각형 등의 도형이 목록 앞에 붙는다. 순서 없는 목록은 ul로, 목록의 내용은 li로 만든다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>HTML</title>
</head>
<body>
<h1>Unordered List</h1>
<ul>
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolor</li>
</ul>
</body>
</html>
목록에 붙는 도형의 기본값은 점이다. 다른 모양으로 바꾸는 것은 HTML보다 CSS를 이용하는 게 좋다.
정의 목록 - dl
정의 목록(Definition List)은 용어와 그 뜻을 나열할 때 사용한다. 정의 목록은 dl로, 용어는 dt로, 그 뜻은 dd로 만든다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>HTML</title>
</head>
<body>
<h1>Definition List</h1>
<dl>
<dt>WWW</dt>
<dd>WWW represents World Wide Web.</dd>
<dt>HTML</dt>
<dd>HTML represents HyperText Markup Language.</dd>
</dl>
</body>
</html>
목록 안의 목록
목록 안에 목록을 넣을 수 있다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>HTML</title>
</head>
<body>
<ol>
<li>
Lorem
<ol>
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolor</li>
</ol>
</li>
<li>
Ipsum
<ul>
<li>
Lorem
<ul>
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolor</li>
</ul>
</li>
<li>Ipsum</li>
<li>Dolor</li>
</ul>
</li>
<li>Dolor</li>
</ol>
</body>
</html>
Related Posts
HTML / ol, ul, dl / 순서 있는 목록, 순서 없는 목록, 정의 목록
순서 있는 목록 - ol 순서 있는 목록(Ordered List)은 1, 2, 3, ···처럼 차례대로 증가하는 번호가 붙는 목록이다. 순서 있는 목록은 ol로, 목록의 내용은 li로 만든다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> </head> <body> <h1>Ordered List</h1> <ol> ...
링크(link)는 <a> 태그로 만든다. 링크의 대상은 웹페이지, 파일, 이메일 등이 될 수 있다. 기본 문법 <a href="xxx">Label</a> href 속성의 값에는 웹페이지, 이미지, 동영상, 파일 등의 주소를 넣는다. 웹페이지로 이동하거나, 동영상 플레이어가 실행되거나, 파일이 다운로드 되는 등 웹브라우저의 설정에 따라 처리된다. <a href="">Label</a>처럼 href 속성에 값이 없으면, 현재 페이지로 이동하는 링크가 만들어진다. 주요 속성 a 태그에 추가할 ...
HTML / table, thead, tbody, tfoot, th, tr, td / 표 만들기
표 만들 때 사용하는 태그 표는 table 태그로 만든다. 행은 tr 태그로 만든다. 열의 제목이 들어가는 셀은 th 태그로 만든다. 내용이 들어가는 셀은 td 태그로 만든다. 각 열의 의미에 따라 thead, tbody, tfoot 태그로 구분 지을 수도 있다. 가로로 이웃한 셀을 합칠 때에는 colspan 속성을 사용한다. 세로로 이웃한 셀을 합칠 때에는 rowspan 속성을 사용한다. 표 제목은 caption 태그로 ...
HTML / input / number / 숫자 입력하는 양식
input type="number" input 태그의 type을 number로 하면 숫자만 입력할 수 있다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> * { font-family: Consolas, monospace; ...
HTML / h1, h2, h3, h4, h5, h6, p / 제목과 문단
제목 제목(heading)은 h1, h2, h3, h4, h5, h6 태그로 만든다. 문서의 구조와 밀접한 관련이 있으므로 순서에 맞게 사용하는 게 좋다. 문단 문단(paragraph)은 p 태그로 만든다. 문단과 문단 사이는 간격이 크다. 문단 내에서 줄바꿈을 하고 싶다면 br 태그를 이용한다. 예제 1 제목의 기본 모양은 굵은 글자이고, 레벨에 따라 크기가 다르다. h4와 p는 글자 크기가 같다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> </head> <body> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading ...
HTML / del - 삭제되었음을 나타내는 태그, ins - 새로 추가되었음을 나타내는 태그
del, ins del은 텍스트를 삭제했음을 나타냅니다. 취소선이 있는 게 기본 모양입니다. ins는 새로 추가되었음을 나타냅니다. 밑줄이 있는 게 기본 모양입니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> </head> <body> <p>My favorate color is <del>blue</del> <ins>red</ins>.</p> </body> </html> CSS / text-decoration / 선으로 ...
noscript noscript 태그 안의 내용은 스크립트를 지원하는 않는 웹브라우저나 스크립트를 실행하지 않도록 설정한 웹브라우저에서만 출력됩니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML Tag | noscript</title> </head> <body> <script> document.write( '<h1>Your browser supports JavaScript</h1>'); ...
pre HTML은 연속한 여러 개의 빈칸이나 탭, 줄바꿈을 하나의 빈칸으로 인식한다. 예를 들어 다음 문서의 내용은 한 줄로 나온다. <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> </head> <body> Lorem ipsum dolor. Lorem ipsum dolor. ...
HTML / input / hidden / 입력하지 않은 값을 넘기는 숨겨진 양식
양식은 보통 사용자가 입력한 값을 활용하기 위해 사용한다. 하지만, 사용자가 입력하지 않아도 필요한 값이 있을 수 있다. 사용자가 접속한 IP, 로그인한 상태에서의 계정 정보, 게시물의 답글인 경우 게시물의 ID 등을 예로 들 수 있다. 이러한 값들은 type이 hidden인 input 태그로 만들어서 넘긴다. 다른 type의 input과 마찬가지로 이름은 name, 값은 value로 정한다. 다음은 ...
HTML / input / date, time / 날짜, 시간 입력하는 양식
input type="date" type이 date인 input은 날짜를 입력 받기 위한 양식이다. 웹브라우저마다, 같은 웹브라우저라도 버전에 따라 표현 방식이 다르다. IE는 지원하지 않는다. 아래 스크린샷은 크롬 기준이다. 문법 <input type="date" value="xxx" min="yyy" max="zzz"> value : 선택 항목으로, 기본 날짜를 정한다. min : 선택 항목으로, 입력 가능한 가장 빠른 날짜이다. max : 선택 항목으로, 입력 가능한 가장 늦은 날짜이다. 예제 1 - 기본 ...