From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- .../advanced_text_formatting/index.html | 478 ++++++++++++++ .../creating_hyperlinks/index.html | 338 ++++++++++ .../introduction_to_html/debugging_html/index.html | 179 +++++ .../document_and_website_structure/index.html | 267 ++++++++ .../getting_started/index.html | 725 +++++++++++++++++++++ .../html_text_fundamentals/index.html | 654 +++++++++++++++++++ .../ko/learn/html/introduction_to_html/index.html | 59 ++ .../marking_up_a_letter/index.html | 102 +++ .../the_head_metadata_in_html/index.html | 277 ++++++++ 9 files changed, 3079 insertions(+) create mode 100644 files/ko/learn/html/introduction_to_html/advanced_text_formatting/index.html create mode 100644 files/ko/learn/html/introduction_to_html/creating_hyperlinks/index.html create mode 100644 files/ko/learn/html/introduction_to_html/debugging_html/index.html create mode 100644 files/ko/learn/html/introduction_to_html/document_and_website_structure/index.html create mode 100644 files/ko/learn/html/introduction_to_html/getting_started/index.html create mode 100644 files/ko/learn/html/introduction_to_html/html_text_fundamentals/index.html create mode 100644 files/ko/learn/html/introduction_to_html/index.html create mode 100644 files/ko/learn/html/introduction_to_html/marking_up_a_letter/index.html create mode 100644 files/ko/learn/html/introduction_to_html/the_head_metadata_in_html/index.html (limited to 'files/ko/learn/html/introduction_to_html') diff --git a/files/ko/learn/html/introduction_to_html/advanced_text_formatting/index.html b/files/ko/learn/html/introduction_to_html/advanced_text_formatting/index.html new file mode 100644 index 0000000000..3bf2b758d7 --- /dev/null +++ b/files/ko/learn/html/introduction_to_html/advanced_text_formatting/index.html @@ -0,0 +1,478 @@ +--- +title: Advanced text formatting +slug: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting +translation_of: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}
+ +

텍스트 서식에 있어서  HTML text fundamentals 에서 이야기 하지 않은 수많은 요소들이 있습니다. 이 글에서 설명하는 요소들은 비교적 많이 알려져 있지않지만 여전히 유용합니다. (그리고 이것은 완전한 목록이 아닙니다.). 이 글에서 여러분은 인용구, 서술문, 컴퓨터 코드 및 관력 텍스트, 첨자, 위첨자, 연락처 정보 등을 표시하는 방법에 대해 알아봅시다.

+ + + + + + + + + + + + +
요구 기술:Getting started with HTML 에 설명된 기본적인 HTML 숙련도. HTML text fundamentals 에서 설명하는 텍스트 포맷팅에 대한 지식.
목표: +

비교적 알려지지 않은 HTML 요소들을 사용하여 고급 시맨틱 기능을 사용하여 HTML을 구성하는 방법을 학습합니다.

+
+ +

Description lists

+ +

HTML text fundamentals 에서 mark up basic lists 를 볼 수 있습니다. 하지만 해당 글에는 여러분이 앞으로 종종 마주할 세 번째 리스트 타입인 description lists에 대해선 언급하지 않았습니다. 이 리스트의 목적은 용어 및 정의, 질문 및 답변과 같은 일련의 항목 및 관련 설명을 표시하는 것입니다.  아래의 예시를 살펴봅시다.

+ +
soliloquy
+In drama, where a character speaks to themselves, representing their inner thoughts or feelings and in the process relaying them to the audience (but not to other characters.)
+monologue
+In drama, where a character speaks their thoughts out loud to share them with the audience and any other characters present.
+aside
+In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought or piece of additional background information
+ +

Description lists 는 다른 타입의 리스트와 다르게 {{htmlelement("dl")}} 태그를 사용합니다. 용어, 질문과 같은 상위 항목은 {{htmlelement("dt")}} (description term) 요소를 사용하고,\ 정의, 답변과 같은 하위 항목은 {{htmlelement("dd")}} (description definition) 요소를 사용합니다. 이해를 돕기위해 아래의 마크업 예시가 준비되어 있습니다.

+ +
<dl>
+  <dt>soliloquy</dt>
+  <dd>In drama, where a character speaks to themselves, representing their inner thoughts or feelings and in the process relaying them to the audience (but not to other characters.)</dd>
+  <dt>monologue</dt>
+  <dd>In drama, where a character speaks their thoughts out loud to share them with the audience and any other characters present.</dd>
+  <dt>aside</dt>
+  <dd>In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought or piece of additional background information.</dd>
+</dl>
+ +

브라우저에서 제공하는 기본 스타일에 의해서 정의, 답변과 같은 하위 항목에 대해서 들여쓰기가 적용됩니다.  현재 보고계시는 description list 는 MDN에서 제공하는 스타일이 적용되어 있습니다. 이는 브라우저에서 제공하는 기본 스타일과 매우 유사하게 정의 되어 있습니다만, 추가적으로 정의된 스타일입니다.

+ +
+
soliloquy
+
In drama, where a character speaks to themselves, representing their inner thoughts or feelings and in the process relaying them to the audience (but not to other characters.)
+
monologue
+
In drama, where a character speaks their thoughts out loud to share them with the audience and any other characters present.
+
aside
+
In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought or piece of additional background information.
+
+
+ +

아래의 예시와 같이 하나의 <dt> 에는 여러개의 <dd> 가 존재할 수 있습니다. 

+ +
<dl>
+  <dt>aside</dt>
+  <dd>In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought, or piece of additional background information.</dd>
+  <dd>In writing, a section of content that is related to the current topic, but doesn't fit directly into the main flow of content so is presented nearby (often in a box off to the side.)</dd>
+</dl>
+ +
+
aside
+
In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought or piece of additional background information.
+
In writing, a section of content that is related to the current topic, but doesn't fit directly into the main flow of content so is presented nearby (often in a box off to the side.)
+
+
+ +

추가학습: 일련의 정의 표시

+ +

description list 를 직접 시도해볼 시간입니다. input 필드에 요소들을 추가하여 output 필드에 description list 로 표시되도록 하십시오. 원하시는 경우에 추가적인 요소들을 추가하셔도 좋습니다.

+ +

실수를 하셨을 경우에는, Reset 버튼을 통해서 재시작하실 수 있습니다. 해답을 찾지 못하셨을 경우에 Show solution 버튼을 통해서 해답을 보실 수 있습니다.

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 500) }}

+ +

인용구

+ +

HTML에는 인용구 표시에 사용할 수 있는 요소가 존재합니다. 해당 요소는 블록 또는 인라인 요소인지에 따라서 다르게 표시됩니다.

+ +

Blockquotes

+ +

블록 레벨 컨텐츠의 섹션(문단, 여러 단락, 리스트등)이 인용된 경우, 이를 나타내는 <blockquote>요소로 감싸야합니다. 그리고 cite 속성에 출처를 표기합니다. 아래의 예시는 MDN <blockquote> 요소 페이지를 인용한 것 입니다.

+ +
<p>The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or <em>HTML Block
+Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>
+ +

이것을 block quote 로 변경하기 위해서 아래와 같이 할 수 있습니다.

+ +
<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
+  <p>The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or <em>HTML Block
+  Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>
+</blockquote>
+ +

브라우저 기본 스타일은 인용구를 표현할 때, 들여쓰기 된 단락으로 나타냅니다. MDN은 추가적인 스타일링과 함께 이를 나타냅니다.

+ +
+

The HTML <blockquote> Element (or HTML Block Quotation Element) indicates that the enclosed text is an extended quotation.

+
+ +

Inline quotations

+ +

인라인 인용구는 <q> 요소를 사용한다는 점만 제외하면 블럭 인용구와 동일하게 동작합니다. 아래의 마크업 예시는 MDN <q> 페이지의 인용문을 포함합니다.

+ +
<p>The quote element — <code>&lt;q&gt;</code> — is <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">intended
+for short quotations that don't require paragraph breaks.</q></p>
+ +

브라우저 기본 스타일은 인라인 인용구를 따옴표로 묶은 일반 텍스트로 표현합니다.

+ +

The quote element — <q> — is intended for short quotations that don't require paragraph breaks.

+ +

Citations

+ +

{{htmlattrxref("cite","blockquote")}}요소의 컨텐츠는 유용하게 보이지만 안타깝게도 브라우저, 스크린 리더 등은 이를 이용해서 할 수 있는 것이 많지 않습니다. 브라우저는  javascript나 CSS로 여러분이 직접 해결책을 제시하지 않는다면 cite  컨텐츠를 화면에 표시할 방법이 없습니다. 페이지에서 인용 출처를 화면에 나타나게 하고 싶다면 <cite> 요소를 사용하는 것이 더 좋습니다. 이는 이름 그대로 출처를 포함하기 위해서 사용됩니다. — <cite> 요소 안에 있는 출처에 대한 링크를 연결할 수 있습니다.

+ +
<p>According to the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
+<cite>MDN blockquote page</cite></a>:
+</p>
+
+<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
+  <p>The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or <em>HTML Block
+  Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>
+</blockquote>
+
+<p>The quote element — <code>&lt;q&gt;</code> — is <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">intended
+for short quotations that don't require paragraph breaks.</q> -- <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">
+<cite>MDN q page</cite></a>.</p>
+ +

Citations are styled in italic font by default. You can see this code at work in our quotations.html example.

+ +

추가학습: 누가 말했어?

+ +

다른 실습 과제를 할 시간입니다! 이번 예제에서는 아래 항목을 수행하고자 합니다.

+ +
    +
  1. 중간에 위치한 문단을 cite 속성을 지닌 블럭 인용구로 변경하십시오.
    2. +
  2. 세 번째 문단의 일부를 cite 속성을 지닌 인라인 인용구로 변경하십시오.
    3. +
  3. 각 링크에 <cite> 요소를 포함시키십시오.
    4. +
+ +

적절한 출처를 찾기 위해서 온라인 검색을 이용하십시오.

+ +

실수를 하셨을 경우에는, Reset 버튼을 통해서 재시작하실 수 있습니다. 해답을 찾지 못하셨을 경우에 Show solution 버튼을 통해서 해답을 보실 수 있습니다.

+ + + +

{{ EmbedLiveSample('Playable_code_2', 700, 500) }}

+ +

약어

+ +

웹을 둘러 볼 때 <abbr> 요소를 꽤 많이 볼 수 있습니다. 이는 머리 글자 또는 약어를 나타내는데 사용됩니다. title 속성을 통해 원래의 용어를 나태날 수 있습니다. 몇가지 예제를 살펴 보겠습니다.

+ +
<p>We use <abbr title="Hypertext Markup Language">HTML</abbr> to structure our web documents.</p>
+
+<p>I think <abbr title="Reverend">Rev.</abbr> Green did it in the kitchen with the chainsaw.</p>
+ +

위의 코드는 아래와 같이 보입니다. 용어의 전체 뜻은 마우스를 올려 놓으면 툴팁에 표시됩니다.

+ +

We use HTML to structure our web documents.

+ +

I think Rev. Green did it in the kitchen with the chainsaw.

+ +
+

Note: 약어를 나타내기 위해 <abbr> 과 동일하게 사용할 수 있는 <acronym> 가 존재합니다. 이는 사용중지 되었으며 브라우저에서도 호환되지 않는 경우가 있습니다. 따라서 <abbr> 을 대신 사용하는 것을 추천드립니다.

+
+ +

추가학습: 약어 만들기

+ +

아래의 간단한 실습 과제를 통해 약어 사용에 대한 학습을 하고자 합니다. 아래의 샘플을 그대로 사용하시거나 여러분의 샘플로 교체 하실 수 있습니다. 

+ + + +

{{ EmbedLiveSample('Playable_code_3', 700, 350) }}

+ +

연락처 세부 사항 표시

+ +

HTML 에서 <address> 태그를 이용해서 연락처 세부 정보를 표시할 수 있습니다. 이것은 단순히 연락처 정보를 표시하는 것입니다.

+ +
<address>
+  <p>Chris Mills, Manchester, The Grim North, UK</p>
+</address>
+ +

그러나 기억해야 할 것은 <address> 요소는 HTML 문서를 작성한 사람의 연락처 정보를 표시하기 위해서 사용되어야 한다는 것입니다. 따라서 Chris 가 마크 업이 표시된 문서를 작성한 경우에만 위의 예제가 정상입니다. 아래와 같은 예제도 괜찮습니다.

+ +
<address>
+  <p>Page written by <a href="../authors/chris-mills/">Chris Mills</a>.</p>
+</address>
+ +

위첨자와 아래 첨자

+ +

여러분은 종종 날짜, 화학 공식 및 수학 방적식과 같은 항목을 표시 할 때 올바른 의미를 갖도록 위첨자 아래 첨자를 사용해야 할 수도 있습니다. <sup> 과 <sub> 요소들은 이를 위해 사용할 수 있습니다.

+ +
<p>My birthday is on the 25<sup>th</sup> of May 2001.</p>
+<p>Caffeine's chemical formula is C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p>
+<p>If x<sup>2</sup> is 9, x must equal 3 or -3.</p>
+ +

표시될 결과는 아래와 같습니다.

+ +

My birthday is on the 25th of May 2001.

+ +

Caffeine's chemical formula is C8H10N4O2.

+ +

If x2 is 9, x must equal 3 or -3.

+ +

컴퓨터 코드를 나타내기

+ +

HTML 을 이용해 컴퓨터 코드를 나타낼 때 아래와 같은 많은 요소들을 사용할 수 있습니다.

+ + + +

몇 가지 예를 살펴 보겠습니다. 이 예제들을 통해서 자유롭게 학습해보십시오. (다른 other-semantics.html 샘플 파일의 사본을 사용하실 수 있습니다).

+ +
<pre><code>var para = document.querySelector('p');
+
+para.onclick = function() {
+  alert('Owww, stop poking me!');
+}</code></pre>
+
+<p>You shouldn't use presentational elements like <code>&lt;font&gt;</code> and <code>&lt;center&gt;</code>.</p>
+
+<p>In the above JavaScript example, <var>para</var> represents a paragraph element.</p>
+
+
+<p>Select all the text with <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd>.</p>
+
+<pre>$ <kbd>ping mozilla.org</kbd>
+<samp>PING mozilla.org (63.245.215.20): 56 data bytes
+64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms</samp></pre>
+ +

위의 코드는 아래와 같이 표시됩니다.

+ +

{{ EmbedLiveSample('Representing_computer_code','100%',300, "", "", "hide-codepen-jsfiddle") }}

+ +

시간과 날짜 표시

+ +

HTML 은 기계가 읽을 수 있는 형식(machine-readable)으로 시간과 날짜를 표시하기 위한 <time> 요소를 제공합니다. 예를 들면 아래와 같습니다.

+ +
<time datetime="2016-01-20">20 January 2016</time>
+ +

이것이 왜 유용할까요? 인간이 날짜를 기록하는 방법에는 여러 가지가 있습니다. 위 날짜는 아래와 같이 나타낼 수 있습니다.

+ + + +

그러나 이러한 다른 형식들은 컴퓨터가 쉽게 인식할 수 없습니다. 페이지의 모든 이벤트 날짜를 자동으로 인식하여 캘린더에 삽입하려면 어떻게 해야합니까? <time> 요소를 사용하면 기계가 읽을 수 있는 명확한 시간 / 날짜를 첨부 할 수 있습니다.

+ +

아래의 기본 예지는 간단한 기계 판독 가능 날짜를 제공하지만 사용 가능한 다른 많은 옵션들이 존재합니다.

+ +
<!-- Standard simple date -->
+<time datetime="2016-01-20">20 January 2016</time>
+<!-- Just year and month -->
+<time datetime="2016-01">January 2016</time>
+<!-- Just month and day -->
+<time datetime="01-20">20 January</time>
+<!-- Just time, hours and minutes -->
+<time datetime="19:30">19:30</time>
+<!-- You can do seconds and milliseconds too! -->
+<time datetime="19:30:01.856">19:30:01.856</time>
+<!-- Date and time -->
+<time datetime="2016-01-20T19:30">7.30pm, 20 January 2016</time>
+<!-- Date and time with timezone offset-->
+<time datetime="2016-01-20T19:30+01:00">7.30pm, 20 January 2016 is 8.30pm in France</time>
+<!-- Calling out a specific week number-->
+<time datetime="2016-W04">The fourth week of 2016</time>
+ +

요약

+ +

HTML 텍스트 시맨틱에 대한 스터디가 끝났습니다. 이 과정에서 학습한 내용이 HTML 텍스트 요소의 전부가 아님을 명심하십시오. 우리는 필수 요소를 위주로 다루고 싶었고, 여러분이 일반적인 상황에서 보거나 적어도 흥미롭게 다가올 수 있는 더 일반적인 것들 중 일부를 다루려고 했습니다. 더 많은 HTML 요소를 찾으려면 HTML element reference 를 살펴보십시오.(Inline text semantics 섹션은 시작하기에 좋은 장소입니다.). 다음 문서에서는 HTML 문서의 다른 부분을 구성하는 데 사용할 HTML 요소를 살펴 보겠습니다.

