HTML / h1, h2, h3, h4, h5, h6, p / 제목과 문단

제목

  • 제목(heading)은 h1, h2, h3, h4, h5, h6 태그로 만듭니다.
  • 문서의 구조와 밀접한 관련이 있으므로 순서에 맞게 사용하는 게 좋습니다.

문단

  • 문단(paragraph)은 p 태그로 만듭니다.
  • 문단과 문단 사이는 간격이 큽니다.
  • 문단 내에서 줄바꿈을 하고 싶다면 br 태그를 이용합니다.

예제 1

  • 제목과 문단이 있는 간단한 문서입니다.
  • 제목의 기본 모양은 굵은 글자이고, 레벨에 따라 크기가 다릅니다.
<!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 4</h4>
		<h5>Heading 5</h5>
		<h6>Heading 6</h6>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada.</p>
	</body>
</html>

Markup Validation Service에서 문법에 오류가 없는지, 구조는 어떤지를 확인할 수 있습니다.

예제 2

  • 제목 레벨을 조정하여 구조를 바꿔보았습니다.
<!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>
		<h3>Heading 3</h3>
		<h2>Heading 2</h2>
		<h3>Heading 3</h3>
		<h2>Heading 2</h2>
	</body>
</html>

예제 3

  • 문단 내에서 br 태그로 줄바꿈을 하는 예제입니다. 두 번째 문단에 문단 내 줄바꿈이 있습니다.
<!doctype html>
<html lang="ko">
	<head>
	<meta charset="utf-8">
		<title>HTML</title>
	</head>
	<body>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla.<br>Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada.</p>
	</body>
</html>

TIP

Related Posts

HTML / del - 삭제되었음을 나타내는 태그, ins - 새로 추가되었음을 나타내는 태그

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 / 선으로 ...

HTML / 문법

HTML / 문법

문법 <tagname>Contents</tagname> 위 모든 걸 요소(element)라고 합니다. <tagname>을 시작 태그, </tagname>을 종료 태그, 둘을 합쳐 태그(tag)라고 합니다. Contents는 내용입니다. 예를 들어 <p>Lorem</p> 는 p 요소라 하고, 시작 태그는 <p>, 종료 태그는 </p>, 내용은 Lorem입니다. 속성 태그는 속성(attribute)을 가질 수 있습니다. <tagname attribute="value">Contents</tagname> 예를 들어 blockquote에 id 속성(attribute)을 추가하고 값(value)을 abc로 정하고 싶으면 다음과 같이 합니다. <blockquote id="abc"> ... </blockquote> 속성값(value)은 큰 따옴표로 감싸도 ...

HTML / input / radio / 라디오 버튼 만들기

HTML / input / radio / 라디오 버튼 만들기

라디오 버튼 여러 개의 항목 중에서 하나만 선택하도록 하는 동그란 버튼을 라디오 버튼이라고 합니다. 라디오 버튼은 input 태그로 만듭니다. 문법 <input type="radio" name="xxx" value="yyy" checked> name : name의 값이 같은 것 중에서 하나를 선택합니다. value : 선택했을 때 전달될 값입니다. checked : 선택된 상태로 만듭니다. 예제 1 Apple 또는 Banana 중 하나만 선택합니다.(중복 선택이 가능하게 하려면 체크박스를 만드세요.) 아무것도 ...

HTML / pre / 입력한 그대로 출력하는 태그

HTML / pre / 입력한 그대로 출력하는 태그

pre HTML은 연속한 여러 개의 빈칸이나 탭, 줄바꿈을 하나의 빈칸으로 인식합니다. 예를 들어 다음 문서의 내용은 한 줄로 나옵니다. <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> </head> <body> Lorem ipsum dolor. Lorem ipsum dolor. ...

HTML / placeholder / 양식에 안내 문구 추가하기

HTML / placeholder / 양식에 안내 문구 추가하기

value input 태그에 value를 이용해서 기본값을 만들 수 있습니다. 이 상태에서 버튼을 클릭하면 기본값이 전송됩니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> <style> * { font-size: 16px; ...

HTML / em, strong / 강조하는 텍스트, 중요한 텍스트

HTML / em, strong / 강조하는 텍스트, 중요한 텍스트

em, strong em 태그는 강조하는 텍스트에 사용합니다. 기본 모양은 기울임꼴입니다. strong 태그는 중요한 텍스트에 사용합니다. 기본 모양은 굵은 글자입니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> <style> body { font-size: 64px; } </style> </head> <body> <p>Lorem <em>Ipsum</em> <strong>Dolor</strong>.</p> </body> </html> TIP b 태그는 글자를 굵게 만듭니다. 의미 부여 없이 굵게 만든다는 것이 strong과의 차이점입니다.

HTML / br / 줄바꿈하는 태그

HTML / br / 줄바꿈하는 태그

HTML은 연속한 여러 개의 빈 칸 또는 줄바꿈을 하나의 빈 칸으로 인식합니다. 따라서 코드 상에서 줄바꿈을 하거나 여러 번 띄어쓰기를 해도 한 번 띄어쓰기로 표현됩니다. 만약 블록 요소에서 줄바꿈을 하고 싶다면 br 태그를 이용합니다. 다음은 br 태그를 이용해서 줄바꿈을 한 예제입니다. 첫 번째 문단은 코드 상에서 줄바꿈을 했지만 웹브라우저에서는 띄어쓰기로 표현되고, ...

HTML / caption / 표(table)에 캡션 붙이는 태그

HTML / caption / 표(table)에 캡션 붙이는 태그

caption 표(table)에 캡션 붙일 때 caption 태그를 사용합니다. 기본 위치는 표 위 가운데입니다. 캡션 위치는 CSS의 caption-side로 정합니다. 예제 캡션의 위치를 파악하기 위해 표의 가로 크기를 100%로 했고, 테두리를 넣었습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> <style> table { width: 100%; } th, td { border: 1px solid #dadada; } </style> </head> <body> <table> <caption>Table Caption</caption> <tr> <th>Lorem</th><th>Ipsum</th> </tr> <tr> <td>Dolor</td><td>Amet</td> </tr> </table> </body> </html>

HTML / q, blockquote / 인용하기

HTML / q, blockquote / 인용하기

인용 인용임을 나타내는 태그에는 q와 blockquote가 있습니다. q는 문단 안에서 인용할 때 사용하는 인라인 요소이고, blockquote는 새로운 문단에서 인용하는 블록 요소입니다. 문법 <q cite="xxx">...</q> <blockquote cite="xxx">...</blockquote> 인용문의 출처는 cite 속성으로 나타냅니다. cite 속성 입력은 선택사항이고, 웹브라우저에서는 보이지 않습니다. 예제 1 q 요소의 기본 모양은 인용문구를 큰 따옴표로 감싸는 것입니다. <!doctype html> <html lang="ko"> <head> <meta ...

HTML / input / date, time / 날짜, 시간 입력하는 양식

HTML / input / date, time / 날짜, 시간 입력하는 양식

input type="date" type이 date인 input은 날짜를 입력받기 위한 양식입니다. 웹브라우저마다 표현 방식은 다르고, IE가 지원하지 않는다는 단점이 있지만, 스크립트를 사용하지 않고 날짜 형식만 입력 받을 수 있습니다. 문법 <input type="date" value="xxx" min="yyy" max="zzz"> value : 선택 항목으로, 기본 날짜를 정합니다. min : 선택 항목으로, 입력 가능한 가장 빠른 날짜입니다. max : 선택 항목으로, 입력 가능한 가장 ...