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>
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>'); ...
HTML은 연속한 여러 개의 빈 칸 또는 줄바꿈을 하나의 빈 칸으로 인식한다. 따라서 코드 상에서 줄바꿈을 하거나 여러 번 띄어쓰기를 해도 한 번 띄어쓰기로 표현된다. 만약 블록 요소 안에서 줄바꿈을 하고 싶다면 br 태그를 이용한다. 다음은 br 태그를 이용해서 줄바꿈을 한 예제이다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...
HTML / input / hidden / 입력하지 않은 값을 넘기는 숨겨진 양식
양식은 보통 사용자가 입력한 값을 활용하기 위해 사용한다. 하지만, 사용자가 입력하지 않아도 필요한 값이 있을 수 있다. 사용자가 접속한 IP, 로그인한 상태에서의 계정 정보, 게시물의 답글인 경우 게시물의 ID 등을 예로 들 수 있다. 이러한 값들은 type이 hidden인 input 태그로 만들어서 넘긴다. 다른 type의 input과 마찬가지로 이름은 name, 값은 value로 정한다. 다음은 ...
img img는 HTML 문서에 이미지를 삽입하는 태그이다. 주요 속성은 다음과 같다. src : 이미지의 경로 alt : 이미지를 표시할 수 없을 때 출력할 내용 width : 이미지의 가로 크기 height : 이미지의 세로 크기 loading : 이미지 로딩 방식 예제 1 width, height 속성을 정하지 않으면 이미지 원본 크기 그대로 나온다. 만약 지정한 경로에 이미지가 없다면 alt 속성에 있는 ...
HTML / progress - 진행 정도 나타내는 바 만드는 태그
progress progress는 진행 정도 나타내는 바를 만드는 태그이다. HTML5에서 추가되었다. 주요 속성은 max, value이다. max를 전체로 보았을 때 value에 해당하는 정도를 나타낸다. 예제 1 첫 번째 바는 전체를 100으로 보았을 때 20을 나타낸다. 두 번째 바는 전체를 200으로 보았을 때 20을 나타낸다. 웹브라우저에 따라, 웹브라우저의 버전에 따라 표현 방식이 다르다. <!doctype html> <html lang="ko"> <head> <meta ...
HTML / input / radio / 라디오 버튼 만들기
라디오 버튼 여러 개의 항목 중에서 하나만 선택하도록 하는 동그란 버튼을 라디오 버튼이라고 한다. 라디오 버튼은 input 태그로 만든다. 문법 <input type="radio" name="xxx" value="yyy" checked> name : name의 값이 같은 것 중에서 하나를 선택한다. value : 선택했을 때 전달될 값이다. checked : 선택된 상태로 만든다. 예제 1 Apple 또는 Banana 중 하나만 선택한다.(중복 선택이 가능하게 하려면 체크박스를 만든다.) 아무것도 선택되지 ...
HTML / select / 선택할 수 있는 목록을 만드는 태그
select select는 선택할 수 있는 목록을 만들 때 사용한다. 목록의 내용은 option 태그로 만든다. 문법 <select> <option>...</option> <option>...</option> <option>...</option> </select> 속성 select 태그에 사용하는 주요 속성은 다음과 같다. autofocus : 페이지가 로드되었을 때 해당 목록으로 바로 포커스가 맞춰진다. disabled : 화면에는 보이지만 사용할 수 없도록 만든다. multiple : 여러 값을 선택할 수 있도록 한다. name : 이름을 붙인다. size : 목록을 펼치기 전에 ...
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 ...
인용임을 나타내는 태그에는 q와 blockquote가 있다. q는 인라인 요소이고, blockquote는 블록 요소이다. 문법 <q cite="xxx">...</q> <blockquote cite="xxx">...</blockquote> 인용의 출처는 cite 속성으로 나타낸다. cite 속성 입력은 선택 사항이고, 웹브라우저에서는 보이지 않는다. 예제 1 q 요소의 기본 모양은 인용 문구를 큰 따옴표로 감싸는 것이다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> ...
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; ...