+ +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}

+ +

In this module

+ + diff --git a/files/ko/learn/html/introduction_to_html/creating_hyperlinks/index.html b/files/ko/learn/html/introduction_to_html/creating_hyperlinks/index.html new file mode 100644 index 0000000000..73619df1cf --- /dev/null +++ b/files/ko/learn/html/introduction_to_html/creating_hyperlinks/index.html @@ -0,0 +1,338 @@ +--- +title: 하이퍼링크 만들기 +slug: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks +tags: + - a태그 + - 웹하이퍼링크 + - 하이퍼링크 +translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}
+ +

하이퍼 링크는 중요하다. — 웹을 웹답게 만들기 때문이다. 이 글에서는 링크를 만드는데 필요한 구문을 보여주고 링크의 모범 사례를 설명한다.

+ + + + + + + + + + + + +
미리 알아두면 좋은 지식들:기본적인 HTML 에 대한 친숙함, as covered in Getting started with HTML. HTML text formatting, as covered in HTML text fundamentals.
목표: +

하이퍼링크를 효과적으로 다루는 방법과 수많은 파일들을 함께 연결하는 방법을 배웁니다.

+
+ +

하이퍼링크란 무엇인가?

+ +

하이퍼링크는 웹이 제공하는 가장 흥미로운 혁신 중 하나입니다, 하이퍼링크는 웹이 시작된 이래 웹의 특성이었습니다. 그러나 하이퍼링크는 웹을 웹 다워보이도록 만들어줍니다. — 문서들을 다른 문서들과 연결시켜 주기도 하구요. 또는 우리가 원하는 다른 resource 들과 연결해주기도 합니다. 우리는 또한 문서들의 특정 부분들끼리 연결할 수 있죠.그리고 우리는 앱들을 단순한 웹 주소를 통해 이용하게 만들 수도 있습니다. (설치 혹은 여러가지 작업들을 필요로 하는 native 앱과 비교해보세요.) 거의 모든 web content 들은 링크로 바뀔 수 있는데요. 우리가 그것들을 클릭하거나 활성화시키면 웹 브라우저가 다른 웹 주소({{glossary("URL")}})로 갑니다. 

+ +
+

메모:  URL은 HTML 파일, 텍스트 파일, 이미지, 텍스트 문서들, 비디오와 오디오 파일들, 그리고 웹상에서 존재할 수 있는 어느 것이라 할지라도 연결할 수 있다.만약 웹 브라우저가 어떻게 파일을 보여주거나 다룰지 모른다면, 웹 브라우저는 당신이 파일을 열기를 원하는지 (만약 그렇다면, 파일을 열거나 처리하는 것에 대한 의무는 device에서 적절한 native 앱에게 넘겨질 겁니다.) 혹은 파일을 다운로드 하기를 원하는지 (만약 그렇다면, 당신은 그것을 나중에 다룰 수 있습니다.) 궁금해 할 것입니다.

+
+ +

예를 들면, BBC 홈페이지엔 많은 링크들이 있는데요. 그것들은 수많은 뉴스들 뿐만 아니라 다른 웹사이트들 (navigation functionality), 로그인/등록 페이지들 (user tools) 그리고 더 많은 다른 곳에도 연결되어 있습니다.

+ +

frontpage of bbc.co.uk, showing many news items, and navigation menu functionality

+ +

링크의 구조

+ +

A basic link is created by wrapping the text (or other content, see {{anch("Block level links")}}) you want to turn into a link inside an {{htmlelement("a")}} element, and giving it an {{htmlattrxref("href", "a")}} 속성은 (also known as a target) 사이트의 주소가 포함된 링크를 당신에게 줍니다.

+ +
<p>I'm creating a link to
+<a href="https://www.mozilla.org/en-US/">the Mozilla homepage</a>.
+</p>
+ +

위 코드의 결과는 다음과 같습니다:

+ +

나는 링크를 만들었다. the Mozilla homepage. 

+ +

title 속성에 부가적인 정보를 더하기

+ +

title;  속성은 해당 페이지에 어떤 종류의 정보가 포함되어 있는지 또는 알아야할 사항과 같은 링크에 대한 보충할만한 유용한 정보를 포함하기 위한 것을 나타낼때 사용한다.

+ +

예제 코드 :

+ +
<p>I'm creating a link to
+<a href="https://www.mozilla.org/en-US/"
+   title="The best place to find more information about Mozilla's
+          mission and how to contribute">the Mozilla homepage</a>.
+</p>
+ +

이것은 그리고 마우스를 오버했을때에 툴팁에 대한 기능도 제공해줄 수 있다.

+ +

제가 만든 링크 입니다. the Mozilla homepage.

+ +
+

Note: 링크 제목은 마우스 호버시에만 공개 된다.  이것은 웹 페이지를 탐색하기 위해 키보드에만 의존하는 사람들이 타이틀 정보에 접근하는데 어려움을 겪게 된다는 것을 의미한다. 만약 title의 정보가 페이지 사용에 있어서 정말로 중요하다면,  해당하는 정보를 일반 텍스트에 넣어줌으로써 모든 사용자가 접근할 수 있는 방식으로 제시해주어야한다.

+
+ +

능동학습: 링크를 만들어봅시다.

+ +

적극적으로 학습해 봅시다: local code 편집기를 사용해서 하나의 HTML document 를 만드세요. (소스코드: 템플릿 시작하기가 잘 될거에요.)

+ + + +

Block level 링크들

+ +

이전에 얘기했듯이, 여러분은 어떤 내용이든 link로 바꿀 수 있습니다. block level 요소들 이라고 할지라도요. 만약 링크로 바꾸고 싶은 이미지가 있다면, <a> 와 </a> 사이에 그 이미지를 넣으시기만 하시면 됩니다.

+ +
<a href="https://www.mozilla.org/en-US/">
+  <img src="mozilla-image.png" alt="mozilla logo that links to the mozilla homepage">
+</a>
+ +
+

메모: 나중에 보실 글에선 웹에서 이미지를 사용하는 것에 대해 더 많이 배우실 겁니다.

+
+ +

URL 과 path 에 대한 기본 지침

+ +

 link target 에 대해 완전히 이해하기 위해서, URL 과 파일 path에 대하여 이해하실 필요가 있습니다. 이번 시간에는 여러분께서 성취하실 필요가 있는 정보에 대해서 알려드릴게요.

+ +

URL, 혹은 Uniform Resource Locator 은 단순히 무언가가 웹상의 어디에 위치하는지 결정하는 하나의 텍스트 문자열이랍니다. 예를 들면, Mozilla's 영어 홈페이지는https://www.mozilla.org/en-US/이죠.

+ +

URL은 파일들을 찾기위해 path를 이용합니다. path는 당신이 관심있어 하는 파일이 파일 시스템 어디에 있는지 구체적으로 명시하구요. 디렉토리 구조에 대한 예제를 보시죠. (see the creating-hyperlinks directory.)

+ +

A simple directory structure. The parent directory is called creating-hyperlinks and contains two files called index.html and contacts.html, and two directories called projects and pdfs, which contain an index.html and a project-brief.pdf file, respectively

+ +

이 디렉토리 구조의 root는 creating-hyperlinks. 웹사이트를 로컬 단에서 다룰 때에는 전체 웹사이트가 모두 들어갈 수 있는 하나의 디렉토리를 가져야 할 것입니다. Root 안에서 우리는 index.html 파일과 contacts.html 파일을 갖습니다. 진짜 웹사이트 안에서 index.html 는 우리의 홈 페이지 또는 랜딩 페이지(웹사이트의 접속 포인트 또는 웹사이트의 특정 부분 이 되는 페이지)가 될 것입니다.  

+ +

또 Root 안에는 두 개의 디렉토리가 있습니다 — pdfs 와 projects. 이들은 각각 하나의 파일을 내부에 가지고 있습니다 — 각각 PDF (project-brief.pdf) 와 index.html 파일입니다.  당신은 두 개의 index.html 파일들을 각각 파일 시스템의 다른 위치에 있도록 해서 하나의 프로젝트 안에 가질 수 있습니다. 많은 웹 사이트들이 이렇게 하고 있습니다. 두번째 index.html는 아마 프로젝트와 관련된 정보의 메인 랜딩 페이지가 될 것입니다.

+ + + +
<p>Want to contact a specific staff member?
+Find details on our <a href="contacts.html">contacts page</a>.</p>
+ + + +
<p>Visit my <a href="projects/index.html">project homepage</a>.</p>
+ + + +
<p>A link to my <a href="../pdfs/project-brief.pdf">project brief</a>.</p>
+ +
+

Note: 필요한 경우 아래와 같이 이러한 기능의 여러 인스턴스를 복잡한 URL로 결합할 수 있다  ../../../complex/path/to/my/file.html.

+
+ +

Document fragments(문서 조각)

+ +

