1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
|
---
title: 'HTML: Hypertext Markup Language'
slug: Web/HTML
tags:
- HTML
- HTML 강의
- HTML 강좌
- HTML 튜토리얼
- HTML 프로그래밍
- HTML5
- Landing
- Web
- 'l10n:priority'
translation_of: Web/HTML
---
<div>{{HTMLSidebar}}</div>
<p><span class="seoSummary"><strong>HTML</strong>(HyperText Markup Language)은 웹을 이루는 가장 기초적인 구성 요소입니다. HTML은 웹 콘텐츠의 의미와 구조를 정의할 때 사용합니다. HTML 말고도 웹 페이지의 외형과 표현을 서술하고(<a href="/ko/docs/Web/CSS">CSS</a>), 기능과 동작을 서술하는(<a href="/ko/docs/Web/JavaScript">JavaScript</a>) 기술도 있습니다.</span></p>
<p>"Hypertext(하이퍼텍스트)"란 웹 페이지를 다른 페이지로 연결하는 링크를 말합니다. 링크는 웹의 근본적인 속성입니다. 인터넷에 자료를 올리고 다른 사람이 만든 페이지로 링크함으로써, 여러분은 월드 와이드 웹 세계의 능동적인 일원이 될 수 있습니다.</p>
<p>HTML은 웹 브라우저에 표시되는 글, 이미지 등의 다양한 컨텐츠를 표시하기 위해 "마크업"을 사용합니다. HTML 마크업은 {{HTMLElement("head")}}, {{HTMLElement("title")}}, {{HTMLElement("body")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("p")}}, {{HTMLElement("div")}}, {{HTMLElement("span")}}, {{HTMLElement("img")}}, {{HTMLElement("aside")}}, {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("datalist")}}, {{HTMLElement("details")}}, {{HTMLElement("embed")}}, {{HTMLElement("nav")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("video")}} 처럼, 수많은 "요소"를 사용합니다.</p>
<p>HTML 요소는 문서의 다른 텍스트와 "태그"로 구분합니다. 태그는 "<code><</code>", 태그 이름, "<code>></code>"로 이루어집니다. 태그 안의 요소명은 대소문자를 구분하지 않습니다. 즉, 대문자, 소문자, 아니면 섞어서도 작성할 수 있습니다. 예를 들어 <code><title></code>요소는 <code><Title></code>, <code><TITLE></code>, 그 외 기타 가능한 모든 방법으로 작성할 수 있습니다.</p>
<p>아래에서 HTML을 더 깊이 배워보세요.</p>
<section class="cleared" id="sect1">
<ul class="card-grid">
<li><span>HTML 소개</span>
<p>웹 개발을 새로 시작하는 분이라면 <a href="/ko/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML 기초</a>를 읽고, HTML이 무엇인지와 어떻게 사용하는지 배워보세요.</p>
</li>
<li><span>HTML 자습서</span>
<p>HTML 사용법, 자습서, 완전한 예제 등은 <a href="/ko/docs/Learn/HTML">HTML 익힘장</a>에서 확인할 수 있습니다.</p>
</li>
<li><span>HTML 참고서</span>
<p><a href="/ko/docs/Web/HTML/Reference">방대한 참고서</a>는 HTML을 구성하는 요소와 속성에 대한 자세한 내용을 담고 있습니다.</p>
</li>
</ul>
<div class="row topicpage-table">
<div class="section">
<h2 class="Tools" id="초보자_자습서">초보자 자습서</h2>
<p>MDN의 <a href="/ko/docs/Learn/HTML">HTML 익힘장</a>은 HTML을 가장 기초부터 알려주는 여러 개의 장을 가지고 있습니다. 이전 경험은 필요하지 않습니다.</p>
<dl>
<dt><a href="/ko/docs/Learn/HTML/Introduction_to_HTML">HTML 소개</a></dt>
<dd>이 모듈은 기초를 다져서 당신이 HTML을 텍스트에 적용하거나, 하이퍼링크를 작성하거나, HTML을 이용해 웹 페이지를 만드는 등 중요한 개념과 구문에 익숙해지도록 합니다.</dd>
<dt><a href="/ko/docs/Learn/HTML/Multimedia_and_embedding">멀티미디어와 임베딩</a></dt>
<dd>이 모듈은 HTML을 사용해 웹페이지에 멀티미디어를 삽입하는 방법을 살펴봅니다. 이미지를 삽입하는 여러 방법과 오디오, 비디오, 혹은 다른 웹 페이지 자체를 삽입하는 방법을 설명합니다.</dd>
<dt><a href="/ko/docs/Learn/HTML/Tables">HTML 표</a></dt>
<dd>표 형태의 데이터를 이해하기 쉽고 접근성 높은 방식으로 웹페이지에 표현하는 것은 어려울 수 있습니다. 이 모듈은 기본적은 표 마크업과 캡션, 요약을 사용하는 복잡한 요소들을 다룹니다.</dd>
<dt><a href="/ko/docs/Learn/HTML/Forms">HTML 양식</a></dt>
<dd>양식은 웹의 매우 중요한 부분으로, 회원가입과 로그인, 피드백 전송, 상품 구매 등등 웹 사이트와 상호작용에 필요한 많은 기능을 제공합니다. 이 모듈은 양식의 클라이언트 사이드/프론트 엔드 부분을 만들며 시작합니다.</dd>
<dt><a href="/ko/docs/Learn/HTML/Howto">HTML로 일반적인 문제 해결하기</a></dt>
<dd>제목 다루기, 이미지와 비디오 추가하기, 콘텐츠 강조하기, 기본적인 양식 만들기 등 일반적인 문제를 HTML로 해결하는 법을 설명한 문서로의 링크를 제공합니다.</dd>
</dl>
<h2 id="고급_주제">고급 주제</h2>
<dl>
<dt class="landingPageList"><a href="/ko/docs/Web/HTML/CORS_enabled_image">CORS 활성화한 이미지</a></dt>
<dd class="landingPageList">
<p>{{htmlattrxref("crossorigin", "img")}} 속성을 적절한 {{glossary("CORS")}} 헤더와 조합하면 {{htmlelement("img")}} 요소의 이미지를 외부 {{glossary("origin", "출처")}}에서 가져올 수 있으며, 마치 현재 출처의 이미지인 것처럼 {{htmlelement("canvas")}}에서도 사용할 수 있습니다.</p>
</dd>
<dt class="landingPageList"><a href="/ko/docs/Web/HTML/CORS_settings_attributes">CORS 설정 특성</a></dt>
<dd class="landingPageList">
<p>{{htmlelement("img")}}, {{htmlelement("video")}} 등 {{glossary("CORS")}}를 지원하는 일부 HTML 요소는 <code>crossorigin</code> 특성(<code>crossOrigin</code> 속성)을 보유하며, 해당 요소가 데이터를 가져올 때의 CORS 요청을 통제할 수 있습니다.</p>
</dd>
<dt class="landingPageList"><a href="/ko/docs/Web/HTML/Preloading_content">rel="preload"로 콘텐츠 미리 불러오기</a></dt>
<dd class="landingPageList">
<p>{{htmlelement("link")}}요소의 {{htmlattrxref("rel", "link")}} 속성의 프리로드 값을 사용하면, 브라우저의 메인 렌더링 작업이 시작되기 전 페이지 로드 과정 중 라이프사이클 초기에 프리로딩을 시작하고자 하는 리소스를 지정하여 HTML {{htmlelement("head")}}에 선언적인 가져오기 요청을 쓸 수 있습니다. 이것은 리소스들이 더 일찍 이용가능 하도록 만들고 페이지의 첫 번째 렌더를 차단할 가능성을 감소시켜 성능 향상에 이르게 합니다. 이 글은 프리로드(<code>preload</code>) 작동 방법에 대한 기본적인 지침을 제공합니다.</p>
</dd>
</dl>
</div>
<div class="section">
<h2 class="Documentation" id="참고서">참고서</h2>
<dl>
<dt class="landingPageList"><a href="/ko/docs/Web/HTML/Reference">HTML 참고서</a></dt>
<dd class="landingPageList">HTML은 <strong>요소</strong>로 이루어져있으며, 각각의 요소는 몇 가지 <strong>특성</strong>을 사용해 수정할 수 있습니다. HTML 문서는 서로 <a href="/ko/docs/Web/HTML/Link_types">링크</a>로 연결되어 있습니다.</dd>
<dt class="landingPageList"><a href="/ko/docs/Web/HTML/Element">HTML 요소 참고서</a></dt>
<dd class="landingPageList">모든 {{glossary("HTML")}} {{glossary("Element", "요소")}}의 목록을 살펴보세요.</dd>
<dt class="landingPageList"><a href="/ko/docs/Web/HTML/Attributes">HTML 특성 참고서</a></dt>
<dd class="landingPageList">HTML 요소는 <strong>특성</strong>을 가집니다. 특성은 요소와 요소의 동작 방식을 다양하게 설정하고 수정하는 일련의 추가 값입니다.</dd>
<dt class="landingPageList"><a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a></dt>
<dd class="landingPageList">전역 특성은 모든 <a href="/ko/docs/Web/HTML/Element">HTML 요소</a>에 지정할 수 있으며, 심지어 표준에 명시되지 않은 요소에도 지정할 수 있습니다. 이는, 비표준 요소를 사용하는 순간 문서가 HTML5를 준수하지 않음에도 불구하고, 비표준 요소 역시 전역 특성을 허용해야 함을 의미합니다.</dd>
<dt class="landingPageList"><a href="/ko/docs/Web/HTML/Inline_elements">인라인 요소</a>와 <a href="/ko/docs/Web/HTML/Block-level_elements">블록 레벨 요소</a></dt>
<dd class="landingPageList">HTML의 요소는 역사적으로 "블록 레벨" 요소와 "인라인" 요소로 분류됐습니다. 인라인 요소는 콘텐츠의 흐름을 끊지 않고, 요소를 구성하는 태그에 할당된 공간만 차지합니다. 블록 레벨 요소는 부모 요소의 전체 공간을 차지하여 "블록"을 만듭니다.</dd>
<dt class="landingPageList"><a href="/ko/docs/Web/HTML/Link_types">링크 유형</a></dt>
<dd class="landingPageList">HTML에선 두 문서간의 관계를 명시할 때 여러 링크 유형을 사용합니다. 유형을 설정할 수 있는 링크 타입 요소들은 <code><a></code>, <code><area></code>, 또는 <code><link></code>가 있습니다.</dd>
<dt class="landingPageList"><a href="/ko/docs/Web/Media/Formats">HTML 미디어 유형과 형식 안내서</a></dt>
<dd class="landingPageList">
<p>{{HTMLElement("audio")}}와 {{HTMLElement("video")}} 요소를 통해 외부 프로그램 없이 오디오와 비디오 미디어를 재생할 수 있습니다.</p>
</dd>
<dt class="landingPageList"><a href="/ko/docs/Web/Guide/HTML/Content_categories">HTML 콘텐츠 카테고리</a></dt>
<dd class="landingPageList">
<p>HTML 요소는 공통 특성을 공유하는 요소끼리 묶는 콘텐츠 카테고리 한 가지 이상에 속할 수 있습니다. 콘텐츠 카테고리는 느슨한 관계로 서로 간에 어떤 관계를 형성하지는 않지만, 카테고리에서 공유하는 동작이나 관련 규칙을 정의하고 설명할 때, 특히 복잡한 세부사항을 포함할 때는 더욱 도움이 됩니다.</p>
</dd>
<dt class="landingPageList"><a href="/ko/docs/Web/HTML/Quirks_Mode_and_Standards_Mode">호환성 모드와 표준 모드</a></dt>
<dd class="landingPageList">호환성 모드와 표준 모드에 대한 역사적인 정보.</dd>
</dl>
<h2 class="landingPageList" id="관련_주제">관련 주제</h2>
<dl>
<dt><a href="/ko/docs/Web/HTML/Applying_color">CSS를 사용해 HTML 요소에 색 입히기</a></dt>
<dd>
<p>이 문서는 HTML 문서의 어떤 부분에 색을 적용할 수 있는지와, 이 때 사용할 수 있는 CSS 속성을 나열합니다. 예제와 함께 각종 도구로의 링크도 제공합니다.</p>
</dd>
</dl>
</div>
</div>
</section>
|
