페이지 번역

files/ko/learn/html/introduction_to_html/creating_hyperlinks/index.md

@@ -5,59 +5,51 @@ slug: 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")}}
 
-하이퍼 링크는 중요합니다. — 웹을 웹답게 만들기 때문입니다. 이 글에서는 링크를 만드는데 필요한 구문을 보여주고 링크의 모범 사례를 설명하고 있습니다.
+하이퍼 링크는 중요합니다. — 웹을 웹답게 만들기 때문입니다. 이 글에서는 링크를 만드는데 필요한 구문을 보여주고 링크의 모범 사례를 설명합니다.
 
 <table class="learn-box standard-table">
   <tbody>
     <tr>
-      <th scope="row">미리 알아두면 좋은 지식들:</th>
+      <th scope="row">사전 지식</th>
       <td>
-        기본적인 HTML 에 대한 친숙함, as covered in
-        <a href="/ko/docs/Learn/HTML/Introduction_to_HTML/Getting_started"
-          >Getting started with HTML</a
-        >. HTML text formatting, as covered in
-        <a
-          href="/ko/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals"
-          >HTML text fundamentals</a
-        >.
+        기본적인 HTML 에 대한 친숙함, 이전의 <a href="/ko/docs/Learn/HTML/Introduction_to_HTML/Getting_started">HTML 시작하기</a>의 내용과
+        <a href="/ko/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML 텍스트 기초</a>.
       </td>
     </tr>
     <tr>
-      <th scope="row">목표:</th>
+      <th scope="row">목표</th>
       <td>
         <p>
-          하이퍼링크를 효과적으로 다루는 방법과 수많은 파일들을 함께 연결하는
-          방법을 배웁니다.
+          하이퍼링크를 효과적으로 다루는 방법과 수많은 파일들을 함께 연결하는 방법을 배웁니다.
         </p>
       </td>
     </tr>
   </tbody>
 </table>
 
-## 하이퍼링크란 무엇인가?
+## 하이퍼링크란
 
-하이퍼링크는 웹이 제공하는 가장 흥미로운 혁신 중 하나입니다, 하이퍼링크는 웹이 시작된 이래 웹의 특성이었습니다. 그러나 하이퍼링크는 웹을 웹 다워보이도록 만들어줍니다. — 문서들을 다른 문서들과 연결시켜 주기도 하구요. 또는 우리가 원하는 다른 resource 들과 연결해주기도 합니다. 우리는 또한 문서들의 특정 부분들끼리 연결할 수 있죠.그리고 우리는 앱들을 단순한 웹 주소를 통해 이용하게 만들 수도 있습니다. (설치 혹은 여러가지 작업들을 필요로 하는 native 앱과 비교해보세요.) 거의 모든 web content 들은 링크로 바뀔 수 있는데요. 우리가 그것들을 클릭하거나 활성화시키면 웹 브라우저가 다른 웹 주소({{glossary("URL")}})로 갑니다.
+하이퍼링크는 웹이 제공하는 가장 흥미로운 혁신 중 하나입니다, 하이퍼링크는 웹이 시작된 이래 웹의 특성이었습니다. 그러나 하이퍼링크는 웹을 웹 다워보이도록 만들어줍니다. — 문서들을 다른 문서들과 연결시켜 주기도 하구요. 또는 우리가 원하는 다른 리소스와 연결해주기도 합니다. 우리는 또한 문서들의 특정 부분들끼리 연결할 수 있죠. 그리고 우리는 앱들을 단순한 웹 주소를 통해 이용하게 만들 수도 있습니다. (설치 혹은 여러가지 작업들을 필요로 하는 native 앱과 비교해보세요.) 거의 모든 웹 콘텐츠는 링크로 바뀔 수 있는데요. 우리가 그것들을 클릭하거나 활성화시키면 웹 브라우저가 다른 웹 주소({{glossary("URL")}})로 갑니다.
 
 > **참고:** **메모**: URL은 HTML 파일, 텍스트 파일, 이미지, 텍스트 문서들, 비디오와 오디오 파일들, 그리고 웹상에서 존재할 수 있는 어느 것이라 할지라도 연결할 수 있습니다.만약 웹 브라우저가 어떻게 파일을 보여주거나 다룰지 모른다면, 웹 브라우저는 당신이 파일을 열기를 원하는지 (만약 그렇다면, 파일을 열거나 처리하는 것에 대한 의무는 device에서 적절한 native 앱에게 넘겨질 겁니다.) 혹은 파일을 다운로드 하기를 원하는지 (만약 그렇다면, 당신은 그것을 나중에 다룰 수 있습니다.) 궁금해 할 것입니다.
 
 예를 들면, BBC 홈페이지엔 많은 링크들이 있는데요. 그것들은 수많은 뉴스들 뿐만 아니라 다른 웹사이트들 (navigation functionality), 로그인/등록 페이지들 (user tools) 그리고 더 많은 다른 곳에도 연결되어 있습니다.
 