문서 상단이 아닌 HTML 문서 내부의 특정 부분(Document fragments(문서 조각)에 링크 할 수 있다. 그것을 하기 위해서 먼저 당신은 링크를 시키고 싶은 태그에 {{htmlattrxref("id")}} 속성을 넣어 주어야한다. 일반적으로는 특정 헤드라인에 연결하는 것이 타당하다.

+ +

예제:

+ +
<h2 id="Mailing_address">Mailing address</h2>
+ +

만약 특정 ID에 연결하려면 URL 끝에 해시/파운드 기호를 포함하면 된다,

+ +

예제:

+ +
<p>Want to write us a letter? Use our <a href="contacts.html#Mailing_address">mailing address</a>.</p>
+ +

Document fragments(문서 조각)를 단독으로 사용하여 동일한 문서의 다른 부분에 연결할 수 있다

+ +
<p>The <a href="#Mailing_address">company mailing address</a> can be found at the bottom of this page.</p>
+ +

절대 URL과 상대 URL

+ +

웹에서는 절대 URL과 상대 URL 두 가지의 용어를 찾아볼 수 있습니다.

+ +

절대 URL: 웹에서 정의된 상대적인 위치를 가리킵니다. {{glossary("protocol")}} and {{glossary("domain name")}} 포함. 예를 들어, 만약 index.html 페이지가 projects 폴더에 업로드 되면 이는 웹 서버의 root 안에 위치하게 되고 
+ 웹 사이트 도메인은 http://www.example.com,
+ 그 페이지는  http://www.example.com/projects/index.html
+ (혹은 그저 http://www.example.com/projects/, 대부분의 웹 서버는 URL에서 명시되지 않은 경우 페이지를 불러오기 위해 index.html 과 같은 랜딩 페이지를 찾습니다.)

+ +

절대 URL은 어디에 사용되든 항상 같은 장소를 가리킵니다.

+ +

상대 URL: 당신이 link하고 있는 파일(과거 섹션의 파일 같은)로부터 상대적인 위치를 가리킵니다. 예를 들어, 우리가 예시 파일 http://www.example.com/projects/index.html 에서 같은 디렉토리에 있는 PDF 파일로 link하고 싶다면, URL은 project-brief.pdf 과 같이 파일이름이어야 할 것입니다— 추가 정보는 필요 없습니다. 만약 PDF 파일이 projects 하위 디렉토리인 pdfs에 있다면, 상대 URL은 pdfs/project-brief.pdf 일 것입니다. (같은 URL로 http://www.example.com/projects/pdfs/project-brief.pdf.)

+ +

상대 URL은 파일의 실제 위치가 어디냐에 따라 다른 장소를 가리킬 것입니다. — 예를 들어 우리가 index.html 파일을 projects 디렉토리에서 웹사이트의 root로 옮긴다면 (최상위, 어느 디렉토리에도 포함되지 않음), pdfs/project-brief.pdf 의 상대 URL은 http://www.example.com/pdfs/project-brief.pdf를 가리킬 것입니다. 
+ http://www.example.com/projects/pdfs/project-brief.pdf를 가리키지 않습니다.

+ +

물론, 당신이 index.html 파일을 옮겼다고 해서 project-brief.pdf 파일과 pdfs 폴더의 위치가 갑자기 바뀌지는 않을 것입니다- 이것은 당신의 링크가 잘못된 곳을 가리키게 할 것이므로 클릭을 해도 제대로 작동하지 않을 것입니다. 주의하세요!

+ + + +

링크 작성시 지켜야할 몇가지 모범 사례에 대해 살펴보자

+ + + +

링크 명을 명확하게

+ +

당신의 페이지에 링크를 올리는 것은 쉽다. 그것으로는 충분하지 않다. 우리는 모든 독자들에게 현재 상황과 그들이 선호하는 도구에 상관없이 접근성 높은 우리의 링크를 만들 필요가 있다.

+ +

예를 들면:

+ + + +

구체적인 예제를 한번 살펴보자:

+ +

 link test: Download Firefox

+ +
<p><a href="https://firefox.com/">
+  Download Firefox
+</a></p>
+ +

Bad link text: Click here to download Firefox

+ +
<p><a href="https://firefox.com/">
+  Click here
+</a>
+to download Firefox</p>
+
+ +

Other tips:

+ + + +

가능하면 상대 링크 사용하기

+ +

위의 설명에서, 당신은 절대 링크를 항상 사용하는 것이 좋은 생각이라고 생각할 수 있다; 결국, 그것들은 페이지가 상대적인 링크처럼 움직였을 때 깨지지 않는다. 그러나 동일한 웹 사이트 내의 다른 위치에 연결할 때 가능한 한 상대 링크를 사용해야 한다(다른 웹 사이트에 연결할 때는 절대 링크를 사용해야 한다).

+ + + +

 비 HTML 리소스 연결 시 - 명확한 표식 남기기

+ +

PDF나 워드 문서와 같이 다운로드되거나 스트리밍되거나(비디오나 오디오와 같은) 다른 예상하지 못한 효과(팝업 창을 열거나 플래시 동영상을 로드)에 연결할 때는 명확한 표현을 추가하여 혼란을 줄 수 있어야 한다. 그것은 꽤 성가실 수 있다.

+ +

예를 들어:

+ + + +

여기서 사용할 수 있는 텍스트의 종류를 보려면 몇 가지 예를 살펴보십시오.:

+ +
<p><a href="http://www.example.com/large-report.pdf">
+  Download the sales report (PDF, 10MB)
+</a></p>
+
+<p><a href="http://www.example.com/video-stream/">
+  Watch the video (stream opens in separate tab, HD quality)
+</a></p>
+
+<p><a href="http://www.example.com/car-game">
+  Play the car game (requires Flash)
+</a></p>
+ +

다운로드 연결 시 download attribute 사용

+ +

브라우저에서 열지 않고 다운로드할 리소스에 연결하는 경우 다운로드 속성을 사용하여 기본 저장 파일 이름을 제공할 수 있다.

+ +

Firefox 39의 Windows 버전에 대한 다운로드 링크가 있는 예:

+ +
<a href="https://download.mozilla.org/?product=firefox-39.0-SSL&os=win&lang=en-US"
+   download="firefox-39-installer.exe">
+  Download Firefox 39 for Windows
+</a>
+ +

활동적인 학습: 탐색 메뉴 만들기

+ +

이 연습에서는 일부 페이지를 탐색 메뉴와 함께 연결하여 다중 페이지 웹 사이트를 생성하십시오. 이것은 웹사이트가 만들어지는 하나의 일반적인 방식이다. — 동일한 탐색 메뉴를 포함한 모든 페이지에 동일한 페이지 구조가 사용되기 때문에 링크를 클릭할 때 같은 장소에 머물고 있다는 인상을 주며, 다른 내용이 제기되고 있다.

+ +

다음 4개의 페이지의 로컬 복사본을 서로 동일한 디렉토리에 만들어야 한다 (전체 목록을 보려면 navigation-menu-start 디렉토리를 참조):

+ + + +

당신이 해야할 것:

+ +
    +
  1. 연결할 페이지의 이름이 포함된 순서 없는 목록을 한 페이지의 지정된 위치에 추가하십시오. 네비게이션 메뉴는 보통 링크의 목록일 뿐이므로 의미적으로 OK이다.
    2. +
  2. 각 페이지 이름을 해당 페이지 링크로 변경하십시오.
    3. +
  3. Navigation 메뉴를 각 페이지에 복사하십시오.
    4. +
  4. 각 페이지에서 동일한 페이지에 대한 링크만 제거하십시오. — 페이지에 대한 링크가 포함된다는 것은 혼란스럽고 의미가 없으며, 링크가 부족하면 현재 어떤 페이지에 있는지 시각적으로 잘 알 수 있다.
    5. +
+ +

완성된 예는 다음과 같다:

+ +

An example of a simple HTML navigation menu, with home, pictures, projects, and social menu items

+ +
+

Note: 만약 당신이 막히거나, 당신이 그것을 제대로 가지고 있는지 확신할 수 없다면, 당신은 정확한 답을 보기 위해 navigation-menu-marked-up 디렉토리를 확인할 수 있다.

+
+ +

이메일 링크

+ +

클릭했을 때 리소스나 페이지에 연결하지 않고 새 발신 전자 메일 메시지를 여는 링크나 단추를 만들 수 있다.

+ +

이것은 {{HTMLElement("a")}} 태그안에 mailto: URL 스키마를 사용하여 구현할 수 있다.

+ +

가장 기본적이고 일반적으로 사용되는 형태의 mailto: 링크는 단순히 대상 수신인의 이메일 주소를 표시한다.

+ +

예를 들면:

+ +
<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>
+
+ +

이렇게 되면 다음과 같은 링크가 생성된다:  Send email to nowhere.

+ +

사실, 이메일 주소는 심지어 선택사항이다. 그것을 생략하면(즉, 당신의 {{htmlattrxref("href", "a")}} 아직 목적지 주소가 지정되지 않은 사용자의 메일 클라이언트에 의해 새로운 발신 이메일 창이 열린다. 이것은 종종 사용자가 선택한 주소로 이메일을 보내기 위해 클릭할 수 있는 "공유" 링크로서 유용하다.

+ +

세부 사항 지정하기

+ +

이메일 주소 외에도 다른 정보를 제공할 수 있다. 실제로 표준 메일 헤더 필드는 사용자가 제공하는 mailto URL에 추가할 수 있다. 이것들 중 가장 일반적으로 사용되는 것은 "subject", "cc", and "body"(참된 헤더 필드는 아니지만 새 이메일에 대한 짧은 내용 메시지를 지정할 수 있음)이다. 각 필드와 그 값은 조회 용어로 지정된다.

+ +

아래 예제가 cc, bcc, subject and body 를 포함한다.:

+ +
<a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&amp;subject=The%20subject%20of%20the%20email &amp;body=The%20body%20of%20the%20email">
+  Send mail with cc, bcc, subject and body
+</a>
+ +
+

Note: 각 필드의 값은 URL로 인코딩되어야 한다(즉, 출력되지 않은 문자 및 percent-escaped). 또한 mailto: URL의 각 필드를 구분하는 & 의 사용에 유의하십시오. 이것은 표준 URL 쿼리 표기법입니다.

+
+ +

여기 다른 몇 가지 mailto URL 샘플들이 있다:

+ + + +

요약

+ +

이제 링크는 여기까지입니다, 어쨌든! 나중에 스타일링을 시작하면 링크로 돌아간다. 다음 HTML에서는 텍스트 의미론(Text Semantics)으로 돌아가서 유용하게 사용할 수 있는 고급/비정상적인 기능을 살펴보도록 하겠다. — 다음 목적지는 고급 텍스트 서식에 대해 알아볼 것이다.

+ +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}

diff --git a/files/ko/learn/html/introduction_to_html/debugging_html/index.html b/files/ko/learn/html/introduction_to_html/debugging_html/index.html new file mode 100644 index 0000000000..6b359dce5c --- /dev/null +++ b/files/ko/learn/html/introduction_to_html/debugging_html/index.html @@ -0,0 +1,179 @@ +--- +title: HTML 디버깅 +slug: Learn/HTML/Introduction_to_HTML/Debugging_HTML +translation_of: Learn/HTML/Introduction_to_HTML/Debugging_HTML +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}
+ +

HTML을 작성을 할 수 있지만, 문제가 생겼을 때  코드의 오류가 발생한 부분을 해결할 수 없나요? 이 기사에서는 HTML의 오류를 찾고 수정하는 데 도움이되는 몇 가지 도구를 소개합니다.

+ + + + + + + + + + + + +
선행사항:HTML이 익숙해야 합니다. 다음문서를 이해하는 정도면 충분합니다. HTML로 시작하기, HTML 텍스트 기본사항, and 하이파링크 만들기.
목표:HTMl에서 문제를 찾기위해 디버깅 툴을 사용하는 기본적인 방법을 배웁니다.
+ +

디버깅은 무섭지 않아요.

+ +

여러분이 원하든 원하지않든 무언가 잘못되면 코드가 동작하지 않거나 검파일 애러가 나는 무시무시한 순간이 다가옵니다. 다음과 같이 말이죠

+ +

아래는 Rust 언어로 작성된 간단한 프로그램을 {{glossary ( "compile")}}할 때 발생한 오류를 보여줍니다.

+ +

A console window showing the result of trying to compile a rust program with a missing quote around a string in a print statement. The error message reported is error: unterminated double quote string.

+ +

여기나온 오류 메시지는 상대적으로 이해하기 쉽습니다. "끝나지 않은 큰 따옴표 문자열". 애러 내용을 보면 코드 2번째 줄의 println! (Hello, world! ");에 큰 따옴표가 누락 된 것을 금방 볼 수 있습니다. 하지만 프로그램이 커질수록 오류 메시지는 점점더 복잡해지고 해석하기가 쉽지 않아집니다. 단순한 경우라 할지라도 Rust에 대해 전혀 모르는 사람에게 약간 무섭게 보일 수 있습니다.(보통은 점점 무서워지죠..)

+ +

그래도 디버깅을 무서워하지 않으셔도 됩니다! 프로그래밍 언어나 코드를 작성하고 디버깅하는 데 있어 중요한 것은 언어와 도구에 익숙해지는 것입니다. (익숙해져야 합니다!)

+ +

HTML과 디버깅

+ +

HTML은 Rust만큼 복잡하지 않습니다. HTML은 브라우저가 구문 분석하기 전에 다른 형식으로 컴파일되지 않으며 결과를 표시합니다 (해석되지 않고 컴파일되지 않음). 그리고 HTML의 {{glossary ( "element")}} 구문은 Rust, {{glossary ( "JavaScript")}} 또는 {{glossary ( "Python")}}과 같은 "실제 프로그래밍 언어"보다 이해하기 쉽습니다. 브라우저가 HTML을 구문 분석하는 방식은 프로그래밍 언어가 실행되는 방식보다 훨씬 유연(permissive)합니다. 이는 좋은 점이기도 하지만 나쁜 점이기도 합니다.

+ +

허용 코드

+ +

그렇다면 유연함(permissive)이란 무엇일까요? 음, 일반적으로 코드에서 뭔가 잘못했을 때, 두 가지 주요 유형의 오류가 발생합니다.

+ + + +

브라우저 자체에서 구문 분석을하기 때문에 HTML 자체는 문법 오류가 발생하지 않으므로 문법 오류가 있어도 페이지가 계속 표시됩니다. 브라우저에는 잘못 작성된 마크 업을 해석하는 방법을 설명하는 규칙이 내장되어 있으므로 여러분이 생각한대로 결과가 나오지 않더라도 HTML페이지가 표시됩니다. 물론 문제가 될 수 있습니다!

+ +
+

Note: 웹이 처음 만들어지면 사람들이 자신의 콘텐트를 게시 할 수 있도록 허용하는 것이 문법이 정확한지 확인하는 것보다 중요하기 때문에 HTML은 허용 된 방식으로 구문 분석됩니다. 처음부터 웹 사이트가 문법오류에 엄격했다면 웹은 오늘날처럼 인기가 있지 않았을 것입니다.

+
+ +

자발적 학습 : Permissive한 코드를 배웁니다.

+ +

유연한 성질의 HTML 코드를 배울 시간입니다.

+ +
    +
  1. 첫째로,  우리의 debug-example demo를 다운로드하고 Local에 저장하세요. This demo is deliberately written to have some errors in it for us to explore (the HTML markup is said to be badly-formed, as opposed to well-formed).
    2. +
  2. Next, open it in a browser. You will see something like this:A simple HTML document with a title of HTML debugging examples, and some information about common HTML errors, such as unclosed elements, badly nested elements, and unclosed attributes.
    3. +
  3. This immediately doesn't look great; let's look at the source code to see if we can work out why (only the body contents are shown): + 
    <h1>HTML debugging examples</h1>
+
+<p>What causes errors in HTML?
+
+<ul>
+  <li>Unclosed elements: If an element is <strong>not closed properly,
+      then its effect can spread to areas you didn't intend
+
+  <li>Badly nested elements: Nesting elements properly is also very important
+      for code behaving correctly. <strong>strong <em>strong emphasised?</strong>
+      what is this?</em>
+
+  <li>Unclosed attributes: Another common source of HTML problems. Let's
+      look at an example: <a href="https://www.mozilla.org/>link to Mozilla
+      homepage</a>
+</ul>
    +
    4. +
  4. Let's review the problems: +
      +
    • The {{htmlelement("p","paragraph")}} and {{htmlelement("li","list item")}} elements have no closing tags. Looking at the image above, this doesn't seem to have affected the markup rendering too badly, as it is easy to infer where one element should end and another should begin.
      • +
    • The first {{htmlelement("strong")}} element has no closing tag. This is a bit more problematic, as it isn't easy to tell where the element is supposed to end. In fact, the whole of the rest of the text has been strongly emphasised.
      • +
    • This section is badly nested: <strong>strong <em>strong emphasised?</strong> what is this?</em>. It is not easy to tell how this has been interpreted because of the previous problem.
      • +
    • The {{htmlattrxref("href","a")}} attribute value has a missing closing double quote. This seems to have caused the biggest problem — the link has not rendered at all.
      • +
    +
    5. +
  5. Now let's look at the markup the browser has rendered, as opposed to the markup in the source code. To do this, we can use the browser developer tools. If you are not familiar with how to use your browser's developer tools, take a few minutes to review Discover browser developer tools.
    6. +
  6. In the DOM inspector, you can see what the rendered markup looks like: The HTML inspector in Firefox, with our example's paragraph highlighted, showing the text "What causes errors in HTML?" Here you can see that the paragraph element has been closed by the browser.
    7. +
  7. Using the DOM inspector, let's explore our code in detail to see how the browser has tried to fix our HTML errors (we did the review in Firefox; other modern browsers should give the same result): +
      +
    • The paragraphs and list items have been given closing tags.
      • +
    • It isn't clear where the first <strong> element should be closed, so the browser has wrapped each separate block of text with its own strong tag, right down to the bottom of the document!
      • +
    • The  incorrect nesting has been fixed by the browser like this: + 
      <strong>strong
+  <em>strong emphasised?</em>
+</strong>
+<em> what is this?</em>
      +
      • +
    • The link with the missing double quote has been deleted altogether. The last list item looks like this: + 
      <li>
+  <strong>Unclosed attributes: Another common source of HTML problems.
+  Let's look at an example: </strong>
+</li>
      +
      • +
    +
    8. +
+ +

HTML validation

+ +

So you can see from the above example that you really want to make sure your HTML is well-formed! But how? In a small example like the one seen above, it is easy to search through the lines and find the errors, but what about a huge, complex HTML document?

+ +

The best strategy is to start by running your HTML page through the Markup Validation Service — created and maintained by the W3C, the organization that looks after the specifications that define HTML, CSS, and other web technologies. This webpage takes an HTML document as an input, goes through it, and gives you a report to tell you what is wrong with your HTML.

+ +

The HTML validator homepage

+ +

To specify the HTML to validate, you can give it a web address, upload an HTML file, or directly input some HTML code.

+ +

Active learning: Validating an HTML document

+ +

Let's try this with our sample document.

+ +
    +
  1. First, load up the Markup Validation Service in one browser tab, if it isn't already.
    2. +
  2. Switch to the Validate by Direct Input tab.
    3. +
  3. Copy all the sample document's code (not just the body) and paste it into the large text area shown in the Markup Validation Service.
    4. +
  4. Press the Check button.
    5. +
+ +

This should give you a list of errors and other information.

+ +

A list of of HTML validation results from the W3C markup validation service

+ +

Interpreting the error messages

+ +

The error messages are usually helpful, but sometimes they are not so helpful; with a bit of practice you can work out how to interpret these to fix your code. Let's go through the error messages and what they mean. You'll see that each message comes with a line and column number to help you to locate the error easily.

+ + + +

If you can't work out what every error message means, don't worry about it — a good idea is to try fixing a few errors at a time. Then try revalidating your HTML to show what errors are left. Sometimes fixing an earlier error will also get rid of other error messages — several errors can often be caused by a single problem, in a domino effect.

+ +

You will know when all your errors are fixed when you see the following banner in your output:

+ +

Banner that reads "The document validates according to the specified schema(s) and to additional constraints checked by the validator."

+ +

요약

+ +

그래서 HTML을 디버깅하는 방법에 대해 소개합니다. 이 방법은 나중에 CSS, JavaScript 및 다른 유형의 코드를 디버깅 할 때 유용한 기술을 제공합니다. 이것은 또한 HTML 모듈 학습 입문의 끝 부분입니다. 이제 평가를 통해 스스로 테스트 할 수 있습니다. 첫 번째 것은 아래에 링크되어 있습니다.

+ +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}

+ +

In this module

+ + diff --git a/files/ko/learn/html/introduction_to_html/document_and_website_structure/index.html b/files/ko/learn/html/introduction_to_html/document_and_website_structure/index.html new file mode 100644 index 0000000000..868313807c --- /dev/null +++ b/files/ko/learn/html/introduction_to_html/document_and_website_structure/index.html @@ -0,0 +1,267 @@ +--- +title: Document and website structure +slug: Learn/HTML/Introduction_to_HTML/Document_and_website_structure +translation_of: Learn/HTML/Introduction_to_HTML/Document_and_website_structure +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}
+ +

당신의 페이지의 (단락 또는 이미지 같은) 개개의 파트를 정의할 뿐 아니라, {{glossary("HTML")}}은 웹 사이트의 구역을 정의하는 ("헤더", "네비게이션 메뉴", "메인 컨텐츠 칼럼"과 같은) 수많은 블록 수준 요소들로 웹 사이트를 자랑합니다. 이번 글은 어떻게 기본 웹 구조를 설계하고, 어떻게 그 구조를 나타내는 HTML을 작성하는지 살펴봅니다.

+ + + + + + + + + + + + +
선행 조건:Getting started with HTML의 HTML의 기본. HTML text fundamentals의 HTML 텍스트 형식. Creating hyperlinks의 하이퍼링크의 동작 방식.
목표:시멘틱 태그를 사용하여 문서 구조를 만드는 방법과 간단한 웹사이트 구조 만드는 방법을 배운다.
+ +

문서의 기본 섹션

+ +

웹페이지는 서로 많이 다르게 보일 수 있지만, 페이지가 전체화면 비디오 혹은 게임이거나 예술 프로젝트, 좋지 않은 구조를 가지고 있지 않은 이상에는 대부분 유사한 구성 요소를 가지고 있습니다.

+ +
+
header
+
일반적으로 큰 제목과 로고 등이 있는 큰 띠. 한 웹페이지에서 주요 정보가 있는 곳입니다.
+
navigation bar
+
홈 페이지의 메인 섹션으로 연결합니다; 대부분 메뉴 버튼이나 링크, 탭으로 표현됩니다. 헤더와 같이, 이 항목은 대부분 한 페이지로부터 다른 페이지로 넘어가도 구성으로 남아있습니다. — 웹 사이트에서 일관적이지 못한 네비게이션을 사용할 경우 방문자는 복잡함과 불만족스러움을 느낄 것입니다. 많은 웹 디자이너들은 네비게이션 바를 개별적인 구성 요소로 사용하기 보다 hearder bar의 일부로 다루지만 이는 필수 사항은 아닙니다; 사실 일부 사람들은 접근성을 위해서는 두 개로 나누는 것이 좋다고 주장하는데, 나뉜 경우 스크린 리더들이 두 특징들을 더 잘 읽을 수 있기 때문입니다.
+
main content
+
웹 페이지에서 가장 독특한 컨텐츠를 포함하고 있는 중심의 큰 부분으로, 예를 들어, 당신이 보고 싶어하는 비디오, 당신이 읽고 있는 주요 이야기, 당신이 보고 싶어하는 지도, 또는 뉴스 헤드라인 등이 있습니다. 물론 이 부분은 각 페이지마다 다른 웹 사이트의 한 부분입니다.  
+
sidebar
+
주변의 정보, 링크, 인용 부호, 광고 등입니다. 일반적으로 이는 메인 컨텐츠에 무엇이 포함되어 있느냐에 따라 다릅니다. (예를 들어 기사 페이지에서, sidebar는 작성자의 소개, 또는 관련 기사 링크를 포함할 것입니다.) 그러나 보조 navigation system으로서 되풀이되는 요소를 사용하는 경우도 찾아볼 수 있습니다. 
+
footer
+
페이지 바닥의 줄로 일반적으로 작은 정보, 저작권 정보, 또는 연락처 등을 포함하고 있습니다. (header와 같이) 일반적인 정보를 담고 있는 부분이지만 보통 중요하지 않거나 웹 사이트 자체에 부차적인 정보입니다. Footer는 또 가끔 {{Glossary("SEO")}} 목적으로 사용되는데, 인기 컨텐츠 바로가기 링크를 제공합니다.
+
+ +

