본문 바로가기

HTML 제목(HTML Headings)

HTML Headings

HTML 표제

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6




HTML Headings

HTML 표제


Headings are defined with the <h1> to <h6> tags.

표제는 <h1>to <h6>태그 로 정의됩니다 .

<h1>defines the most important heading. <h6> defines the least important heading.

<h1>가장 중요한 제목을 정의합니다. <h6>가장 중요하지 않은 머리글을 정의합니다.


Example


1
2
3
4
5
6
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
cs


Try it Yourself »


Note: Browsers automatically add some white space (a margin) before and after a heading.

참고 : 브라우저는 제목 앞뒤에 공백을 자동으로 추가합니다 (여백).



Headings Are Important

제목은 중요하다.


Search engines use the headings to index the structure and content of your web pages.

검색 엔진은 표제를 사용하여 웹 페이지의 구조와 내용을 색인화합니다.

Users skim your pages by its headings. It is important to use headings to show the document structure.

사용자는 제목을 기준으로 페이지를 훑어 봅니다. 문서 구조를 표시하려면 표제를 사용하는 것이 중요합니다.

<h1>headings should be used for main headings, followed by <h2>headings, then the less important <h3>, and so on.

<h1>머리글은 머리글, 머리글은 <h2>머리글, 머리글은 덜 중요하다 <h3>.


Note: Use HTML headings for headings only. Don't use headings to make text BIG or bold.

주 : 제목에만 HTML 표제를 사용하십시오. 제목을 사용하여 대용량 또는 대담한 텍스트를 작성하지 마십시오 .



Bigger Headings

더 큰 표제


Each HTML heading has a default size. However, you can specify the size for any heading with the style attribute, using the CSS font-size property:

각 HTML 표제는 기본 크기를가집니다. 그러나 styleCSS font-size속성을 사용하여 속성으로 모든 제목의 크기를 지정할 수 있습니다 .


Example


1
<h1 style="font-size:60px;">Heading 1</h1>
cs




HTML Horizontal Rules

HTML 수평 규칙


The <hr> tag defines a thematic break in an HTML page, and is most often displayed as a horizontal rule.

<hr>태그는 HTML 페이지에서 주제 휴식을 정의하고, 가장 자주 수평선으로 표시됩니다.

The <hr> element is used to separate content (or define a change) in an HTML page:

이 <hr>요소는 HTML 페이지에서 내용을 분리하거나 변경을 정의하는 데 사용됩니다.


Example


1
2
3
4
5
6
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>
cs




The HTML <head> Element

HTML <head> 요소


The HTML <head> element has nothing to do with HTML headings.

HTML <head>요소는 HTML 제목과 아무 관련이 없습니다.

The <head> element is a container for metadata. HTML metadata is data about the HTML document. Metadata is not displayed.

<head>요소는 메타 데이터 용 컨테이너이다. HTML 메타 데이터는 HTML 문서에 대한 데이터입니다. 메타 데이터가 표시되지 않습니다.

The <head>element is placed between the <html> tag and the <body> tag:

<head>소자 사이에 배치되어 <html>태그와 <body>태그 :


Example


1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
  <title>My First HTML</title>
  <meta charset="UTF-8">
</head>
<body>
.
.
.
cs



Note: Metadata typically define the document title, character set, styles, links, scripts, and other meta information.

참고 : 메타 데이터는 일반적으로 문서 제목, 문자 집합, 스타일, 링크, 스크립트 및 기타 메타 정보를 정의합니다.



How to View HTML Source?

HTML 소스를 보는 방법?

Have you ever seen a Web page and wondered "Hey! How did they do that?"

웹 페이지를 본 적이 있고 "이봐! 어떻게 그걸 했니?"


View HTML Source Code:

HTML 소스 코드보기 :

Right-click in an HTML page and select "View Page Source" (in Chrome) or "View Source" (in IE), or similar in other browsers. This will open a window containing the HTML source code of the page.

HTML 페이지를 마우스 오른쪽 버튼으로 클릭하고 "브라우저에서 페이지 소스보기"(Chrome에서) 또는 "소스보기"(IE에서) 또는 다른 브라우저에서 유사하게 선택하십시오. 그러면 페이지의 HTML 소스 코드가 포함 된 창이 열립니다.


Inspect an HTML Element:

HTML 요소 검사 :

Right-click on an element (or a blank area), and choose "Inspect" or "Inspect Element" to see what elements are made up of (you will see both the HTML and the CSS). You can also edit the HTML or CSS on-the-fly in the Elements or Styles panel that opens.

요소 (또는 빈 영역)를 마우스 오른쪽 버튼으로 클릭하고 "Inspect"또는 "Inspect Element"를 선택하여 어떤 요소가 구성되어 있는지 확인합니다 (HTML과 CSS가 모두 표시됨). 또한 열리는 요소 또는 스타일 패널에서 HTML 또는 CSS를 직접 편집 할 수 있습니다.



Test Yourself with Exercises!


HTML Tag Reference

HTML 태그 참조


W3Schools' tag reference contains additional information about these tags and their attributes.

W3Schools 태그 참조에는 이러한 태그 및 해당 속성에 대한 추가 정보가 들어 있습니다.

You will learn more about HTML tags and attributes in the next chapters of this tutorial.

이 자습서의 다음 장에서는 HTML 태그 및 속성에 대해 자세히 설명합니다.


Tag 

 Description

 <html> 

 Defines the root of an HTML document

 HTML 문서의 루트를 정의합니다.

 <body> 

 Defines the document's body

 문서의 본문을 정의합니다.

 <head> 

 A container for all the head elements (title, scripts, styles, meta information, and more)

 모든 헤드 요소 (제목, 스크립트, 스타일, 메타 정보 등)에 대한 컨테이너

 <h1> to <h6> 

 Defines HTML headings

 HTML 제목을 정의합니다.

 <hr> 

 Defines a thematic change in the content

 콘텐츠의 주제별 변화를 정의합니다.


출처 : W3School.com


'HTML' 카테고리의 다른 글

HTML 스타일(HTML Styles)  (0) 2018.06.07
HTML 단락(HTML Paragraphs)  (0) 2018.06.06
HTML 속성(HTML Attributes)  (0) 2018.06.04
HTML 요소(HTML Elements)  (0) 2018.06.03
HTML 기본(HTML Basic)  (0) 2018.06.02