-![frontpage of bbc.co.uk, showing many news items, and navigation menu functionality](bbc-homepage.png)
+![많은 뉴스 항목과 탐색 메뉴 기능을 보여주는 bbc.co.uk의 첫 페이지](bbc-homepage.png)
 
 ## 링크의 구조
 
 A basic link is created by wrapping the text (or other content, see [Block level links](#block_level_links)) you want to turn into a link inside an {{htmlelement("a")}} element, and giving it an [`href`](/ko/docs/Web/HTML/Element/a#href) 속성은 (also known as a **target**) 사이트의 주소가 포함된 링크를 당신에게 줍니다.
 
 ```html
-<p>
-  I'm creating a link to
-  <a href="https://www.mozilla.org/en-US/">the Mozilla homepage</a>.
+<p>나는 링크를 만들었습니다.
+<a href="https://www.mozilla.org/ko/">Mozilla 홈페이지</a>.
 </p>
 ```
 
 위 코드의 결과는 다음과 같습니다.
 
-나는 링크를 만들었다. [the Mozilla homepage](https://www.mozilla.org/en-US/).
+나는 링크를 만들었습니다. [Mozilla 홈페이지](https://www.mozilla.org/en-US/).
 
 ### title 속성에 부가적인 정보를 더하기
 
@@ -66,52 +58,45 @@ A basic link is created by wrapping the text (or other content, see [Block level
 예제 코드 :
 
 ```html
-<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>나는 링크를 만들었습니다.
+<a href="https://www.mozilla.org/en-US/"
+   title="Mozilla의 사명과 기여 방법에 대한 정보를 찾을 수 있는 최고의 장소">Mozilla 홈페이지</a>.
 </p>
 ```
 
-이것은 그리고 마우스를 오버했을때에 툴팁에 대한 기능도 제공해줄 수 있습니다.
+title 속성은 그리고 마우스를 호버했을때에 툴팁에 대한 기능도 제공해줄 수 있습니다.
 
-제가 만든 링크 입니다. [the Mozilla homepage](https://www.mozilla.org/en-US/).
+{{EmbedLiveSample('Adding supporting information with the title attribute', '100%', 150)}}
 
 > **참고:** 링크 제목은 마우스 호버시에만 공개 됩니다. 이것은 웹 페이지를 탐색하기 위해 키보드에만 의존하는 사람들이 타이틀 정보에 접근하는데 어려움을 겪게 된다는 것을 의미합니다. 만약 title의 정보가 페이지 사용에 있어서 정말로 중요하다면, 해당하는 정보를 일반 텍스트에 넣어줌으로써 모든 사용자가 접근할 수 있는 방식으로 제시해주어야합니다.
 
 ### 능동학습: 링크를 만들어봅시다
 
-적극적으로 학습해 봅시다: local code 편집기를 사용해서 하나의 HTML document 를 만드세요. ([소스코드: 템플릿 시작하기](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html)가 잘 될거에요.)
+능동적으로 학습해 봅시다: 코드 편집기를 사용해서 하나의 HTML document 를 만드세요. ([소스코드: 템플릿 시작하기](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html)를 이용해보세요.)
 
 - HTML body 속에, 하나의 혹은 더 많은 paragraph 들, 혹은 당신이 이미 알고 있는 다른 타입의 content 들을 더해보세요.
 - 몇몇의 content들을 링크로 바꾸세요.
 - 타이틀 속성들을 더하세요.
 
-### Block level 링크들
+### Block level 링크
 
-이전에 얘기했듯이, 여러분은 어떤 내용이든 link로 바꿀 수 있습니다. [block level 요소들](/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Block_versus_inline_elements) 이라고 할지라도요. 만약 링크로 바꾸고 싶은 이미지가 있다면, `<a> 와 </a>` 사이에 그 이미지를 넣으시기만 하시면 됩니다.
+이전에 얘기했듯이, 여러분은 어떤 내용이든 link로 바꿀 수 있습니다. [block level 요소들](/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Block_versus_inline_elements) 이라고 할지라도요. 만약 링크로 바꾸고 싶은 이미지가 있다면, `<a> 와 </a>` 사이에 그 이미지를 넣기만 하면 됩니다.
 
 ```html
-<a href="https://www.mozilla.org/en-US/">
-  <img
-    src="mozilla-image.png"
-    alt="mozilla logo that links to the mozilla homepage" />
+<a href="https://www.mozilla.org/ko">
+  <img src="mozilla-image.png" alt="moailla 홈페이지의 mozilla 로고">
 </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](https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/creating-hyperlinks) directory.)
+URL은 파일들을 찾기위해 path를 이용합니다. path는 당신이 관심있어 하는 파일이 파일 시스템 어디에 있는지 구체적으로 명시하구요. 디렉토리 구조에 대한 예제를 보시죠. ([하이퍼링크 만들기](https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/creating-hyperlinks)를 보세요.)
 
 ![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](simple-directory.png)
 
@@ -131,45 +116,39 @@ URL은 파일들을 찾기위해 path를 이용합니다. path는 당신이 관
 - **하위 디렉토리로 하향 이동**: `projects/index.html`을 가리키는 하이퍼링크를 internal `index.html`(`index.html`에 상위 레벨)에 포함시키려면 연결하려는 파일을 표시하기 전에 프로젝트 디렉토리로 내려가야 할 것입니다. 이 작업은 디렉토리 이름, 그 다음 슬래시, 그 다음 파일 이름을 지정하여 수행되므로 사용할 URL은`projects/index.html` 입니다.
 
 ```html
-<p>Visit my <a href="projects/index.html">project homepage</a>.</p>
+<p>저의 <a href="projects/index.html">프로젝트 홈페이지</a>에 방문해주세요.</p>
 ```
 
 - **부모 디렉토리로 상향 이동**: `pdfs/project-brief.pdf`를 가리키는 하이퍼링크를 `projects/index.html` 안에 포함시키려면 디렉토리 레벨을 올린 다음 pdf 디렉토리로 다시 내려가야 할 것입니다. "상위 디렉터리 이동"은 두 개의 점을 사용하여 표시됩니다. — `..` — 따라서 사용할 URL은 `../pdfs/project-brief.pdf`:
 
 ```html
-<p>A link to my <a href="../pdfs/project-brief.pdf">project brief</a>.</p>
+<p>나의 <a href="../pdfs/project-brief.pdf">프로젝트 개요</a> 링크입니다.</p>
 ```
 
 > **참고:** 필요한 경우 아래와 같이 이러한 기능의 여러 인스턴스를 복잡한 URL로 결합할 수 있습니다. `../../../complex/path/to/my/file.html`.
 
-### Document fragments(문서 조각)
+### 문서 조각
 
-문서 상단이 아닌 HTML 문서 내부의 특정 부분(Document fragments(문서 조각)에 링크 할 수 있습니다. 그것을 하기 위해서 먼저 당신은 링크를 시키고 싶은 태그에 [`id`](/ko/docs/Web/HTML/Global_attributes#id) 속성을 넣어 주어야합니다. 일반적으로는 특정 헤드라인에 연결하는 것이 타당합니다.
+문서 상단이 아닌 HTML 문서 내부의 특정 부분(Document fragments(문서 조각)에 링크 할 수 있습니다. 그것을 하기 위해서 먼저 당신은 링크를 시키고 싶은 태그에 {{htmlattrxref("id")}} 속성을 넣어 주어야합니다. 일반적으로는 특정 헤드라인에 연결하는 것이 올바릅니다.
 
 예제:
 
 ```html
-<h2 id="Mailing_address">Mailing address</h2>
+<h2 id="Mailing_address">Mailing 주소</h2>
 ```
 
 만약 특정 ID에 연결하려면 URL 끝에 해시/파운드 기호를 포함하면 됩니다.
 
 예제:
 
 ```html
-<p>
-  Want to write us a letter? Use our
-  <a href="contacts.html#Mailing_address">mailing address</a>.
-</p>
+<p>우리에게 메일을 보내고 싶나요? 그럼 <a href="contacts.html#Mailing_address">메일 주소</a>를 확인해주세요.</p>
 ```
 
 Document fragments(문서 조각)를 단독으로 사용하여 동일한 문서의 다른 부분에 연결할 수 있습니다.
 
 ```html
-<p>
-  The <a href="#Mailing_address">company mailing address</a> can be found at the
-  bottom of this page.
-</p>
+<p><a href="#Mailing_address">회사 메일 주소</a>는 페이지의 하단에서 찾을 수 있습니다.</p>
 ```
 
 ### 절대 URL과 상대 URL
@@ -190,7 +169,7 @@ Document fragments(문서 조각)를 단독으로 사용하여 동일한 문서
 
 물론, 당신이 `index.html` 파일을 옮겼다고 해서 `project-brief.pdf` 파일과 `pdfs` 폴더의 위치가 갑자기 바뀌지는 않을 것입니다- 이것은 당신의 링크가 잘못된 곳을 가리키게 할 것이므로 클릭을 해도 제대로 작동하지 않을 것입니다. 주의하세요!
 
-## Link 실습하기
+## Link 실습
 
 링크 작성시 지켜야할 몇가지 모범 사례에 대해 살펴봅시다.
 
@@ -209,16 +188,21 @@ Document fragments(문서 조각)를 단독으로 사용하여 동일한 문서
 _link test:_ [Download Firefox](https://firefox.com)
 
 ```html
-<p><a href="https://firefox.com/"> Download Firefox </a></p>
+<p><a href="https://firefox.com/">
+  Firefox 다운로드
+</a></p>
 ```
 
 _**Bad** link text:_ [Click here](https://firefox.com/) to download Firefox
 
 ```html
-<p><a href="https://firefox.com/"> Click here </a> to download Firefox</p>
+<p><a href="https://firefox.com/">
+  여기
+</a>
+를 클릭하여 Firefox 다운로드</p>
 ```
 
-Other tips:
+다른 팁:
 
 - 링크 텍스트의 일부로 URL을 작성하지마세요. — URL은 보기 흉하며, 화면 판독기가 글자로 URL을 읽어낼 때 이상하게 들립니다.
 - 링크 텍스트에 "link"나 "links to"라고 쓰지 마십시오. — 그것은 단지 소음입니다. Screen readers 사용자들은 사용자에게 연관성이 있다고 말합니다. 링크에는 일반적으로 다른 색상으로 스타일링 되고 밑줄이 그어져 있기 때문에 시각적으로 브라우저를 보는 사람들도 링크가 있다는 것을 알기 때문입니다. (사용자들이 일반적으로 익숙하기 때문에 이 관습은 깨지면 안됩니다.)
@@ -241,26 +225,20 @@ PDF나 워드 문서와 같이 다운로드되거나 스트리밍되거나(비
 - 대역폭이 낮은 연결에 있는 경우 링크를 클릭하면 멀티 메가바이트 다운로드가 예기치 않게 시작됩니다.
 - 플래시 플레이어를 설치하지 않은 경우 링크를 클릭한 다음 플래시가 필요한 페이지로 이동합니다.
 
-여기서 사용할 수 있는 텍스트의 종류를 보려면 몇 가지 예를 살펴보십시오.
+여기서 사용할 수 있는 텍스트의 종류를 보려면 몇 가지 예를 살펴보세요.
 
 ```html
-<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/large-report.pdf">
+  세일즈 보고서 다운로드 (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/video-stream/">
+  영상 보기 (분리된 탭에서 스트리밍 열기, HD 퀄리티)
+</a></p>
 
-<p>
-  <a href="http://www.example.com/car-game">
-    Play the car game (requires Flash)
-  </a>
-</p>
+<p><a href="http://www.example.com/car-game">
+  자동차 게임 시작 (플래시 필요)
+</a></p>
 ```
 
 ### 다운로드 연결 시 download attribute 사용
@@ -270,18 +248,17 @@ PDF나 워드 문서와 같이 다운로드되거나 스트리밍되거나(비
 Firefox 39의 Windows 버전에 대한 다운로드 링크가 있는 예:
 
 ```html
-<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 href="https://download.mozilla.org/?product=firefox-39.0-SSL&os=win&lang=ko-KR"
+   download="firefox-39-installer.exe">
+  Windows를 위한 Firefox 39 다운로드
 </a>
 ```
 
 ## 활동적인 학습: 탐색 메뉴 만들기
 
-이 연습에서는 일부 페이지를 탐색 메뉴와 함께 연결하여 다중 페이지 웹 사이트를 생성하십시오. 이것은 웹사이트가 만들어지는 하나의 일반적인 방식입니다. — 동일한 탐색 메뉴를 포함한 모든 페이지에 동일한 페이지 구조가 사용되기 때문에 링크를 클릭할 때 같은 장소에 머물고 있다는 인상을 주며, 다른 내용이 제기되고 있습니다.
+이 연습에서는 일부 페이지를 탐색 메뉴와 함께 연결하여 다중 페이지 웹 사이트를 생성하세요. 이것은 웹사이트가 만들어지는 하나의 일반적인 방식입니다. — 동일한 탐색 메뉴를 포함한 모든 페이지에 동일한 페이지 구조가 사용되기 때문에 링크를 클릭할 때 같은 장소에 머물고 있다는 인상을 주며, 다른 내용이 제기되고 있습니다.
 
-다음 4개의 페이지의 로컬 복사본을 서로 동일한 디렉토리에 만들어야 한다 (전체 목록을 보려면 [navigation-menu-start](https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-start) 디렉토리를 참조):
+다음 4개의 페이지의 로컬 복사본을 서로 동일한 디렉토리에 만들어야 한다 (전체 목록을 보려면 [네비게이션 메뉴 시작](https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-start) 디렉토리를 참조):
 
 - [index.html](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/index.html)
 - [projects.html](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/projects.html)
@@ -312,7 +289,7 @@ Firefox 39의 Windows 버전에 대한 다운로드 링크가 있는 예:
 예를 들면:
 
 ```html
-<a href="mailto:[email protected]">Send email to nowhere</a>
+<a href="mailto:[email protected]">아무데나 메일 보내기</a>
 ```
 
 이렇게 되면 다음과 같은 링크가 생성됩니다. [Send email to nowhere](mailto:[email protected]).