"전형적인 웹사이트"는 다음과 같이 구성될 수 있습니다:

+ +

a simple website structure example featuring a main heading, navigation menu, main content, side bar, and footer.

+ +

컨텐츠 구조화를 위한 HTML

+ +

위에 보이는 간단한 예제는 아름답지는 않습니다. 하지만 전형적인 웹사이트 레이아웃을 보여주기에는 모자람이 없는 예제입니다. 어떤 웹사이트는 Column이 더 있을 수 있고, 더 복잡할 수 있습니다 하지만 아이디어가 있고 적절한 CSS를 활용한다면, 모든 요소를 활용하여 section별로 구분하여 당신이 원하는 모양으로 만들 수 있습니다. 하지만 이를 논의하기 전에, 우리는 semantic을 고려해서 (요소의 의미를 고려해서) 요소를 적재적소에 사용해야 합니다.

+ +

This is because visuals don't tell the whole story. We use color and font size to draw sighted users' attention to the most useful parts of the content, like the navigation menu and related links, but what about visually impaired people for example, who might not find concepts like "pink" and "large font" very useful?

+ +
+

Note: Colorblind people represent around 8% of the world population. Blind and visually impaired people represent roughly 4-5% of the world population (in 2012 there were 285 million such people in the world, while the total population was around 7 billion.)

+
+ +

In your HTML code, you can mark up sections of content based on their functionality — you can use elements that represent the sections of content described above unambiguously, and assistive technologies like screenreaders can recognise those elements and help with tasks like "find the main navigation", or "find the main content." As we mentioned earlier in the course, there are a number of consequences of not using the right element structure and semantics for the right job.

+ +

To implement such semantic mark up, HTML provides dedicated tags that you can use to represent such sections, for example:

+ + + +

Active learning: exploring the code for our example

+ +

Our example seen above is represented by the following code (you can also find the example in our Github repo). We'd like you to look at the example above, and then look over the listing below to see what parts make up what section of the visual.

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+
+    <title>My page title</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css">
+    <link rel="stylesheet" href="style.css">
+
+    <!-- the below three lines are a fix to get HTML5 semantic elements working in old versions of Internet Explorer-->
+    <!--[if lt IE 9]>
+      <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
+    <![endif]-->
+  </head>
+
+  <body>
+    <!-- Here is our main header that is used across all the pages of our website -->
+
+    <header>
+      <h1>Header</h1>
+    </header>
+
+    <nav>
+      <ul>
+        <li><a href="#">Home</a></li>
+        <li><a href="#">Our team</a></li>
+        <li><a href="#">Projects</a></li>
+        <li><a href="#">Contact</a></li>
+      </ul>
+
+       <!-- A Search form is another commmon non-linear way to navigate through a website. -->
+
+       <form>
+         <input type="search" name="q" placeholder="Search query">
+         <input type="submit" value="Go!">
+       </form>
+     </nav>
+
+    <!-- Here is our page's main content -->
+    <main>
+
+      <!-- It contains an article -->
+      <article>
+        <h2>Article heading</h2>
+
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p>
+
+        <h3>subsection</h3>
+
+        <p>Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.</p>
+
+        <p>Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.</p>
+
+        <h3>Another subsection</h3>
+
+        <p>Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus et manis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>
+
+        <p>Vivamus fermentum semper porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel odio. Maecenas convallis ullamcorper ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, is fringille sem nunc vet mi.</p>
+      </article>
+
+      <!-- the aside content can also be nested within the main content -->
+      <aside>
+        <h2>Related</h2>
+
+        <ul>
+          <li><a href="#">Oh I do like to be beside the seaside</a></li>
+          <li><a href="#">Oh I do like to be beside the sea</a></li>
+          <li><a href="#">Although in the North of England</a></li>
+          <li><a href="#">It never stops raining</a></li>
+          <li><a href="#">Oh well...</a></li>
+        </ul>
+      </aside>
+
+    </main>
+
+    <!-- And here is our main footer that is used across all the pages of our website -->
+
+    <footer>
+      <p>©Copyright 2050 by nobody. All rights reversed.</p>
+    </footer>
+
+  </body>
+</html>
+ +

Take some time to look over the code and understand it — the comments inside the code should also help you to understand it. We aren't asking you to do much else in this article, because the key to understanding document layout is writing a sound HTML structure, and then laying it out with CSS. We'll wait for this until you start to study CSS layout as part of the CSS topic.

+ +

HTML 레이아웃 요소의 세부 사항

+ +

It's good to understand the overall meaning of all the HTML sectioning elements in detail — this is something you'll work on gradually as you start to get more experience with web development. You can find a lot of detail by reading our HTML element reference. For now, these are the main definitions that you should try to understand:

+ + + +

Non-semantic wrappers

+ +

Sometimes you'll come across a situation where you can't find an ideal semantic element to group some items together or wrap some content. Sometimes you might want to just group a set of elements together to affect them all as a single entity with some {{glossary("CSS")}} or {{glossary("JavaScript")}}. For cases like these, HTML provides the {{HTMLElement("div")}} and {{HTMLElement("span")}} elements. You should use these preferably with a suitable {{htmlattrxref('class')}} attribute, to provide some kind of label for them so they can be easily targeted.

+ +

{{HTMLElement("span")}} is an inline non-semantic element, which you should only use if you can't think of a better semantic text element to wrap your content, or don't want to add any specific meaning. For example:

+ +
<p>The King walked drunkenly back to his room at 01:00, the beer doing nothing to aid
+him as he staggered through the door <span class="editor-note">[Editor's note: At this point in the
+play, the lights should be down low]</span>.</p>
+ +

In this case, the editor's note is supposed to merely provide extra direction for the director of the play; it is not supposed to have extra semantic meaning. For sighted users, CSS would perhaps be used to distance the note slightly from the main text.

+ +

{{HTMLElement("div")}} is a block level non-semantic element, which you should only use if you can't think of a better semantic block element to use, or don't want to add any specific meaning. For example, imagine a shopping cart widget that you could choose to pull up at any point during your time on an e-commerce site:

+ +
<div class="shopping-cart">
+  <h2>Shopping cart</h2>
+  <ul>
+    <li>
+      <p><a href=""><strong>Silver earrings</strong></a>: $99.95.</p>
+      <img src="../products/3333-0985/thumb.png" alt="Silver earrings">
+    </li>
+    <li>
+      ...
+    </li>
+  </ul>
+  <p>Total cost: $237.89</p>
+</div>
+ +

This isn't really an <aside>, as it doesn't necessarily relate to the main content of the page (you want it viewable from anywhere.) It doesn't even particularly warrant using a  <section>, as it isn't part of the main content of the page. So a <div> is fine in this case. We've included a heading as a signpost to aid screenreader users in finding it.

+ +
+

Warning: Divs are so convenient to use that it's easy to use them too much. As they carry no semantic value, they just clutter your HTML code. Take care to use them only when there is no better semantic solution and try to reduce their usage to the minimum otherwise you'll have a hard time updating and maintaining your documents.

+
+ +

Line breaks and horizontal rules

+ +

Two elements that you'll use occasionally and will want to know about are {{htmlelement("br")}} and {{htmlelement("hr")}}:

+ +

<br> creates a line break in a paragraph; it is the only way to force a rigid structure in a situation where you want a series of fixed short lines, such as in a postal address or a poem. For example:

+ +
<p>There once was a girl called Nell<br>
+Who loved to write HTML<br>
+But her structure was bad, her semantics were sad<br>
+and her markup didn't read very well.</p>
+ +

Without the <br> elements, the paragraph would just be rendered in one long line (as we said earlier in the course, HTML ignores most whitespace); with them in the code, the markup renders like this:

+ +

There once was a girl called Nell
+ Who loved to write HTML
+ But her structure was bad, her semantics were sad
+ and her markup didn't read very well.

+ +

<hr> elements create a horizontal rule in the document that denotes a thematic change in the text (such as a change in topic or scene). Visually it just look like a horizontal line. As an example:

+ +
<p>Ron was backed into a corner by the marauding netherbeasts. Scared, but determined to protect his friends, he raised his wand and prepared to do battle, hoping that his distress call had made it through.</p>
+<hr>
+<p>Meanwhile, Harry was sitting at home, staring at his royalty statement and pondering when the next spin off series would come out, when an enchanted distress letter flew through his window and landed in his lap. He read it hasily, and lept to his feet; "better get back to work then", he mused.</p>
+ +

Would render like this:

+ +

Ron was backed into a corner by the marauding netherbeasts. Scared, but determined to protect his friends, he raised his wand and prepared to do battle, hoping that his distress call had made it through.

+ +
+

Meanwhile, Harry was sitting at home, staring at his royalty statement and pondering when the next spin off series would come out, when an enchanted distress letter flew through his window and landed in his lap. He read it hasily and sighed; "better get back to work then", he mused.

+ +

간단한 웹사이트 계획하기

+ +

Once you've planned out the content of a simple webpage, the next logical step is to try to work out what content you want to put on a whole website, what pages you need, and how they should be arranged and link to one another for the best possible user experience. This is called {{glossary("Information architecture")}}. In a large, complex website, a lot of planning can go into this process, but for a simple website of a few pages this can be fairly simple, and fun!

+ +
    +
  1. 몇 요소들은 대부분의 페이지에 공통적으로 적용될 것이란 걸 명심하세요 — 네비게이션 메뉴나 footer 컨텐츠처럼. 예를 들어 비즈니스를 위한 페이지라면, 당신의 연락처를 각각의 페이지의 footer에 보이도록 하는 것은 좋은 생각입니다. 모든 페이지에 공통적으로 포함하고 싶은 것을 적어보세요.the common features of the travel site to go on every page: title and logo, contact, copyright, terms and conditions, language chooser, accessibility policy
    2. +
  2. 다음으로, 각 페이지의 구조를 간단한 스케치로 그리세요.아마 위의 우리의 간단한 웹사이트 같을 것입니다). 각 블럭의 기능을 적으세요.A simple diagram of a sample site structure, with a header, main content area, two optional sidebars, and footer
    3. +
  3. 이제 웹사이트에 포함시키길 원하는 (각 페이지에 공통적이지 않은) 다른 모든 컨텐츠를 brainstorm하세요 - 리스트에 모두 적어 내려가세요. A long list of all the features that we could put on our travel site, from searching, to special offers and country-specific info
    4. +
  4. 다음으로, 이 모든 컨텐츠들을 그룹화 해 다른 페이지에서 어떤 부분들이 함께할 수 있을지 생각할 수 있습니다. 이것은 {{glossary("Card sorting")}}이라는 기술과 매우 유사합니다.The items that should appear on a holiday site sorted into 5 categories: Search, Specials, Country-specific info, Search results, and Buy things
    5. +
  5. 이제 대략적인 사이트맵을 그려보세요 - 사이트의 각 페이지를 동그라미로 지정하고, 각 페이지 간 동작 흐름을 보여주기 위해 선을 그으세요. 홈페이지는 아마 가운데에 있고, 모두는 아니어도 대부분에 연결될 것 입니다; 작은 사이트 안의 대부분의 페이지는, 비록 예외는 있겠지만, 메인 네비게이션에서 사용할 수 있어야 합니다. 당신은 아마 이것들이 어떻게 보여져야 할지에 대한 설명도 적고 싶을 것입니다. A map of the site showing the homepage, country page, search results, specials page, checkout, and buy page
    6. +
+ +

Active learning: create your own sitemap

+ +

Try carrying out the above exercise for a website of your own creation. What would you like to make a site about?

+ +
+

Note: 작업물을 어딘가에 저장하세요; 나중에 필요할 수 도 있습니다.

+
+ +

Summary

+ +

At this point you should have a better idea about how to structure a web page/site. In the last article of this module, we'll study how to debug HTML.

+ +

See also

+ + + +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}

diff --git a/files/ko/learn/html/introduction_to_html/getting_started/index.html b/files/ko/learn/html/introduction_to_html/getting_started/index.html new file mode 100644 index 0000000000..319f8031db --- /dev/null +++ b/files/ko/learn/html/introduction_to_html/getting_started/index.html @@ -0,0 +1,725 @@ +--- +title: HTML 시작하기 +slug: Learn/HTML/Introduction_to_HTML/Getting_started +translation_of: Learn/HTML/Introduction_to_HTML/Getting_started +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}
+ +

이 문서는 HTML 의 기본적인 내용에 대한 글입니다. 이 글에서는 HTML 에 관련된 용어들(Element, Attribute ..)의 정의에 대해 설명할 것입니다. 또한 HTML이 무엇으로 이루어져 있는지(구성요소), 어떻게 구성되어 있는지(구조), 중요한 특징은 무엇인지에 대해 설명할 것입니다. 독자의 흥미를 위해 간단한 HTML 을 작성하는 과정도 포함되어 있습니다.

+ + + + + + + + + + + + +
사전 지식기본적인 컴퓨터의 이해, 기본 소프트웨어 설치하기, 파일 다루기의 기본적 지식.
목표HTML언어에 대해 익숙해지고, HTML을 이용하여 실습해봅니다.
+ +

HTML이란?

+ +

{{glossary("HTML")}} (Hypertext Markup Language,하이퍼텍스트 마크업 언어)는 프로그래밍 언어는 아니고, 우리가 보는 웹페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어입니다. 이는 개발자로 하여금 복잡하게도 간단하게도 프로그래밍 할 수 있습니다. HTML은 {{glossary("Element", "elements")}}로 구성되어 있으며, 이들은 적절한 방법으로 나타내고 실행하기 위해 각 컨텐츠의 여러 부분들을 감싸고 마크업 합니다. {{glossary("Tag", "tags")}} 는 웹 상의 다른 페이지로 이동하게 하는 하이퍼링크 내용들을 생성하거나, 단어를 강조하는 등의 역할을 합니다.  예를들어, 다음의 내용을 봅시다.

+ +
My cat is very grumpy
+ +

만약 다음의 문장을 그냥 그 자체로 표시하고 싶다면, 태그 중  ({{htmlelement("p")}})로 감싸 엘리먼트를 문단으로 명시할 수 있습니다.

+ +
<p>My cat is very grumpy</p>
+ +
+

참고: HTML 요소는 대소문자를 구분하지 않습니다. 그 말은 {{htmlelement("title")}} 요소는 <title>, <TITLE>, <Title>, <TiTlE> 들과 같이 사용할 수 있습니다. 하지만 대게는 가독성과 기타 이유때문에 소문자로 작성합니다.

+
+ +

HTML 요소(Element)의 구조

+ +

HTML에서의 요소에 대해 좀 더 알아봅시다.

+ +

+ +

엘리먼트의 주요 부분은 다음과 같습니다.

+ +
    +
  1. 여는 태그(Opening tag): 이것은 요소의 이름과(이 경우 p), 열고 닫는 꺽쇠 괄호로 구성됩니다. 요소가 시작(이 경우 단락의 시작 부분)부터 효과가 적용되기 시작합니다.
    2. +
  2. 닫는 태그(Closing tag): 이것은 요소의 이름 앞에 슬래시(/)가 있는것을 제외하면 여는 태그(opening tag)와 같습니다. 이것은 요소의 끝(이 경우 단락의 끝 부분)에 위치합니다.  닫는 태그를 적어주지 않는 것은 흔한 초심자의 오류이며, 이것은 이상한 결과를 낳게됩니다.
    3. +
  3. 내용(Content): 요소의 내용이며, 이 경우 단순한 텍스트이다.
    4. +
  4. 요소(Element): 여는 태그, 닫는 태그, 내용을 통틀어 요소(element)라고한다.
    5. +
+ +

실습: 첫 번째 HTML 요소 만들어보기

+ +

Input 영역 아래의 줄을 <em> 과 </em> 태그를 이용해서 감싸 보세요. (줄의 앞에 요소를 열기위해 <em>태그를, 뒤에는 요소를 닫기위해  </em>태그를 두세요.)  — 이것은 그 줄에 이탤릭강조효과를 줍니다! 여러분이 수정하는 결과는 실시간으로 Output 영역에서 볼 수 있습니다.

+ +

만약 실수를 했다면, 언제든지 Reset 버튼을 눌러서 초기화 할 수 있습니다. 만약 아무래도 답을 모르겠다면, Show solution 버튼을 이용해서 답을 볼 수 있습니다.

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 400, "", "", "hide-codepen-jsfiddle") }}

+ +

포함(내포:內包)된 요소(Nesting elements)

+ +

요소 안에 다른 요소가 들어갈 수 있습니다. 그런 요소는 내포되었다고 표현합니다. "고양이가 매우 사납다" 라는 문단을 강조하기 위해서, '매우'라는 단어를 강조하는 {{htmlelement("strong")}} 요소를 중첩해서 사용할 수 있습니다.

+ +
<p>My cat is <strong>very</strong> grumpy.</p>
+ +

요소 내표를 위해서는 확인해야 할 것이 있습니다. 위의 예제에서는 p 요소가 먼저 열렸고, 그리고 strong 요소가 열렸습니다. 그렇기 때문에 strong 요소가 먼저 닫힌 후에 p 요소가 닫혀야 합니다. 아래와 같은 문장은 중첩(重疊 : 서로 포개어(overlap 또는 stacking) 지거나, 엇갈려 겹쳐짐)되었으므로 잘못된 문장입니다.

+ +
<p>My cat is <strong>very grumpy.</p></strong>
+ +

요소 내포을 위해서, 내포되어 지는 요소는 다른 요소 속에서 열고 닫혀야 하며 다른 요소를 포함시키는 요소는 그 바깥에서 열고 닫혀야 합니다. 위의 잘못된 예제와 같이 내포가 제대로 되지 않았을 경우엔 웹 브라우저가 임의로 결과를 보일 것이며, 그것은 원치않는 것일 수 있습니다. 그런데 잘못 된 내포에도 불구하고 어떤 브라우저에서 이상없이 보일 수도 있습니다. 하지만 그 것은 그저 그 브라우저가 문법에 흐물흐물(permittable)해서 웬만한 오류는 자체 수정해서 브라우저 창에 rendering해주기 때문일 뿐 입니다. '웬만한 오류는 알아서 처리해 준다.' 는 부분에서 초보자는 특히 주의해야 합니다.

+ +

블럭 레벨 요소 vs 인라인 요소(Block versus inline elements)

+ +

HTML에는 두가지 종류의 요소(Element) 가 있습니다. 블록 레벨 요소(Block level element) 와 인라인 요소(Inline element) 입니다.

+ + + +

다음 예시를 봅시다:

+ +
<em>first</em><em>second</em><em>third</em>
+
+<p>fourth</p><p>fifth</p><p>sixth</p>
+
+ +

{{htmlelement("em")}} 은 인라인 요소(inline element) 이므로, 밑에서 보실 수 있듯이, 처음 세 개의 요소는 서로 같은 줄에, 사이에 공백이 없이 위치합니다. 한편, {{htmlelement("p")}} 는 블록 레벨 요소이므로, 각 요소들은 새로운 줄에 나타나며, 위와 아래에 여백이 있습니다 (여백은 브라우저가 문단에 적용하는 기본 CSS styling 때문에 적용됩니다).

+ +

{{ EmbedLiveSample('Block_versus_inline_elements', 700, 200, "", "") }}

+ +
+

참고: HTML5에서 요소 분류를 재정의 했습니다: Element content categories. 이러한 정의는 이전의 정의보다 더 정확하고 덜 모호하지만, "블록"과 "인라인"보다 이해하기 훨씬 더 복잡하기 때문에, 이 주제 내내 이 정의들을 고수할 것입니다.

+
+ +
+

참고: 이 주제에서 사용되는 "블럭(block)"과 "인라인(inline)"의 뜻은  the types of CSS boxes에서 사용하고 있는 같은 단어와 혼돈하면 안 됩니다.  기본적으로는 상관관계가 있지만 CSS 표시 유형을 변경해도 요소의 범주는 변경되지 않으며 요소가 포함할 수 있는 요소와 요소가 포함될 수 있는 요소에는 영향을 주지 않는다. HTML5가 이러한 용어들을 삭제했던 이유 중 하나는 이러한 다소 흔한 혼란을 막기 위해서였다.

+
+ +
+

참고: Block-level elements문서와 Inline elements문서를 참고하면 블럭과 인라인 요소에 대한 유용한 내용을 찾을 수 있습니다.

+
+ +

빈 요소(Empty elements)

+ +

모든 요소가 위에 언급된 여는 태그, 내용, 닫는 태그 패턴을 따르는 것은 아닙니다. 주로 문서에 무언가를 첨부하기 위해 단일 태그(Single tag)를 사용하는 요소도 있습니다. 예를 들어 {{htmlelement("img")}} 요소는 해당 위치에 이미지를 삽입하기 위한 요소입니다:

+ +
<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png">
+ +

위에 대한 결과는 다음과 같이 나올 것입니다:

+ +

{{ EmbedLiveSample('Empty_elements', 700, 300, "", "", "hide-codepen-jsfiddle") }}

+ +
+

참고: 빈 요소는 가끔 Void 요소로 불리기도 합니다.

+
+ +

속성(Attributes)

+ +

요소는 아래 이미지와 같이 속성을 가질 수 있습니다:

+ +

&amp;amp;lt;p class="editor-note">My cat is very grumpy&amp;amp;lt;/p>

+ +

속성은 요소에 실제론 나타내고 싶지 않지만 추가적인 내용을 담고 싶을 때 사용합니다. 위에는  나중에 스타일에 관련된 내용이나 기타 내용을 위해 해당 목표를 구분할 수 있는 class 속성을 부여했습니다.

+ +

속성을 사용할 때에는 아래 내용을 지켜야 합니다:

+ +
    +
  1. 요소 이름 다음에 바로 오는 속성은 요소 이름과 속성 사이에 공백이 있어야 되고, 하나 이상의 속성들이 있는 경우엔 속성 사이에 공백이 있어야 합니다.
    2. +
  2. 속성 이름 다음엔 등호(=)가 붙습니다.
    3. +
  3. 속성 값은 열고 닫는 따옴표로 감싸야 합니다.
    4. +
+ +

실습: 요소에 속성 추가하기

+ +

또다른 요소 중 하나인 {{htmlelement("a")}} 요소는 "anchor"를 의미하는데, 닻이 배를 항구로 연결하듯 텍스트를 감싸서 하이퍼링크로 만듭니다. 이 요소는 여러 속성을 가질 수 있지만 아래에 있는 두 개가 주로 사용됩니다:

+ + + +

당신이 즐겨 찾는 웹 사이트에 대한 링크를 만들기 위해 아래 입력 영역에서 행을 편집해 봅시다. 첫 번째로, <a> 요소를 추가합니다. 다음으로 href 속성과 title 속성을 추가합니다. 마지막으로 새 탭에서 링크를 열도록 target 속성을 지정합니다. 당신은 출력 영역에서 수정사항이 바로 변경되는 것을 볼 수 있습니다. 링크 위에 마우스를 올리면 title 속성 내용이 보여지고, 클릭하면 href 요소의 웹 주소로 이동할 것입니다. 각 요소의 이름과 그 값 사이에는 빈 칸이 필요하다는 것을 기억해야 합니다.

+ +

만약 실수했다면 Reset 버튼을 눌러 처음으로 돌아갈 수 있습니다. 도움이 필요한 경우에는 답을 Show solution 버튼을 눌러 정답을 볼 수 있습니다.

+ + + +

{{ EmbedLiveSample('Playable_code2', 700, 400, "", "", "hide-codepen-jsfiddle") }}

+ +

참과 거짓 속성(Boolean attributes)

+ +

때때로 값이 없는 속성을 볼 수 있을텐데 이것은 허용되는 것입니다. 이를 불 속성이라고 하며, 일반적으로 그 속성의 이름과 동일한 하나의 값만을 가질 수 있습니다.  예를 들어  {{htmlattrxref("disabled", "input")}} 속성을 양식 입력 요소에 할당하면 사용자가 데이터를 입력할 수 없도록 비활성화(회색으로 표시) 할 수 있습니다.

+ +
<input type="text" disabled="disabled">
+ +

이것은 다음과 같이 줄여쓸 수 있습니다. (당신이 참고할 수 있도록 비활성화를 하지 않은 형태도 포함했습니다.)

+ +
<input type="text" disabled>
+
+<input type="text">
+ +

이 둘은 다음과 같은 결과를 보여줍니다.

+ +

{{ EmbedLiveSample('Boolean_attributes', 700, 100, "", "", "hide-codepen-jsfiddle") }}

+ +

속성값의 따옴표 생략

+ +

웹을 둘러보면 따옴표가 없는 속성값을 포함한 온갖 이상한 마크업 스타일을 볼 것입니다. 어떤 상황에선 이런 것이 허용되지만, 다른 상황에서는 당신의 마크업 형식을 망쳐버립니다. 이전에 작성한 코드에서 우리는 href 속성만 있는 기본적인 버전을 작성했습니다.

+ +
<a href=https://www.mozilla.org/>favorite website</a>
+ +

하지만 여기에 title 속성을 추가하면 문제가 발생합니다.

+ +
<a href=https://www.mozilla.org/ title=The Mozilla homepage>favorite website</a>
+ +

이 때 브라우저는 당신의 마크업을 잘못 해석해서 title이 세 개의 속성값을 가진다고 생각할 것입니다. title 속성값 "The"와 두 개의 불 속성값 Mozilla, homepage라고 말이죠. 이 것은 우리가 의도한 것도 아닐 뿐더러 아래의 예시처럼 오류가 발생하거나 예상치 못한 동작을 할 수도 있습니다. 링크 위에 마우스를 올려 title이 어떻게 보이는지 확인해 보세요.

+ +

{{ EmbedLiveSample('Omitting_quotes_around_attribute_values', 700, 100, "", "", "hide-codepen-jsfiddle") }}

+ +

우리는 항상 속성값에 따옴표를 붙이라고 조언합니다. 이런 오류를 피할 수도 있고, 코드의 가독성도 좋아지기 때문입니다.

+ +

작은 따옴표, 큰 따옴표?

+ +

이 글에서 모든 속성값은 큰 따옴표에 둘러싸여 있는 것을 볼 수 있습니다. 하지만 당신은 어떤 사람의 HTML에서 작은 따옴표를 볼 수 있을 것입니다. 이 것은 스타일의 문제로, 당신이 좋아하는 방법을 사용하면 됩니다. 아래 두 문장은 똑같이 동작합니다.

+ +
<a href="http://www.example.com">A link to my example.</a>
+
+<a href='http://www.example.com'>A link to my example.</a>
+ +

주의해야할 점은 두 개를 섞어 쓰면 안된다는 것입니다. 다음은 잘못 사용한 예입니다.

+ +
<a href="http://www.example.com'>A link to my example.</a>
+ +

만약 한 가지 따옴표를 사용했다면 다른 따옴표로 속성값을 둘러싸서 오류를 방지할 수 있습니다.

+ +
<a href="http://www.example.com" title="Isn't this fun?">A link to my example.</a>
+ +

하지만 만약 당신이 따옴표 안에 같은 따옴표를 사용하고 싶다면(작은 따옴표든 큰 따옴표든) 따옴표를 표시하기 위해서 HTML entities를 사용하세요. 예를 들어 이렇게 하면 잘못됩니다.

+ +
<a href='http://www.example.com' title='Isn't this fun?'>A link to my example.</a>
+ +

그래서 이렇게 바꿔주면 잘 작동합니다.

+ +
<a href='http://www.example.com' title='Isn&#39;t this fun?'>A link to my example.</a>
+ +

HTML 문서의 구조

+ +

That wraps up the basics of individual HTML elements, but they aren't very useful on their own. 이제 어떻게 개별 요소를 결합해 전체 HTML 페이지를 구성하는지에 대해 살펴봅시다.

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>My test page</title>
+  </head>
+  <body>
+    <p>This is my page</p>
+  </body>
+</html>
+ +

여기를 보면,

+ +
    +
  1. <!DOCTYPE html>: 문서 형식을 나타냅니다.  HTML 초창기에 (1991~2년) doctype은 HTML 페이지가 자동 오류 검사나 다른 유용한 것이 가능한 좋은 HTML을 의미하는 연결고리처럼 작동하는 것을 뜻했습니다. 이런 형식으로 사용했습니다. + + 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    + 하지만 요즘에는 아무도 신경쓰지 않으며, 그저 모든 것이 제대로 작동하기 위해 포함되어야 하는 역사적 유물일 뿐입니다. <!DOCTYPE html> 은 유효한 문서 형식을 나타내는 짧은 문장이고, 이 것만 알고 있으면 됩니다.
    2. +
  2. <html></html>: {{htmlelement("html")}} 요소입니다. 이 요소는 전체 페이지의 콘텐츠를 포함하며, 기본 요소로도 알려져 있습니다.
    3. +
  3. <head></head>: <head> 요소입니다. 이 요소는 홈페이지 이용자에게는 보이지 않지만 검색 결과에 노출 될 키워드, 홈페이지 설명, CSS 스타일, character setdeclaration 등 HTML 페이지의 모든 내용을 담고 있습니다. 자세한 내용은 다음 장에서 다룹니다.
    4. +
  4. <meta charset="utf-8">: 이 요소는 HTML 문서의 문자 인코딩 설정을 UTF-8로 지정하는 것이며 예시에서 지정한 UTF-8에는 전세계에서 사용되는 언어에 대한 대부분의 문자가 포함됩니다. 이 설정을 사용하면 페이지에 포함 된 모든 텍스트 내용을 처리 할 수 있습니다. 이것을 설정하면 나중에 문자 인코딩과 관련된 일부 문제를 피하는 데 도움이 될 수 있으므로 문자 인코딩 설정을 하지 않을 이유가 없습니다.
    5. +
  5. <title></title>: {{htmlelement ( "title")}} 요소입니다. 이 요소를 사용하면 페이지 제목이 설정되며 페이지가 로드되는 브라우저 탭에 표시되는 제목으로 사용됩니다. 페이지 제목은 페이지가 책갈피 될 때 페이지를 설명하는 데에도 사용됩니다.
    6. +
  6. <body></body>: {{htmlelement ( "body")}} 요소 여기에는 텍스트, 이미지, 비디오, 게임, 재생 가능한 오디오 트랙 등을 비롯하여 페이지에 표시되는 모든 콘텐츠가 포함됩니다.
    7. +
+ +

실습: HTML 문서에 일부 기능 추가하기

+ +

로컬 컴퓨터에서 일부 HTML을 작성하여 실험하고 싶다면 다음을 수행하십시오. 

+ +
    +
  1. 위에 나열된 HTML 페이지 예제를 복사하십시오.
    2. +
  2. 텍스트 편집기에서 새 파일을 작성하십시오.
    3. +
  3. 코드를 새 텍스트 파일에 붙여 넣습니다.
    4. +
  4. 파일을 index.html로 저장하십시오.
    5. +
+ +
+

참고: 기본 HTML 템플릿은 MDN Learning Area Github repo 에서도 찾을 수 있습니다.

+
+ +

이제 웹 브라우저에서 이 파일을 열어 렌더링 된 코드의 모양을 확인할 수 있습니다. 코드를 편집하고 브라우저를 새로 고침하여 결과를 확인하십시오. 첫 페이지는 다음과 같습니다.

+ +

A simple HTML page that says This is my page이 연습에서는 앞에서 설명한대로 컴퓨터에서 로컬로 코드를 편집하거나 아래 샘플 창에서 편집 할 수 있습니다 (편집 가능한 샘플 창은 {{htmlelement ( "body")}} 요소의 내용만 나타냄 이 경우). 다음 작업을 구현하여 기술을 익히십시오.

+ + + +

만약 실수한 경우 언제든지 Reset 버튼을 사용하여 초기화 할 수 있습니다. 문제가 발생하면 Show solution 단추를 눌러 답변을 확인하십시오.

+ + + +

{{ EmbedLiveSample('Playable_code3', 700, 600, "", "", "hide-codepen-jsfiddle") }}

+ +

HTML 공백

+ +

위의 예에서 많은 공백이 코드에 포함되어 있음을 알 수 있습니다. 이것은 선택 사항입니다. 이 두 코드 스니펫은 동일합니다.

+ +
<p>Dogs are silly.</p>
+
+<p>Dogs        are
+         silly.</p>
+ +

HTML 요소 내용 내에서 얼마나 많은 공백을 사용하든 (하나 이상의 공백 문자를 포함 하거나 줄 바꿈 포함) HTML 파서는 코드를 렌더링 할 때 각 공백 시퀀스를 단일 공백으로 줄입니다. 왜 그렇게 많은 공백을 사용합니까? 답은 가독성입니다.

+ +

코드의 보기 좋게 정리되어 있다면 코드에서 무슨 일이 일어나고 있는지 이해하는 것이 더 쉬울 수 있습니다. HTML에는 중첩 된 각 요소가 내부에있는 것보다 두 칸 더 들여 쓰기되어 있습니다. 서식 스타일 (예 : 각 들여 쓰기 수준에 대한 공백 수)을 선택하는 것은 사용자의 몫이지만 서식을 고려해야합니다.

+ +

Entity references: HTML에 특수 문자 포함

+ +

HTML에서 문자 <,>, "및 &는 특수 문자입니다. 이들은 HTML 구문 자체의 일부입니다. 그럼 어떻게 이러한 특수 문자 중 하나를 내가 사용하고 싶은 텍스트에 포함할까요? 예를 들어, 앰퍼샌드 또는 이하 기호를 텍스트에 사용하고 HTML 코드로 해석되지 않게 하려는 경우와 같이 말입니다.

+ +

표를 참고하여 실습해보세요. 오른쪽의 특별한 코드는 특수 문자를 표현할 때 사용되는 문자 참조 코드입니다. 각 문자 참조는 앰퍼샌드 (&)로 시작하고 세미콜론 (;)으로 끝납니다.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Literal characterCharacter reference equivalent
<&lt;
>&gt;
"&quot;
'&apos;
&&amp;
+ +

문자 참조에 해당하는 문자는 '&lt;'보다 작거나 '&quot;'에 대한 인용 및 기타 문자 참조와 유사하게 볼 수 있기 때문에 쉽게 기억할 수 있습니다. 엔터티 참조에 대한 자세한 내용은 List of XML and HTML character entity references (Wikipedia)을 참조하십시오.

+ +

아래 예시는 두 개의 단락이 있습니다.

+ +
<p>In HTML, you define a paragraph using the <p> element.</p>
+
+<p>In HTML, you define a paragraph using the &lt;p&gt; element.</p>
+ +

아래의 라이브 출력에서 첫 번째 단락이 잘못되었음을 알 수 있습니다. 브라우저는 <p>의 두 번째 인스턴스를 새 단락을 시작하는 것으로 해석합니다. 두 번째 단락에는 문자 참조가있는 꺾쇠 괄호가 있으므로 잘 보입니다.

+ +

{{ EmbedLiveSample('Entity_references_Including_special_characters_in_HTML', 700, 200, "", "", "hide-codepen-jsfiddle") }}

+ +
+

참고: HTML의 문자 인코딩이 UTF-8로 설정되어 있기 때문에 최신 브라우저는 실제 기호를 잘 처리하므로 다른 기호에 대해서는 엔티티 참조를 사용할 필요가 없습니다.

+
+ +

HTML 주석

+ +

HTML에는 코드에 주석을 작성하는 메커니즘이 있습니다. 브라우저는 주석을 무시하여 사용자가 주석을 보이지 않게합니다. 주석의 목적은 코드에 메모를 포함시켜 논리 또는 코딩을 설명 할 수 있도록하는 것입니다. 이것은 코드를 완전히 기억하지 못할 정도로 오랫동안 멀어진 후 코드베이스로 돌아 오는 경우에 매우 유용합니다. 마찬가지로, 다른 사람들이 변경하고 업데이트함에 따라 의견이 매우 중요합니다.

+ +

HTML 주석을 쓰려면 특수 마커 <!- 및 ->로 주석을 묶습니다. 예를 들면 다음과 같습니다.

+ +
<p>I'm not inside a comment</p>
+
+<!-- <p>I am!</p> -->
+ +

아래에서 볼 수 있듯이 첫 번째 단락만 라이브 출력에 표시됩니다.

+ +

{{ EmbedLiveSample('HTML_comments', 700, 100, "", "", "hide-codepen-jsfiddle") }}

+ +

Summary

+ +

HTML 기본 사항을 둘러 보셨기를 바랍니다.

+ +

이 글을 읽고나면 HTML의 모양과 기본 수준에서 작동하는 방식을 이해해야합니다. 또한 몇 가지 요소와 속성을 작성할 수 있어야합니다. 이 모듈의 후속 기사에서는 여기에 소개 된 주제 중 일부에 대해 더 설명하고 언어의 다른 개념을 제시합니다.

+ +
+

참고: HTML에 대해 더 배우기 시작하면 CSS (Cascading Style Sheets)의 기본 사항을 배우십시오. CSS는 웹 페이지의 스타일을 지정하는데 사용되는 언어입니다. (예 : 글꼴 또는 색상 변경 또는 페이지 레이아웃 변경) HTML과 CSS는 곧 발견 될 것입니다.

+
+ +
{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}
diff --git a/files/ko/learn/html/introduction_to_html/html_text_fundamentals/index.html b/files/ko/learn/html/introduction_to_html/html_text_fundamentals/index.html new file mode 100644 index 0000000000..9121a02696 --- /dev/null +++ b/files/ko/learn/html/introduction_to_html/html_text_fundamentals/index.html @@ -0,0 +1,654 @@ +--- +title: HTML text fundamentals +slug: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals +translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}
+ +

HTML의 주요 작업 중 하나는 브라우저가 텍스트를 올바르게 표시 할 수 있도록 텍스트 구조와 의미 (시멘틱({{glossary ( "semantics")}})라고도 함)를 제공하는 것입니다.
+ 이번 글에서는 {{glossary ( "HTML")}}을 사용하여 제목 및 단락을 추가하고, 단어를 강조하고, 목록을 만드는 등의 방법으로 텍스트 페이지를 구성하는 방법을 설명합니다.

+ + + + + + + + + + + + +
선행 학습:HTML 시작하기에서 다뤄봤던 HTML의 기초에 익숙해지기.
목표:문단, 제목, 목록, 강조 및 인용구를 포함한 구조와 의미를 부여하기 위해 텍스트의 기본 페이지를 표시하는 방법에 대해 배웁니다.
+ +

기본적인 것: 제목과 단락

+ +

대부분의 구조화 된 텍스트는 기사, 신문, 대학 교과서, 잡지 등 무엇을 읽든지 간에 제목과 단락으로 구성됩니다.

+ +

An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs.

+ +

구조화된 컨텐츠는 읽는 경험을 더 쉽고 즐겁게 만들어줍니다.

+ +

HTML에서는 각 단락은 {{htmlelement("p")}} 요소 안에 둘러싸여 있어야 합니다. 다음에 나오는 것 처럼 :

+ +
<p>I am a paragraph, oh yes I am.</p>
+ +

각 제목도 heading 요소 안에 둘려싸여 있어야 합니다 :

+ +
<h1>I am the title of the story.</h1>
+ +

heading 요소는 총 6개가 있습니다— {{htmlelement("h1")}}, {{htmlelement("h2")}}, {{htmlelement("h3")}}, {{htmlelement("h4")}}, {{htmlelement("h5")}}, and {{htmlelement("h6")}}. 각 요소는 문서에서 다른 수준의 내용을 나타냅니다 ; 메인 제목을 <h1> 으로 나타내고, 소제목을  <h2> 으로 나타내고, 소제목의 소제목을 <h3>으로 나타내고 이런 식으로 제목들을 나타냅니다 .

+ +

구조화된 계층을 구현하기

+ +

예를 들어, 한 이야기에서 <h1>은 이야기의 제목을 나타내고 <h2>는 각 장의 제목을 나타내고 <h3>는 각 장의 하위 절을 나타내고 이런 식으로 나타냅니다.

+ +
<h1>The Crushing Bore</h1>
+
+<p>By Chris Mills</p>
+
+<h2>Chapter 1: The dark night</h2>
+
+<p>It was a dark night. Somewhere, an owl hooted. The rain lashed down on the ...</p>
+
+<h2>Chapter 2: The eternal silence</h2>
+
+<p>Our protagonist could not so much as a whisper out of the shadowy figure ...</p>
+
+<h3>The specter speaks</h3>
+
+<p>Several more hours had passed, when all of a sudden the specter sat bolt upright and exclaimed, "Please have mercy on my soul!"</p>
+ +

구조화된 계층이 타당해 보이는 한 연관된 요소들이 정확히 무엇을 나타내는지는 당신에게 달려있습니다. 다만 그러한 구조들을 만들 때 다음 몇 가지의 관례만 기억하면 됩니다:

+ + + +

왜 우리는 구조가 필요할까요?

+ +

이 질문에 대답하기 위해, text-start.html  — 이 글에서 작동 원리를 보여주는 예시 첫 부분 (맛있는 hummus 레시피)- 을 봅시다. 이후 실습에서 필요하기 때문에 당신의 로컬 저장소에 이 파일의 복사본을 저장해야 합니다. 이 문서의 body는 다양한 컨텐츠 조각들을 가지고 있습니다. 이것들이 Marked up 된 것은 아니지만 줄바꿈으로 구분되어 있습니다. (다음 줄로 가기 위해 Enter/Return이 눌림)

+ +

하지만, 당신이 브라우저에서 문서를 열어보았을 때 당신은 텍스트가 한 덩어리로 뭉쳐있는 것을 볼 것입니다!

+ +

A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it.

+ +

이는 컨텐츠에 구조를 입히는 요소가 없기 때문인데, 그래서 브라우저는 무엇이 heading이고 무엇이 문단인지 알 수 없는 것입니다. 추가로:

+ + + +

그러므로 우리는 컨텐츠를 구조적인 markup에 적용시켜야 합니다.

+ +

활동적인 학습: 컨텐츠에 구조 입히기

+ +

실제 예시에 바로 적용해 봅시다. 아래 예시에서, Input 부분에 있는 raw text에 요소를 더해서 Output 부분에 heading과 두 문단으로 나오도록 해 봅시다. 

+ +

실수를 하면 언제든 Reset 버튼을 눌러 리셋할 수 있습니다. 진행 중 막히면, Show solution 버튼을 눌러 답을 볼 수 있습니다.

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 500) }}

+ +

우리는 왜 Semantic을 필요로 할까?

+ +

Semantic(직역 : 의미를 담은, 의미론적인)은 우리 주변 어디에서나 사용됩니다. 우리는 과거의 경험으로부터 일상적인 대상의 기능이 무엇인지 구분합니다. 우리가 어떤 것을 보면 그것의 기능은 무엇일지 알 수 있습니다. 그래서, 예를 들어, 우리가 빨간 신호등을 '멈춤'으로, 초록 신호등을 '출발'로 인식합니다. 잘못된 semantic들이 적용될 경우 상황은 복잡해집니다. (빨간색을 '출발'로 사용하는 나라가 있을까요? 없기를 바랍니다.)

+ +

비슷한 맥락에서, 우리는 정확한 요소를 사용하고 있는지, 우리의 컨텐츠에 정확한 의미, 기능, 모습을 담았는지 확실히 해야 합니다. 이 맥락에서 {{htmlelement("h1")}} 요소 또한 텍스트에 "내 페이지 최상위 heading"의 역할로 감싸는 semantic 요소입니다.

+ +
<h1>This is a top level heading</h1>
+
+ +

기본적으로, 브라우저는 이에 큰 사이즈의 폰트를 적용해 heading처럼 보이게 할 것입니다. (비록 당신이 CSS를 사용해 원하는 어떤 모습으로도 스타일 할 수 있지만 말입니다.) 더 중요하게, 이것의 의미론적인 가치는 다양한 방식으로 사용될 것입니다. 예를 들어 검색 엔진이나 screen reader들에서 말이죠. (위에서 서술한 것처럼.)

+ +

반면에, 당신은 어떤 요소도 최상위 heading처럼 보이게 할 수 있습니다. 다음을 고려해 봅시다:

+ +
<span style="font-size: 32px; margin: 21px 0;">Is this a top level heading?</span>
+ +

이것은 {{htmlelement("span")}} 요소입니다. 의미가 없죠. 당신은 컨텐츠에 추가적인 의미를 더하지 않고 CSS 를 적용하고 싶을 때 (혹은 JavaScript를 적용해 무언가를 하고 싶을 때) 이것을 사용합니다. (이것들에 대해서는 코스 뒤에서 더 알게 될겁니다.) 우리는 이것에 CSS를 더해 최상위 heading처럼 보이게 했지만, 이것이 semantic(의미론적인) 가치는 없기 때문에, 위에서 서술된 추가적인 이득들은 얻지 못할 것입니다. 작업에 관계있는 HTML 요소를 사용하는 것이 좋은 생각입니다.

+ +

Lists

+ +

이제 List에 집중해 봅시다. List는 삶의 모든 부분에 있습니다 - 쇼핑 리스트에서 당신이 매일 집에 오기 위해 무의식적으로 따르는 지시들의 리스트까지, 이 튜토리얼에서 당신이 따르는 지시들의 리스트까지! 웹에서도 List는 어디에나 있습니다. 그리고 우리는 고려해야 할 3개의 종류를 가지고 있습니다.

+ +

Unordered (순서 없음)

+ +

정렬되지 않은 목록은 항목의 순서가 중요하지 않은 항목 목록을 표시하는 데 사용됩니다

+ +

-  쇼핑 리스트 항목으로 예를 들어보자

+ +
milk
+eggs
+bread
+hummus
+ +

순서 없는 리스트를 정렬하기 위해 {{htmlelement("ul")}} element 를 이용해 감싸줍니다.

+ +

모든 리스트 아이템:

+ +
<ul>
+milk
+eggs
+bread
+hummus
+</ul>
+ +

마지막으로 그안의 리스트 항목들을  {{htmlelement("li")}} (list item) 태그로 감싸줍니다.

+ +
<ul>
+  <li>milk</li>
+  <li>eggs</li>
+  <li>bread</li>
+  <li>hummus</li>
+</ul>
+ +

활동적인 학습 : 순서 없는 리스트 만들기

+ +

HTML 순서 없는(unordered) 리스트를 만들기 위해 아래에 있는 샘플을 편집해보자.

+ + + +

{{ EmbedLiveSample('Playable_code_2', 700, 400) }}

+ +

Ordered (순서 있음)

+ +

순서 있는 리스트는 항목의 순서가 중요한 목록 입니다. 순서를 꼭 정해주세요

+ +

예제:

+ +
Drive to the end of the road
+Turn right
+Go straight across the first two roundabouts
+Turn left at the third roundabout
+The school is on your right, 300 meters up the road
+ +

{{htmlelement("ul")}}태그가 아닌 {{htmlelement("ol")}} 태그로 감싸는것을 제외하고는 마크업 구조는 순서가 없는 리스트와 동일하다.

+ +
<ol>
+  <li>Drive to the end of the road</li>
+  <li>Turn right</li>
+  <li>Go straight across the first two roundabouts</li>
+  <li>Turn left at the third roundabout</li>
+  <li>The school is on your right, 300 meters up the road</li>
+</ol>
+ +

활동적인 학습: 순서가 있는 리스트를 만들어보자

+ +

HTML 순서가 있는(ordered) 리스트를 만들기 위해 아래에 있는 샘플을 편집해보자.

+ + + +

{{ EmbedLiveSample('Playable_code_3', 700, 500) }}

+ +

활동적인 학습: 우리의 레시피 페이지를 만들어보자

+ +

이제 우리는 레시피 페이지 예시를 만드는 데 필요한 모든 정보를 가지고 있습니다. text-start.html 시작 파일을 저장해 그곳에서 작업을 하셔도 좋고, 아래에 있는 편집 가능한 샘플에서 작업을 할 수도 있습니다. 따로 파일을 생성해서 작업을 하면 언제든지 편집이 가능합니다. 아래 샘플에서 작업을 하면 다음에 이 페이지를 열 때 작업 기록이 사라져 있을 것입니다. 이 두가지 방법은 장점과 단점 모두를 지니고 있습니다.

+ + + +

{{ EmbedLiveSample('Playable_code_4', 700, 500) }}

+ +

위의 문제를 해결하는데 어려움을 겪고있다면, Show solution 버튼을 클릭하여 해답을 확인하거나, GitHub 레포지토리에 존재하는 text-complete.html 파일을 확인해 주시길 바랍니다.

+ +

리스트 내부의 리스트(Nesting lists)

+ +

하나의 리스트 내부에 다른 리스트를 추가하는 것은 아무런 문제가 없습니다. 당신이 최상위 리스트 아이템의 내부에 다른 리스트를 추가하고 싶다면, 하단의 예제들 중 두번째 예제를 확인해주세요.

+ +
<ol>
+  <li>Remove the skin from the garlic, and chop coarsely.</li>
+  <li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>
+  <li>Add all the ingredients into a food processor.</li>
+  <li>Process all the ingredients into a paste.</li>
+  <li>If you want a coarse "chunky" hummus, process it for a short time.</li>
+  <li>If you want a smooth hummus, process it for a longer time.</li>
+</ol>
+ +

마지막 두개의 리스트 아이템은 Process all the ingredients into a paste.와 밀접한 관계가 있는 내용입니다. 그러므로 두개의 리스트 아이템은 Process all the ingredients into a paste.의 내부에 중첩되어 나타나는 것이 더 좋을 것입니다. 하단과 같은 방법을 사용해서 말이죠.

+ +
<ol>
+  <li>Remove the skin from the garlic, and chop coarsely.</li>
+  <li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>
+  <li>Add all the ingredients into a food processor.</li>
+  <li>Process all the ingredients into a paste.
+    <ul>
+      <li>If you want a coarse "chunky" hummus, process it for a short time.</li>
+      <li>If you want a smooth hummus, process it for a longer time.</li>
+    </ul>
+  </li>
+</ol>
+ +

첫번째의 예제로 돌아가, 두번째의 예제처럼 변경하는 연습을 해보시길 바랍니다.

+ +

중요와 강조

+ +

우리는 문장의 의미를 바꾸거나 특정한 단어를 강조하기위해 종종 일반적인 방법과 다르게 표현하기도 합니다. HTML은 그런 경우를 표시할 수 있도록 다양한 의미 요소를 제공하며, 이 섹션에서는 가장 일반적인 몇 가지 요소를 살펴보기로 합니다.

+ +

중요(Emphasis)

+ +

우리는 말을 하면서 특정 단어를 강세를 두고 발음하는 방법으로 의미를 다르게 표현합니다. 마찬가지로, 글에서는 단어에 강세를 두기 위해 이탤릭체로 표현하는 경향이 있습니다. 예를 들어, 다음 두 문장은 다른 의미를 가집니다. 

+ +

I am glad you weren't late.

+ +

I am glad you weren't late.

+ +

첫 문장은 상대가 늦지 않은 것에 대해 진심으로 안도하는 것처럼 들립니다. 이와는 대조적으로, 두 번째 문장은 상대가 조금 늦게 도착한 것에대해 비꼬거나 짜증을 표현하는 것처럼 들립니다.

+ +

HTML에서는 이러한 경우를 표시하기 위해 {{htmlelement("em")}} (emphasis) 요소를 사용합니다. 문서를 더 흥미롭게 읽게 될 뿐만 아니라, 화면판독기에 인식되면 다른 톤의 목소리로 표현됩니다. 브라우저에서는 기본적으로 이탤릭체로 스타일을 지정하지만, 단지 이탤릭체로 스타일링하기 위해 이 태그를 사용하는 것은 지양합니다. 스타일링을 위해서는{{htmlelement("span")}} 요소에 약간의 CSS를 더하거나 {{htmlelement("i")}}요소를 사용할 수 있습니다.(아래 참조).

+ +
<p>I am <em>glad</em> you weren't <em>late</em>.</p>
+ +

강조(Strong importance)

+ +

우리는 중요한 단어를 강조하기 위해 강세를 두고 말하거나 글자를 두껍게 표현합니다. 예를들면,

+ +

This liquid is highly toxic.

+ +

I am counting on you. Do not be late!

+ +

HTML에서는 이러한 경우를 표시하기 위해 {{htmlelement("strong")}} (strong importance)요소를 사용합니다. 문서를 더 유용하게 만드는 것뿐만 아니라, 화면판독기에 인식되면 다른 톤의 목소리로 표현됩니다. 브라우저에서는 기본적으로 굵은 텍스트로 스타일을 지정하지만, 단지 굵게 스타일링하기 위해 이 태그를 사용하는 것은 지양합니다. 스타일링을 위해서는 {{htmlelement("span")}} 요소에 약간의 CSS를 더하거나 {{htmlelement("b")}} 요소를 사용할 수 있습니다.(아래 참조).

+ +
<p>This liquid is <strong>highly toxic</strong>.</p>
+
+<p>I am counting on you. <strong>Do not</strong> be late!</p>
+ +

원한다면 각각의 태그가 서로의 안에 위치할 수 있습니다.

+ +
<p>This liquid is <strong>highly toxic</strong> —
+if you drink it, <strong>you may <em>die</em></strong>.</p>
+ +

Active learning: Let's be important!

+ +

이 Active Learning 섹션에서는 편집 가능한 예시를 제공하였습니다. 이 안에서 여러분이 필요하다고 생각되는 단어에 강조와 중요성을 더해보며 연습할 수 있기를 바랍니다.

+ + + +

{{ EmbedLiveSample('Playable_code_5', 700, 500) }}

+ +

Italic, bold, underline...

+ +

우리가 지금까지 얘기했던 요소들은 관련된 의미들을 명확히 구분했습니다. {{htmlelement("b")}}, {{htmlelement("i")}}, {{htmlelement("u")}}의 상황들은 좀 복잡하죠. 이 요소들은 CSS가 형편없이 지원되거나 완전히 지원되지 않는 경우에 이탤릭체 또는 밑줄 등을 표현할 수 있도록 고안되었습니다. 의미론적이 아닌 표현에만 영향을 주는 이와 같은 요소들은 현재적 요소로 알려져 있으며, 더 이상 사용되어서는 안됩니다. 앞에서 살펴본 바와 같이 의미론은 접근성, SEO 등에 매우 중요하기 때문이죠.

+ +

HTML5 에서는 <b>, <i>, <u> 를 조금 혼란스럽긴 하지만 새로운 의미론적 역할로 재정립하였습니다.

+ +

가장 좋은 경험법칙: 적합한 요소가 더 없다면, 과거로부터 줄곧 굵거나 이탤릭체를 쓰거나 밑줄을 치는 방법으로 표현했던 의미를 전달하기 위해 <b>, <i>, <u> 를 사용하는 것이 적절할 것 같다. 그러나 늘 접근성에 관해 염두하는 것은 항상 중요하다. 이탤릭체의 개념은 스크린리더를 사용하는 사람이나 라틴 문자체계 이외의 사용자에게는 별로 도움이 되지 않는다.

+ + + +
+

밑줄에 대한 위험성 중 하나: 사람들은 밑줄을 하이퍼링크와 강하게 연관시킨다. 따라서 웹에서는 링크에만 밑줄을 긋는 것이 가장 좋다. 의미론적으로 적합한 경우 <u> 요소를 사용하되, CSS를 사용하여 기본 밑줄을 웹에서 더 적합하게 변경할 수 있는지 고려한다. 그것이 어떻게 이루어질 수 있는지는 아래의 예에서 확인할 수 있다.

+
+ +
<!-- scientific names -->
+<p>
+  The Ruby-throated Hummingbird (<i>Archilochus colubris</i>)
+  is the most common hummingbird in Eastern North America.
+</p>
+
+<!-- foreign words -->
+<p>
+  The menu was a sea of exotic words like <i lang="uk-latn">vatrushka</i>,
+  <i lang="id">nasi goreng</i> and <i lang="fr">soupe à l'oignon</i>.
+</p>
+
+<!-- a known misspelling -->
+<p>
+  Someday I'll learn how to <u>spel</u> better.
+</p>
+
+<!-- Highlight keywords in a set of instructions -->
+<ol>
+  <li>
+    <b>Slice</b> two pieces of bread off the loaf.
+  </li>
+  <li>
+    <b>Insert</b> a tomato slice and a leaf of
+    lettuce between the slices of bread.
+  </li>
+</ol>
+ +

요약

+ +

일단 이게 다에요! 이 글을 통해 여러분은 HTML에서 텍스트를 표현하기 시작하는 방법에 대해 좋은 아이디어를 얻었고, 이 영역에서 가장 중요한 몇가지 요소들을 알게되었습니다. 이 코스에에서 다룰 의미론적 요소는 훨씬 더 많으며 Advanced text formatting 를 통해 더 많이 살펴볼 수 있습니다. 다음 글에서는 웹에서 가장 중요한 요소인 하이퍼링크를 만드는 방법에 대해 자세히 알아보도록 합시다.

+ +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}

+ +

In this module

+ + diff --git a/files/ko/learn/html/introduction_to_html/index.html b/files/ko/learn/html/introduction_to_html/index.html new file mode 100644 index 0000000000..7566119e6e --- /dev/null +++ b/files/ko/learn/html/introduction_to_html/index.html @@ -0,0 +1,59 @@ +--- +title: HTML 소개 +slug: Learn/HTML/Introduction_to_HTML +tags: + - CodingScripting + - HTML + - Landing +translation_of: Learn/HTML/Introduction_to_HTML +--- +
{{LearnSidebar}}
+ +

{{glossary("HTML")}}은 문서의 특정 텍스트 영역이 문단인지 목록인지 표의 일부인지 구분 할 수 있도록 의미를 부여하고, 헤더인지, 콘텐츠 컬럼인지, 네비게이션 메뉴인지 알수 있도록 논리적인 영역으로 구조화 하고, 이미지와 비디오 같은 콘텐츠를 삽입할 수 있게 해주는 요소들로 구성된 지극히 간단한 언어입니다. 이번 과정은 이 두 가지 주제에 대한 소개와 HTML을 이해하기 위해 알아야 하는 기본 개념과 문법을 설명합니다.

+ +

전제 조건

+ +

이번 과정을 시작하기 전에, HTML에 대한 사전 지식은 필요하지 않습니다만, 기본적으로 컴퓨터 사용에 친숙해야 하고, 웹사이트의 콘텐츠를 탐색하는 정도의 웹을 사용할 줄 알아야 합니다. 기본 소프트웨어 설치에 있는 기본적인 작업 환경이 구축되어 있어야 하고, 파일 다루기에 있는 파일을 생성하고 관리하는 방법을 이해하고 있어야 합니다. 이 두가지 내용은 웹 시작하기를 위한 초급 과정입니다.

+ +
+

노트: 혹시, 파일을 생성하기 힘든 컴퓨터/테블릿 혹은 다른 기기에서 작업한다면, JSBin 이나 Thimble 같은 온라인 코딩 프로그램을 이용하여 대부분의 코드 예제를 작성해 볼 수 있습니다.

+
+ +

안내서

+ +

이 과정은 HTML의 모든 기초 이론을 학습하고, 몇몇 기법을 실습해 볼 수 있는 충분한 기회를 제공합니다. 아래와 같은 내용을 담고 있습니다.

+ +
+
HTML 시작하기
+
HTML을 시작하기 위한 초급 내용을 다룹니다. 요소, 속성을 정의하고, 한번쯤은 들어봤을지도 모르는 중요한 용어들을 알아보고 어디에 사용되는지 살펴봅니다. 또, HTML 요소를 구조화 하는 방법, 일반적인 HTML 페이지가 어떻게 구조화되는지를 알아보고, 언어의 중요한 기본 특징에 대해 설명합니다. 그러면서, 여러분들이 흥미를 가질 수 있도록 HTML 코드를 직접 작성해 보도록 하겠습니다.
+
head 안에는 무엇이 있나? HTML 메타 데이터
+
HTML 문서의 헤드는 페이지가 로딩될 때 웹 브라우저에는 보이지 않는 부분입니다. 페이지의 {{htmlelement("title")}}, (HTML 콘텐츠에 스타일을 적용하고 싶다면) {{glossary("CSS")}} 링크, 파비콘 링크, 그리고 메타데이터(문서의 작성자, 문서를 설명하기 위한 중요한 키워드와 같은 HTML에 대한 정보)와 같은 정보를 담고 있습니다.
+
HTML 텍스트 기본
+
HTML을 사용하는 주요 목적 중의 하나는 텍스트에 의미를 부여(시맨틱)하는 것인데, 그렇게 하면 브라우저는 화면에 어떻게 노출되어야 하는지 명확하게 알 수 있습니다. 이 글에서는 HTML을 이용하여 글의 제목과 문단의 구조에서 텍스트를 분리해 보고, 단어에 강조/중요도를 부여해보고, 리스트 만드는 법 등을 살펴 보겠습니다.
+
하이퍼링크 만들기
+
하이퍼링크는 웹을 웹(web, 거미줄, 연결을 의미)으로 만들어주는 것이기 때문에 굉장히 중요합니다. 이 글에서는 링크를 만드는데 필요한 문법을 설명하고, 링크의 사례들을 논의해 봅니다.
+
텍스트 조작 고급기법
+
HTML에는 텍스트를 조작하기 위한 많은 요소들이 있습니다. 이 글에는 다 담을 수는 없습니다. 이 글에서는 잘 알려지진 않았지만 알아두면 굉장히 유용한 요소들을 살펴보겠습니다. 인용구, 설명 목록, 소스 코드 혹은 관련 텍스트, 위첨자, 아래첨자, 연락 정보 등을 마크업 하는 방법을 알아보겠습니다.
+
문서와 웹사이트 구조
+
‘문단’이나 ‘이미지’와 같은 페이지의 부분을 정의하는 것처럼, HTML은 ‘헤더’, ‘네비게이션 메뉴’, ‘주요 내용 컬럼’과 같은 웹사이트의 영역을 정의하는데도 사용됩니다. 이 글에서는 기본 웹사이트 구조를 설계하는 법을 살펴보고, 이 구조를 표현하기 위해 HTML로 직접 작성해 보겠습니다.
+
HTML 디버깅
+
HTML 작성은 잘 되었는데, 무언가 잘못되었고, 작업을 할 수 없다면 코드에서 에러가 발생하는 부분은 어디일까요? 이 글은 이런 상황에 도움을 줄 수 있는 도구들을 소개합니다.
+
+ +

평가

+ +

다음의 평가들은 위의 가이드에 있는 HTML 기본을 얼마나 이해하고 있는지 테스트 합니다.

+ +
+
마크업
+
우리는 모두 편지 쓰는 법을 금방 배우게 됩니다. 텍스트를 꾸미고 조작하는 것을 테스트 해볼 수 있는 유용한 예제들이 있습니다. 여러분이 마크업 하는 것을 평가합니다.
+
페이지 콘텐츠 구조화
+
이 평가는 헤더, 푸터, 네비게이션 메뉴, 주요 콘텐츠, 사이드바를 담고 있는 간단한 웹 페이지의 구조를 HTML로 작성하는 능력을 테스트합니다.
+
+ +

같이 보기

+ +
+
웹 지식 기본 1
+
HTML 소개 과정에서 논의된 많은 기법들을 살펴보고 테스트 해볼 수 있는 모질라 재단 과정이 있습니다. 학습자들은 이 여섯 가지의 과정에서 글을 읽고, 글을 작성하고, 참석하는데 친숙해 질 것입니다. 만들어 보고 협업하면서 탄탄한 웹의 토대를 찾아보세요.
+
diff --git a/files/ko/learn/html/introduction_to_html/marking_up_a_letter/index.html b/files/ko/learn/html/introduction_to_html/marking_up_a_letter/index.html new file mode 100644 index 0000000000..5d451b0d4e --- /dev/null +++ b/files/ko/learn/html/introduction_to_html/marking_up_a_letter/index.html @@ -0,0 +1,102 @@ +--- +title: Marking up a letter +slug: Learn/HTML/Introduction_to_HTML/Marking_up_a_letter +translation_of: Learn/HTML/Introduction_to_HTML/Marking_up_a_letter +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Learn/HTML/Introduction_to_HTML")}}
+ +
+ +
우리 모두 글자를 쓸 줄 압니다. 이제 글을 포멧팅하는 방법을 익혀 보도록 합니다. 이 장에서는 주어진 글을 HTML 기본/혹은 고급 텍스트 포멧팅 방식에 맞춰 다듬는 연습을 할 예정입니다. 예를 들어, 하이퍼링크라든지 <head> 컨텐츠 등을 말이지요.
+ +
+ + + + + + + + + + + + +
선수 학습: +

이 장에 들어서기에 앞서 필요한 선수 학습들에는 Getting started with HTML, What's in the head? Metadata in HTML, HTML text fundamentals, Creating hyperlinks, Advanced text formatting 등이 있습니다.

+
이 장에서 배워요: +

HTML 기본/고급 텍스트 포멧팅 방법, 하이퍼링크, HTML <head> 부분에 무엇이 들어가는지에 대해 알아 보아요.

+
+ +

시작하기에 앞서

+ +

프로젝트를 시작하기 위해서는 두 가지가 필요합니다. raw text you need to mark up와 CSS you need to include입니다. 텍스트 편집기를 이용해 .html 파일을 만들거나 사이트 - JSBin 이나 Thimble 를 이용하여 프로젝트를 할 수도 있습니다.

+ +

프로젝트 요약

+ +

이 프로젝트에서 여러분은 대학 인트라넷에 호스팅 될 문서를 마크업 하게 될 겁니다. 이 문서는 미래 해당 대학에서 박사학위를 공부하려는 이들이 보내 온 질문에 대한 연구원들의 답변입니다. 

+ +

블록/ 구조적인 시맨틱들

+ + + +

Inline semantics:

+ + + +

The head of the document:

+ + + +

Hints and tips

+ + + +

Example

+ +

The following screenshot shows an example of what the letter might look like after being marked up.

+ +

Example

+ +

프로젝트

+ +

If you are following this assessment as part of an organized course, you should be able to give your work to your teacher/mentor for marking. If you are self-learning, then you can get the marking guide fairly easily by asking on the discussion thread about this exercise, or in the #mdn IRC channel on Mozilla IRC. Try the exercise first — there is nothing to be gained by cheating!

+ +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Learn/HTML/Introduction_to_HTML")}}

+ +

In this module

+ + diff --git a/files/ko/learn/html/introduction_to_html/the_head_metadata_in_html/index.html b/files/ko/learn/html/introduction_to_html/the_head_metadata_in_html/index.html new file mode 100644 index 0000000000..da87edf6ee --- /dev/null +++ b/files/ko/learn/html/introduction_to_html/the_head_metadata_in_html/index.html @@ -0,0 +1,277 @@ +--- +title: head 태그에는 무엇이 있을까? HTML의 메타데이터 +slug: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML +translation_of: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}
+ +

HTML의 {{glossary("Head", "head")}}는 페이지를 열 때 웹 브라우저에 표시되지 않습니다. head는 {{htmlelement("title")}} 같은 페이지나, {{glossary("CSS")}}의 링크(HTML 컨텐츠를 CSS로 스타일링하기를 원한다면),  파비콘(favicon), 그리고 다른 메타데이터(작성자, 중요한 키워드와 같은 HTML에 대한 내용)를 포함합니다. 이 글에서는 위 내용들과 그 이상에 대해 다룰 것입니다. 이것은 head에 있어야하는 마크업이나 다른 코드들을 다루는데 좋은 기초가 될 것입니다.

+ + + + + + + + + + + + +
사전 지식:HTML의 기본 구조, Getting started with HTML문서의 내용을 사전에 읽으면 좋습니다.
목적:HTML의 head을 사용하는 목적과 HTML 문서에 어떤 영향을 끼칠 수 있는지에 대해 학습합니다.
+ +

HTML head란?

+ +

 HTML document we covered in the previous article을 다시 봅시다.

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>My test page</title>
+  </head>
+  <body>
+    <p>This is my page</p>
+  </body>
+</html>
+ +

HTML {{htmlelement("head")}} 요소의 내용입니다. — 페이지를 열 때 브라우저에 표시되는 {{htmlelement("body")}}요소와 다르게, head의 내용는 페이지에 표시되지 않습니다. 대신에 head의 내용이 하는 일은 페이지에 대한 {{glossary("Metadata", "metadata")}}를 포함하는 것입니다. 위 예시의  head는 매우 간결합니다:

+ +
<head>
+  <meta charset="utf-8">
+  <title>My test page</title>
+</head>
+ +

더 큰 웹 페이지의 경우엔 head가 꽤 많은 항목을 가질 수 있습니다. 가장 좋아하는 홈페이지로 가서 developer tools을 이용해 head를 살펴보십시오. 이 글의 목적은 head에 들어갈 수 있는 것들 전부를 어떻게 사용하는지 보여주기 위한 것이 아니라, 주로 head에 넣고 싶어할만한 것들을 익숙하게 하고 사용하는 방법을 가르쳐주는 것입니다.

+ +

제목 달기

+ +

우리는 action에서  {{htmlelement("title")}} 요소를 이미 봤습니다. 이것은 문서의 title을 추가하기 위해 사용될 수 있습니다. head는 body에서 최상위 부분에 들어가는{{htmlelement("h1")}} 요소와 헷갈릴 수 있습니다. <h1> 요소는 가끔 title을 가리키기도 하지만 이것은 엄연히 다릅니다!

+ + + +

능동적 학습: 간단한 예제 살펴보기

+ +
    +
  1. 능동적인 학습을 시작하기 위해서, GitHub repo에가서 title-example.html 페이지의 복사본을 다운로드 하십시오. 다음 중 하나를 하면 됩니다: + +
      +
    1. 복사 붙여넣기를 새로운 텍스트 편집기에서 실행하고 당신이 알 만한 경로에 저장하십시오.
      2. +
    2. 페이지에서 "Raw"버튼을 누르면, 새창에 Raw code가 나타납니다. 그런 다음 브라우저 메뉴에서 File > Save Page As...  로 원하는 곳에 저장하십시오
      3. +
    +
    2. +
  2. 이제 당신의 브라우저에서 받은 파일을 여십시오.아래와 같이 보일 것입니다: +

    A simple web page with the title set to <title> element, and the <h1> set to <h1> element.<h1>컨텐츠가 보이는 곳이 어디인지 이제 명백할 것입니다. 그리고 <title> 컨텐츠도 어디에 있는지 알 수 있습니다!

    +
    3. +
  3. 텍스트 편집기에서도 이것을 열 수 있습니다. 이 요소들을 변경해보고, 페이지 새로고침하면서 즐겨보십시오.
    4. +
+ +

<title> 요소는 다른 방식으로 사용될 수도 있는데, 예를 들면 브라우저에서 사이트를 북마크할 때, <title>의 내용물을 추천하는 북마크 이름으로 사용하기도 합니다.

+ +

A webpage being bookmarked in firefox; the bookmark name has been automatically filled in with the contents of the <title> element

+ +

<title>은 아래에서 보는것 처럼 검색결과로 사용되기도 합니다.

+ +

메타데이터: <meta> 요소

+ +

메타데이터는 데이터를 설명하는 데이터이다 그리고 HTML에서 문서에 공식적으로 메타데이터를 적용하는 방법이 있습니다. — the {{htmlelement("meta")}} 요소. 물론 이 기사에서 다루고 있는 다른 것들도 메타 데이터라고 보면 됩니다. 페이지의 <head> 안에 다양한 형태의 <meta> 가 있습니다. 하지만 이 단계에서 모두 다루지는 않을 것입니다. 대신에 흔히 볼 수 있고 자주 쓰이는 것들에 대해 다뤄 보도록 하겠습니다.

+ +

문서의 character 인코딩을 특정하기

+ +

위에서의 예제에서 , 아래의 줄이 포함됩니다:

+ +
<meta charset="utf-8">
+ +

이 요소는 문서의 character—문서에서 허용하는 문자 집합(character set)— encoding에 대해서 간단히 표시합니다 . utf-8 은 전세계적인 character 집합으로 많은 언어들을 문자들을 포함합니다. 이는 웹 페이지에서 어떤 문자라도 취급할 수 있다는 것을 의미합니다. 따라서 당신이 작성할 모든 페이지에서 character 집합을 utf-8로 지정하는것은 좋은 생각입니다! 예를 들어서 당신의 웹페이지는 영어나 일본어 모두 허용합니다:

+ +

a web page containing English and Japanese characters, with the character encoding set to universal, or utf-8. Both languages display fine,예시로, 만약 (라틴 알파벳 사용을 위해서) ISO-8859-1로 characterset을 설정한다면, 페이지가 엉망으로 렌더링 될 것입니다:

+ +

a web page containing English and Japanese characters, with the character encoding set to latin. The Japanese characters don't display correctly

+ +
+

Note: 크롬과 같은 어떤 브라우저는 자동으로 잘못된 인코딩을 고치기 때문에, 어떤 브라우저를 사용하는가에 따라 이 문제를 겪지 않을 수도 있습니다. 그래도 다른 브라우저에서 있을 잠재적인 문제를 피하기 위하여 인코딩을 utf-8 으로 설정해야 합니다.

+
+ +

능동적 학습: character 인코딩 실험

+ +

이것을 사용해 보기 위해 이전 섹션에서 익혔던 <title> (title-example.html page)에서 얻은 간단한 HTMl 템플릿을 다시 켜고 멘타 문자 세트값을 ISO-8859-1로 변경한 다음, 페이지에 일본어를 추가합니다.

+ +
<p>Japanese example: ご飯が熱い。</p>
+ +

저자와 설명을 추가

+ +

많은 <meta> 요소가 name 과 content 속성을 가집니다:

+ + + +

이러한 두가지 메타데이터는 당신의 페이지에서 관리자를 정리하고 머릿말을 요약하는데 유용합니다. 아래의 예시를 보면:

+ +
<meta name="author" content="Chris Mills">
+<meta name="description" content="The MDN Learning Area aims to provide
+complete beginners to the Web with all they need to know to get
+started with developing web sites and applications.">
+ +

저자를 지정하는 것은 콘텐츠 작성자에 대한 정보를 볼 수 있게 해준다. 일부 컨텐츠 관리 시스템에는 페이지 작성자 정보를 자동으로 추출해서 사용할 수 있는 기능이 있다.

+ +

페이지 콘텐츠 관련 키워드를 포함시키는 것은 검색엔진에서 이 페이지가 더 많이 표시 될 가능성이 생기게 할 수 있다. (이러한 활동을 Search Engine Optimization, 또는 {{glossary("SEO")}} 라고 함.)

+ +

Active learning: The description's use in search engines

+ +

이 설명은 검색엔진 결과 페이지에서도 사용된다. 한번 알아보자.

+ +
    +
  1. 다음 링크로 간다. front page of The Mozilla Developer Network.
    2. +
  2. 페이지의 소스를 본다. (Right/Ctrl + click on the page, choose View Page Source from the context menu.)
    3. +
  3. 메타 태그를 찾아본다. 아마 아래와 같은 형태로 생겼을 것이다. + 
    <meta name="description" content="The Mozilla Developer Network (MDN) provides
+information about Open Web technologies including HTML, CSS, and APIs for both
+Web sites and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
    +
    4. +
  4. 지금 당신이 애용하는 검색엔진으로 "Mozilla Developer Network"를 찾아보라(우리는 YAHOO를 사용한다). 검색 결과를 보면, <meta> 및 <title> 요소의 컨텐츠 설명이 어떤 역할을 했는지 알 수 있을 것이다. +

    A Yahoo search result for "Mozilla Developer Network"

    +
    5. +
+ +
+

Note: Google에서는 메인 MDN 홈페이지 링크 아래에 MDN의 몇 가지 관련 서브 페이지가 표시된다. 이를 사이트 링크라고하며 Google의 웹 마스터 도구에서 구성 할 수 있다. 그리고 이는 Google 검색 엔진에서 사이트의 검색 결과를 개선하는 방법이다.

+
+ +
+

Note: 많은 <meta> 기능들이 더이상 사용되지 않는다. (예를들어 <meta name="keywords" content="fill, in, your, keywords, here"> 같은, 다른 검색 용어에 대해 해당 페이지의 관련성을 부여하기 위해 검색 엔진에 제공하던 키워드 등..)  스팸 발송자들이 키워드 목록에 수백 개의 키워드를 채워버리는 악용 사례가 생겨 버렸기 때문에 이것들은 검색 엔진들이 아예 무시를 해버리게 되었다.

+
+ +

Other types of metadata

+ +

웹페이지를 돌아다니다 보면 다른 종류의 메타데이터들을 꽤 많이 볼 수 있다. 웹 사이트에서 볼 수있는 기능들은 특정 사이트 (예 : 소셜 네트워킹 사이트)에 사용할 수있는 특정 정보를 제공하도록 설계된 독점 제작물이다.

+ +

Open Graph Data 는 Facebook이 웹 사이트에 더 풍부한 메타 데이터를 제공하기 위해 발명한 메타 데이터 프로토콜이다. MDN 소스코드에서 다음과 같은 부분을 볼 수 있을 것이다.

+ +
<meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png">
+<meta property="og:description" content="The Mozilla Developer Network (MDN) provides
+information about Open Web technologies including HTML, CSS, and APIs for both Web sites
+and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
+<meta property="og:title" content="Mozilla Developer Network">
+ +

Facebook에서 MDN에 링크를 하면, 이미지와 설명이 함께 나타난다. 사용자에게는 더 좋은 정보를 보여줄 수 있는 것이다.

+ +

Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description.Twitter 에서도 유사한 형태의 독점적인 자체 메타데이터를 가지고 있는데, 특정 웹사이트의 url이 twitter.com에 표시 될 때와 유사한 효과가 있다.

+ +
<meta name="twitter:title" content="Mozilla Developer Network">
+ +

맞춤 아이콘 추가하기

+ +

당신의 사이트 디자인을 좀 더 풍성하게 만들기 위해서 , 당신은 커스텀 아이콘 레퍼런스를 매타데이터에 추가하고 특정 콘텐츠에서 이것을 보여지게 할 수 있다.

+ +

The humble favicon, which has been around for many years, was the first icon of this type, a 16 x 16 pixel icon used in multiple places. 각 열린 페이지의 탭이나 북마크 패널 페이지 쪽에서 favicon을 볼 수 있다.

+ +

favicon은 다음과 같이 너의 사이트에 추가할 수 있다:

+ +
    +
  1. 당신의 사이트의 인덱스 페이지와 같은 디렉토리에  .ico 포멧의 파일을 저장하라 (most browsers will support favicons in more common formats like .gif or .png, but using the ICO format will ensure it works as far back as Internet Explorer 6.)
    2. +
  2. 다음 줄을 HTML <head>에 추가하여 favicon을 참조하라: + 
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    +
    3. +
+ +

북마크 페널의 페비콘이 그 예시이다:

+ +

The Firefox bookmarks panel, showing a bookmarked example with a favicon displayed next to it.

+ +

요즘은 많은 다른 아이콘 타입이 있다. 예를 들어서 MDN 홈페이지에서 다음과 같은 것을 발견할 것이다:

+ +
<!-- third-generation iPad with high-resolution Retina display: -->
+<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png">
+<!-- iPhone with high-resolution Retina display: -->
+<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png">
+<!-- first- and second-generation iPad: -->
+<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png">
+<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
+<link rel="apple-touch-icon-precomposed" href="https://developer.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png">
+<!-- basic favicon -->
+<link rel="shortcut icon" href="https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.png">
+ +

주석은 각 아이콘의 용도를 설명한다. 웹사이트가 iPad의 홈 화면에 저장 될 때 사용할 고해상도 아이콘을 제공하는 것 등을 포함한다.

+ +

지금 당장 모든 아이콘을 구현할 줄 알아야 한다는 성급한 부담을 가질 필요는 없다. 이것은 고급 기능에 속하기도 하며, 이번 과정을 통해 여러 '지식'을 습득해야 가능하다. 이 페이지의 주된 목적은 다른 웹사이트의 소스 코드를 보며 그 '지식'을 습득할 수 있도록 하려는데에 있다.

+ +

HTML에 CSS 와 JavaScript 적용하기

+ +

현대의 모든 웹사이트는 상호작용 기능이 많은 영상 플레이어, 지도, 게임 등을 위해  {{glossary("JavaScript")}}가 필요하고, 이것들을 더 멋져 보이게 하기 위해 {{glossary("CSS")}}가 사용된다. 이것들은 {{htmlelement ( "link")}} 요소와 {{htmlelement ( "script")}} 요소를 사용하여 웹 페이지에 가장 일반적으로 적용된다.

+ + + +

Active learning: applying CSS and JavaScript to a page

+ +
    +
  1. 이 실습을 시작하려면, 같은 로컬 디렉토리 안에 meta-example.html, script.js 그리고 style.css 파일을 미리 만들어 놓아야 한다. 올바른 이름과 파일 확장자로 저장되어 있는지 확인하는 것도 필수!
    2. +
  2. 애용하는 브라우져에서 HTML 파일을 열고, 텍스트 에디터도 실행한다.
    3. +
  3. 위에서 나온 설명대로 CSS와 JavaScript가 HTMl에 적용되도록 HTML에 {{htmlelement("link")}} 및 {{htmlelement("script")}} 를 추가한다.
    4. +
+ +

HTML을 저장하고 브라우저를 새로 고치면 올바르게 변경된 것이다:

+ +

Example showing a page with CSS and JavaScript applied to it. The CSS has made the page go green, whereas the JavaScript has added a dynamic list to the page.

+ + + +
+

Note: CSS나 JS를 적용하는데서 부터 애를 먹고 있으면 css-and-js.html 페이지를 참고하기를 추천한다.

+
+ +

문서의 기본 언어 설정

+ +

마지막으로, 페이지의 언어를 설정 할 수도 있다. 이 작업은 lang attribute 을 여는 HTML 태그에 추가하여 수행 할 수 있다. (meta-example.html 과 아래 참조)

+ +
<html lang="en-US">
+ +

이것은 여러 방면에서 유용하다. HTML 문서는 언어가 설정되어 있으면 검색 엔진에 의해 보다 효과적으로 색인화되며(예를 들어 언어 별 결과에 올바르게 표시되도록..) 화면 판독기를 사용하여 시각장애가 있는 사용자에게 유용하다.(예: 6이라는 숫자는 프랑스어와 영어에서 모두 존재하지만, 각기 다른 발음이 적용된다.)

+ +

또한, 문서의 하위 섹션을 다른 언어로 인식하도록 설정할 수도 있다. 예를들어 다음과 같이 일본어 일본어로 된 섹션에 대해서는 일본어로 인식하도록 할 수 있다:

+ +
<p>Japanese example: <span lang="jp">ご飯が熱い。</span>.</p>
+ +

이 코드는 ISO 639-1 표준에 따른다. Language tags in HTML and XML 에서 자세한 내용을 확인할 수 있다.

+ +

요약

+ +

HTML head에 대한 퀵 파이어 투어가 마무리 되었다. 여기에서 보고 할 수 있는 것보다 훨씬 많은 부분이 있지만, 지금 단계에서는 복잡하거나 어렵게 느껴질 수도 있을 것이고 단지 당신에게 지극히 일반적이고 기초적인 사용법만을 제시했을 뿐이다.  

+ +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}

+ +

In this module

+ + -- cgit v1.2.3-54-g00ecf