Creating hyperlinks

Creating hyperlinks

 

하이퍼링크 만들기

 

Hyperlinks are really important — they are what makes the Web a web. This article shows the syntax required to make a link, and discusses link best practices.

 

하이퍼링크는 매우 중요하다-그들은 웹을 웹으로 만든다 이 기사에선 링크를 만드는데 필요한 구문을 보여주고 링크 모범 사례에 대해 설명한다

 

Prerequisites:	Basic HTML familiarity, as covered in Getting started with HTML. HTML text formatting, as covered in HTML text fundamentals.
Objective:	To learn how to implement a hyperlink effectively, and link multiple files together

 

필요사항: HTML 시작하기에서 다루었던 기본 HTML과 친해지기, HTML 텍스트 기본에서 다루었던 HTML 텍스트 체제를 갖추기

 

목적: 링크를 여러 파일과 연결하고, 효과적으로 하이퍼링크를 어떻게 구현할 수 있는지 배운다

 

What is a hyperlink?

 

하이퍼링크란?

 

Hyperlinks are one of the most exciting innovations the Web has to offer. They've been a feature of the Web since the beginning, and are what makes the Web a web. Hyperlinks allow us to link documents to other documents or resources, link to specific parts of documents, or make apps available at a web address. Almost any web content can be converted to a link so that when clicked or otherwise activated the web browser goes to another web address (URL).

 

하이퍼링크는 웹이 제공하는 가장 흥미로운 혁신 중 하나이다 그들은 웹의 초창기 때부터 있던 기능이고 웹을 웹으로 만들어 준다 하이퍼링크는 문서 를 다른 문서나 자원에 연결하는 걸 허용하고 문서의 특정 부분에 연결하거나, 또는 웹 주소에서 사용가능한 앱을 만든다 거의 모든 웹 콘텐츠를 링크로 전환하여 클릭하거나 다른방면으로 활성화하면 웹 브라우저가 다른 웹 주소로 간다(URL)

 

Note: A URL can point to HTML files, text files, images, text documents, video and audio files, or anything else that lives on the Web. If the web browser doesn't know how to display or handle the file, it will ask you if you want to open the file (in which case the duty of opening or handling the file is passed to a suitable native app on the device) or download the file (in which case you can try to deal with it later on).

 

참고: URL은 HTML 파일, 텍스트 파일, 이미지, 텍스트 문서, 비디오 그리고 오디오 파일 또는 어떤 것이든 웹에 실제하는 것을 가리킨다

만약 웹 브라우저가 파일을 어떻게 진열하는지 또는 다루는지 모르는 경우, 원하는 파일을 열건지(이런 경우 파일을 다루거나 열어야 하는 임무는 디바이스 내의 적절한 고유의 앱으로 전달된다) 또는 내려받을 건지 물어볼 것이다(이런 경우 나중에 한다고 할 수 있다)

 

For example, the BBC homepage contains many links that point not only to multiple news stories, but also different areas of the site (navigation functionality), login/registration pages (user tools), and more.

 

예를 들어 BBC 홈페이지는 여러 뉴스 기사 뿐만 아니라 사이트의 다른 부분(네비게이션 기능), 로그인/등록 페이지(사용자 도구) 등을 가리키는 많은 링크로 구성되어있다

 

Anatomy of a link

 

링크의 해부

 

A basic link is created by wrapping the text or other content, see Block level links, inside an <a> element and using the href attribute, also known as a Hypertext Reference, or target, that contains the web address.

 

기본적인 링크는 다른 콘텐츠 또는 텍스트로 감싸고, a> 요소 내부에 블록 레벨 요소로 href 속성이 사용된 것을 볼수 있는데, 웹 주소가 들어가 있는 하이퍼텍스트를 참고하거나 목적 한 것으로 알려져 있다

 

<p>I'm creating a link to

the Mozilla homepage.

</p>

 

This gives us the following result:

I'm creating a link to the Mozilla homepage.

 

다음과 같은 결과를 제공한다: Mozilla 홈페이지 링크 만들고 있다

 

Adding supporting information with the title attribute

 

title 속성과 함께 지원 정보 추가하기

 

Another attribute you may want to add to your links is title. The title contains additional information about the link, such as which kind of information the page contains, or things to be aware of on the website.

 

링크에 추가하고 싶은 다른 속성은 title 이다

title은 페이지에 포함된 정보의 종류 같은 것 또는 웹 사이트에서 알아야 할 것 같은 링크의 추가 정보를 담고 있다

 

<p>I'm creating a link to

 

   title="The best place to find more information about Mozilla's

          mission and how to contribute">the Mozilla homepage</a>.

</p>

 

This gives us the following result and hovering over the link displays the title as a tooltip:

 

다음과 같은 결과를 보여주며 링크에 위에 마우스를 두는 것은 title을 *툴팁(말풍선?)으로 보여준다

 

I'm creating a link to the Mozilla homepage.

 

Mozilla 홈페이지로 가는 링크 만든다

 

Note: A link title is only revealed on mouse hover, which means that people relying on keyboard controls or touchscreens to navigate web pages will have difficulty accessing title information. If a title's information is truly important to the usability of the page, then you should present it in a manner that will be accessible to all users, for example by putting it in the regular text.

 

참고: 링크 제목은 마우스를 두었을 때 보여주는데, 웹 페이지를 탐색하기 위해 키보드 컨트롤이나 터치스크린에 의존하는 사람들은 타이틀 정보에 접근하는 것이 어려운 걸 의미한다

만약 타이틀 정보가 페이지 사용성에 정말로 중요하다면 모든 사용자가 접근할 수 있도록 일반 텍스트 안에 넣는 방식을 취해야 한다

 

Active learning: creating your own example link

 

자신의 예시 링크를 만들어보자

 

Create an HTML document using your local code editor and our getting started template.

 

로컬 코드 에디터 그리고 템플릿 시작하기를 사용해 HTML 문서를 만들어 볼 수 있다

 

• Inside the HTML body, add one or more paragraphs or other types of content you already know about.

 

HTML 본문 안에, 하나 아상의 단락 또는 다른 타입의 콘텐츠를 추가할 수 있는 것을 당신은 이미 알고 있다

 

• Change some of the content into links.

 

일부 콘텐츠를 링크로 변화시켜라

 

• Include title attributes.

 

타이틀 속성을 추가하라

 

Block level links

 

블록 레벨 링크

 

As mentioned before, almost any content can be made into a link, even block-level elements. If you have an image you want to make into a link, use the <a> element and reference the image file with the <img> element.

 

앞서 언급한 바로, 거의 모든 콘텐츠를 링크, 블록 레벨 요소로 만들 수 있다 만약 링크로 만들고 싶은 이미지가 있다면 <a> 요소를 사용해 이미지 파일을 <img> 요소로 참조해라

 

 

  <img src="mozilla-image.png" alt="mozilla logo that links to the Mozilla homepage">

</a>

Copy to Clipboard

 

Note: You'll find out more about using images on the Web in a future article.

 

참고: 다른 기사에서 웹에 사용하는 이미지에 대해 더 알아볼 것이다

 

A quick primer on URLs and paths

 

URL과 경로의 빠른 입문서

 

To fully understand link targets, you need to understand URLs and file paths. This section gives you the information you need to achieve this.

 

링크 대상에 대한 충분한 이해는 파일 경로와 URL에 대한 이해를 필요로 한다 이 섹션은 이를 달성하는데 필요한 정보를 줄 것이다

 

A URL, or Uniform Resource Locator is a string of text that defines where something is located on the Web. For example, Mozilla's English homepage is located at https://www.mozilla.org/en-US/.

 

URL 또는 Uniform Resource Locator는 웹 어딘가에 있는 무언가의 위치를 정의하는 텍스트 문자열이다 예를 들어 Mozilla의 영어 홈페이지는 

https://www.mozilla.org/en-US/에 있다

 

URLs use paths to find files. Paths specify where the file you're interested in is located in the filesystem. Let's look at an example of a directory structure, see the creating-hyperlinks directory.

 

URL은 파일을 찾는 경로를 사용한다 경로는 관심 있는 파일을 파일 시스템 안에 명기한다 목록 구조의 예시를 보고 하이퍼링크 만들기 목록을 살펴보자

 

The root of this directory structure is called creating-hyperlinks. When working locally with a website, you'll have one directory that contains the entire site. Inside the root, we have an index.html file and a contacts.html. In a real website, index.html would be our home page or landing page (a web page that serves as the entry point for a website or a particular section of a website.).

 

목록 구조의 뿌리는 하이퍼링크 만들기라 부른다

웹사이트로 로컬에서 작업할 때 전체 사이트가 들어있는 하나의 목록이 있다 루트안에는 index.html 파일과 contacts.html 파일이 있다

실제 웹사이트에선 index.html은 우리의 홈페이지 또는 랜딩 페이지(웹 페이지는 웹사이트의 진입점 또는 웹사이트의 특정 섹션의 부분을 제공한다)이다

 

There are also two directories inside our root — pdfs and projects. These each have a single file inside them — a PDF (project-brief.pdf) and an index.html file, respectively. Note that you can have two index.html files in one project, as long as they're in different filesystem locations. The second index.html would perhaps be the main landing page for project-related information.

 

또한 루트안에 두개의 목록들이 더 있다-pdf와 프로젝트

이것들은 각각 단일의 파일을 갖는다-PDF(project-brief.pdf) 그리고 index.html 파일 각각 

다른 파일시스템에 있는 한, 하나의 프로젝트에 두개의 index.html을 가질 수 있다

두번째 index.html은 아마도 프로젝트 관련 정보를 위해 주요 랜딩 페이지 일 것이다

 

 

• Same directory: If you wanted to include a hyperlink inside index.html (the top level index.html) pointing to contacts.html, you would specify the filename that you want to link to, because it's in the same directory as the current file. The URL you would use is contacts.html:

 

동일한 목록: contacts.html을 가리키는 index.html(최상위 index.html) 안에 하이퍼링크 넣기를 원하다면 현재 파일과 동일한 목록에 있기 때문에 연결할 파일이름을 명시해줘야 한다

당신이 사용할 URL은 contacts.html 이다:

 

<p>Want to contact a specific staff member? Find details on our <a href="contacts.html">contacts page</a>.</p>

 

 

• Moving down into subdirectories: If you wanted to include a hyperlink inside index.html (the top level index.html) pointing to projects/index.html, you would need to go down into the projects directory before indicating the file you want to link to. This is done by specifying the directory's name, then a forward slash, then the name of the file. The URL you would use is projects/index.html:

 

하위 목록으로 이동: project/index.html을 가리키는 index.html 안에 하이퍼링크를 넣기 원한다면 링크하려는 파일을 표시하기 전에 프로젝트 목록으로 내려가야 한다 목록 이름, 포워드 슬래쉬, 파일의 이름을 지정한다  사용할 URL은 project/index.html

 

<p>Visit my <a href="projects/index.html">project homepage</a>.</p>

 

• Moving back up into parent directories: If you wanted to include a hyperlink inside projects/index.html pointing to pdfs/project-brief.pdf, you'd have to go up a directory level, then back down into the pdf directory. To go up a directory, use two dots — .. — so the URL you would use is ../pdfs/project-brief.pdf:

 

다시 부모 목록으로 이동: pdfs/project-brief.pdf 을 가리키는 projects/index.html 안에 하이퍼링크를 넣고자 한다면 목록 레벨에 올라간 다음 pdf 목록으로 다시 내려가야 한다 목록을 올라가려면 두개의 점이 필요하다-..- 그래서 당신이 사용할 URL은 ../pdfs/project-brief.pdf:

 

<p>A link to my <a href="../pdfs/project-brief.pdf">project brief</a>.</p>

 

Note: You can combine multiple instances of these features into complex URLs, if needed, for example: ../../../complex/path/to/my/file.html.

 

참고: 복잡한 URL안에 이런 기능을 여러개 문장으로 결합할 수 있다 예를 들어: ../../../complex/path/to/my/file.html.

 

Document fragments

 

문서 조각

 

It's possible to link to a specific part of an HTML document, known as a document fragment, rather than just to the top of the document. To do this you first have to assign an id attribute to the element you want to link to. It normally makes sense to link to a specific heading, so this would look something like the following:

 

문서 상단보다는 문서 조각으로 알려진 HTML 문서의 특정 부분에 연결할 수 있다

이렇게 하고싶다면 먼저 연결하고자 하는 요소에 id 속성을 할당해야한다 보통 특정 제목에 연결하는 것이 합리적이고, 다음과 같이 보일 것 이다:

 

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

 

Then to link to that specific id, you'd include it at the end of the URL, preceded by a hash/pound symbol (#), for example:

 

그리고 특정 id를 연결할 때 URL 끝에 해시/파운드 심볼을 앞세워 포함시킬 수 있다 예시:

 

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

 

You can even use the document fragment reference on its own to link to another part of the current document:

 

현재 문서의 다른 부분을 연결하기 위해 문서 조각을 자체적으로 참조해 사용할 수 있다

 

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

 

 

Absolute versus relative URLs

 

절대적인 URL vs 상대적인 URL

 

Two terms you'll come across on the Web are absolute URL and relative URL:

 

웹 안에서 보게 돨 두 용어는 절대적인 URL과 상대적인 URL 이다

 

absolute URL: Points to a location defined by its absolute location on the web, including protocol and domain name. For example, if an index.html page is uploaded to a directory called projects that sits inside the root of a web server, and the website's domain is https://www.example.com, the page would be available at https://www.example.com/projects/index.html (or even just https://www.example.com/projects/, as most web servers just look for a landing page such as index.html to load if it isn't specified in the URL.)

 

절대적인 URL: 웹에서 프로토콜과 도메인 이름을 포함한 절대적인 장소에 의해 정의된 곳을 가리킨다 예를 들어 index.html 페이지는 웹 서버의 루트안에 있는 프로젝트라 불리는 목록에 업로드되고 웹사이트의 도메인이 https://www.example.com 인 경우 페이지는 https://www.example.com/projects/index.html가 될 수 있다(또는 대부분의 웹 서버가 URL에 지정되지 않았을 경우 불러올 index.html 같은 렌딩 페이지를 찾기 때문에 https://www.example.com/projects/만 치면 된다)

 

An absolute URL will always point to the same location, no matter where it's used.

 

절대적인 URL은 어디에서 사용되든지 항상 같은 장소를 가리킨다

 

relative URL: Points to a location that is relative to the file you are linking from, more like what we looked at in the previous section. For example, if we wanted to link from our example file at https://www.example.com/projects/index.html to a PDF file in the same directory, the URL would just be the filename — project-brief.pdf — no extra information needed. If the PDF was available in a subdirectory inside projects called pdfs, the relative link would be pdfs/project-brief.pdf (the equivalent absolute URL would be https://www.example.com/projects/pdfs/project-brief.pdf.)

 

상대적인 URL: 이전 섹션에서 보았던 것처럼 연결하는 파일과 관련된 장소를 가리킨다 예를들어 https://www.example.com/projects/index.html의 예제 파일을 같은 목록에 있는 PDF 파일에 연결하려면, URL은 파일이름인-project-brief.pdf 일 뿐이여서 추가적인 정보가 필요하지 않다 PDF가 pdf라 불리는 프로젝트 내부에 하위 목록에서 사용할 수 있다면, 상대적인 링크는 pdfs/project-brief.pdf 이다(동등한 절대적인 URL은 https://www.example.com/projects/pdfs/project-brief.pdf)

 

A relative URL will point to different places depending on the actual location of the file you refer from — for example if we moved our index.html file out of the projects directory and into the root of the website (the top level, not in any directories), the pdfs/project-brief.pdf relative URL link inside it would now point to a file located at https://www.example.com/pdfs/project-brief.pdf, not a file located at https://www.example.com/projects/pdfs/project-brief.pdf.

 

상대적인 URL은 참조하는 파일의 실제 장소에 따라다른 장소를 가리킨다 예를들어 프로젝트 목록에서 index.html을 꺼내 웹사이트의 루트안에 넣으려고 할 때(어떤 목록도 아닌 최상위에), pdfs/project-brief.pdf 상대적인 URL 링크 안에 있는 현재 파일 장소인 https://www.example.com/pdfs/project-brief.pdf 가리킬 것이다

 

https://www.example.com/projects/pdfs/project-brief.pdf에 있는 파일이 아니다

 

Of course, the location of the project-brief.pdf file and pdfs folder won't suddenly change because you moved the index.html file — this would make your link point to the wrong place, so it wouldn't work if clicked on. You need to be careful!

 

물론, project-brief.pdf file과 pdf 폴더가 있는 장소가 index.html을 옮겨서 갑자기 변화되진 않는다-이렇게 하면 링크가 잘못된 장소를 가리킬 수 있고 클릭하면 동작하지 않는다 주의를 기울여라!

 

Link best practices

 

링크 모범 사례

 

There are some best practices to follow when writing links. Let's look at these now.

 

링크를 작성할 때 따라야 할 몇가지의 모범 사례가 있다 지금 살펴보자

 

Use clear link wording

 

명확한 링크 단어를 사용해라

 

It's easy to throw links up on your page. That's not enough. We need to make our links accessible to all readers, regardless of their current context and which tools they prefer. For example:

 

페이지에 링크를 던지는 것은 쉽다 이걸로 충분하지 않다 모든 독자들이 현재 맥락과 선호하는 도구에 상관없이 접근가능한 링크를 만들어야 할 필요가 있다 예시:

 

• Screen reader users like jumping around from link to link on the page, and reading links out of context.

 

스크린 리더 사용자 같은 경우 페이지 안에 링크에서 링크로 부터 뛰어다니고 맥락에서 벗어난 링크 읽는 것을 좋아합니다

 

• Search engines use link text to index target files, so it is a good idea to include keywords in your link text to effectively describe what is being linked to.

 

검색 엔진을 링크 텍스트를 목표 파일을 색인하므로 키워드를 포함하여 연결된 내용을 효과적으로 설명하는 것이 좋은 생각이다

 

• Visual readers skim over the page rather than reading every word, and their eyes will be drawn to page features that stand out, like links. They will find descriptive link text useful.

 

시각적 독자는 모든 단어를 읽기보단 대충 흝고 가고 그들의 눈은 링크처럼 눈에 띄는 특징적인 페이지에 멈출 것이다 그들은 설명적인 링크 텍스트가 유용하다는 것을 알것이다

 

Let's look at a specific example:

 

구체적인 예시를 살펴보자:

 

Good link text: Download Firefox

 

 

  Download Firefox

</a></p>

 

Bad link text: Click here to download 

Firefox

 

 

  Click here

</a>

to download Firefox</p>

 

Other tips:

 

다른 조언:

 

• Don't repeat the URL as part of the link text — URLs look ugly, and sound even uglier when a screen reader reads them out letter by letter.

 

링크 텍스트의 부분으로서 URL을 반복하지 마라-URL이 안예쁘게 보이고 스크린 리더가 문자로 읽을 때 안예쁘게 보인다

 

• Don't say "link" or "links to" in the link text — it's just noise. Screen readers tell people there's a link. Visual users will also know there's a link, because links are generally styled in a different color and underlined (this convention generally shouldn't be broken, as users are used to it).

 

링크 텍스트에 “링크” 또는 “연결한다”라고 말하지 마라-그것은 단지 소음일 뿐이다 스크린 리더는 링크가 있다고 말한다 시각적 독자들은 또한 링크가 있는 줄 알 것이다 링크가 일반적으로 다른 색깔과 밑줄로 스타일링 되어있기 때문에(이 협약은 일반적으로 사용자가 익숙하기 때문에 깨져서는 안된다)

 

• Keep your link text as short as possible — this is helpful because screen readers need to interpret the entire link text.

 

가능한 링크 텍스트를 짧게해라-스크린 리더가 전체 링크 텍스트를 해석하기에 도움을 주기 때문이다

 

• Minimize instances where multiple copies of the same text are linked to different places. This can cause problems for screen reader users, if there's a list of links out of context that are labeled "click here", "click here", "click here".

 

다른 장소에 연결된 동일한 텍스트의 여러 복사본은 문장을 최소화 하라 이것은 만약 “여기를 클릭하세요” , “여기를 클릭하세요” , “여기를 클릭하세요” 가 표시된 맥락을 벗어난 링크의 목록이라면 스크린 리더 사용자에게 문제를 일으킬 수 있다

 

Linking to non-HTML resources — leave clear signposts

 

HTML이 아닌 자원에 연결하기-명백한 이정표 남기기

 

When linking to a resource that will be downloaded (like a PDF or Word document), streamed (like video or audio), or has another potentially unexpected effect (opens a popup window, or loads a Flash movie), you should add clear wording to reduce any confusion.

For example:

 

다운로드 될 리소스(PDF 나 워드 문서 같은), 스트리밍(비디오나 오디오 같은) 또는 예상치 못한 또 다른 효과의 잠재력(팝업창을 열거나 플래시 영화를 불러올 때)에 연결 될 때 혼란을 제거하기 위해 명백한 단어로 추가해야한다 예시:

 

• If you're on a low bandwidth connection, click a link, and then a multiple megabyte download starts unexpectedly.

 

만약 낮은 대역폭으로 연결할 때 링크를 클릭하면 여러 메가바이트 다운로드가 예기치 않게 시작된다

 

• If you don't have the Flash player installed, click a link, and then suddenly get taken to a page that requires Flash

 

만약 플래시 플레이어가 설치되지 않았다면(2020년 12월 31일을 끝으로 지원을 종료했다, 아무래도 보완이 취약해서 그런듯 하다)

링크를 클릭한 다음 갑자기 플래시 요청 페이지로 가질 수 있다

 

Let's look at some examples, to see what kind of text can be used here:

 

어떤 종류의 텍스트를 사용할 수 있는 예시를 보자:

 

 

  Download the sales report (PDF, 10MB)

</a></p>

 

 

  Watch the video (stream opens in separate tab, HD quality)

</a></p>

 

 

  Play the car game (requires Flash)

</a></p>

 

Use the download attribute when linking to a download

 

다운로드에 연결할 때 사용할 다운로드 속성

 

When you are linking to a resource that's to be downloaded rather than opened in the browser, you can use the download attribute to provide a default save filename. Here's an example with a download link to the latest Windows version of Firefox:

 

브라우저에서 열리지 않고 다운로드 할 리소스에 연결 할 때, 다운로드 속성을 사용하여 기본 파일이름을 제공한다 파이어폭스의 최신 Window 버전에서 다운로드 링크와 함께 예시를 살펴보자:

 

 

   download="firefox-latest-64bit-installer.exe">

  Download Latest Firefox for Windows (64-bit) (English, US)

</a>

 

Active learning: creating a navigation menu

 

탐색 메뉴 만들기

 

For this exercise, we'd like you to link some pages together with a navigation menu to create a multipage website. This is one common way in which a website is created — the same page structure is used on every page, including the same navigation menu, so when links are clicked it gives the impression that you are staying in the same place, and different content is being brought up.

 

이 연습을 위해, 우리는 당신이 여러 페이지 웹사이트를 만들기 위해 탐색 메뉴와 함께 일부 페이지를 연결해야 한다 이것은 웹사이트가 만들어지는 하나의 일반적인 방법이다-동일한 탐색 메뉴를 포함한 모든 페이지에 같은 페이지 구조가 사용되곤 한다 그래서 링크를 클릭하면 같은 장소에 머물고 있고 다른 콘텐츠를 제기하는 인상을 준다

 

You'll need to make local copies of the following four pages, all in the same directory. For a complete file list, see the navigation-menu-start directory:

 

아래의 4개 페이지의 로컬 복사본을 모두 같은 목록에 넣어 만들어야 한다 전체 파일 목록은 navigation-menu-start 목록을 참고하라:

 

• index.html
• projects.html
• pictures.html
• social.html

 

You should:

 

1. Add an unordered list in the indicated place on one page that includes the names of the pages to link to. A navigation menu is usually just a list of links, so this is semantically OK.

 

연결할 페이지의 이름이 포함된 한 페이지의  지시된 장소 안에 정렬되지 않은 목록을 추가하라

네비게이션 메뉴는 보통 링크의 목록일 뿐, 의미론적으론 괜찮다

 

1. Change each page name into a link to that page.

 

각 페이지 이름을 연결할 페이지에 대해 바꿔라

 

1. Copy the navigation menu across to each page.

 

탐색 메뉴를 각 페이지에 복사하라

 

1. On each page, remove just the link to that same page — it's confusing and unnecessary for a page to include a link to itself. And, the lack of a link acts a good visual reminder of which page you are currently on.

 

각 페이지에서, 같은 페이지에 대한 링크만 제거하라-링크를 포함하는 것은 불필요하고 혼란만 가져올 것이다 그리고 링크의 부족은 당신이 현재 어떤 페이지에 있는지 시각적으로 상기시켜준다

 

The finished example should look similar to the following page:

마지막 예시는 다음 페이지와 같게 보여야 한다:

 

Note: If you get stuck, or aren't sure if you have got it right, you can check the navigation-menu-marked-up directory to see the correct answer.

 

참고: 만약 막히거나 제대로 이해했는지 확신이 없다면 navigation-menu-marked-up 목록을 팜고해 정확한 답을 확인하라

 

E-mail links

 

이메일 링크

 

It's possible to create links or buttons that, when clicked, open a new outgoing email message rather than linking to a resource or page. This is done using the <a> element and the mailto: URL scheme.

 

클릭하면 페이지 또는 자원에 연결하는 것 보다 새 발신 이메일 메세지를 여는 링크나 버튼을 만들 수 있다 이것은 <a> 요소와 mailto: URL 체계를 사용하여 수행된다

 

In its most basic and commonly used form, a mailto: link indicates the email address of the intended recipient. For example:

 

가장 기본적이고 일반적으로 사용되는 양식에서 mailto: 링크는 의도한 수령인의 이메일 주소 나타낸다 예를 들어:

 

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

 

This results in a link that looks like this: Send email to nowhere.

 

이것은 다음과 같은 링크를 초래한다:

아무데나 이메일을 보내라

 

In fact, the email address is optional. If you omit it and your href is "mailto:", a new outgoing email window will be opened by the user's email client with no destination address. This is often useful as "Share" links that users can click to send an email to an address of their choosing.

 

사실은, 이메일 주소는 부수적인 것이다 만약 그것을 제외하고 href가 “mailto”인 경우, 사용자의 발신 이메일 창은 목적지 없는 주소와 함께 이메일 클라이언트에 의해 열릴 것이다 이것은 종종 사용자가 선택한 주소로 메일을 보내기 위해 클릭할 수 있는 “공유” 링크와 같이 유용할 것이다 

 

Specifying details

 

세부 사항 지정하기

 

In addition to the email address, you can provide other information. In fact, any standard mail header fields can be added to the mailto URL you provide. The most commonly used of these are "주제", "cc", and "body" (which is not a true header field, but allows you to specify a short content message for the new email). Each field and its value is specified as a query term.

Here's an example that includes a cc, bcc, subject and body:

 

또한 이메일 주소로, 다른 정보를 제공할 수 있다 사실은, 어떤 기준의 메일 제목 필드는 제공하는 mailto URL에 추가할 수 있다 가장 일반적으로 사용하는 “subject”, “cc”, 그리고 “body”(진정한 제목 필드는 아니지만, 새 이메일에 대한 짧은 콘텐츠 메세지를 지정할 수 있다) 각 필드와 그 값은 쿼리 용어로 지정된다

여기 예시엔 cc, bcc, 주제 그리고 본문을 포함하고 있다:

 

<a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&subject=The%20subject%20of%20the%20email&body=The%20body%20of%20the%20email">

  Send mail with cc, bcc, subject and body

</a>

 

 

Note: The values of each field must be URL-encoded with non-printing characters (invisible characters like tabs, carriage returns, and page breaks) and spaces percent-escaped. Also, note the use of the question mark (?) to separate the main URL from the field values, and ampersands (&) to separate each field in the mailto: URL. This is standard URL query notation. Read The GET method to understand what URL query notation is more commonly used for.

 

참고: 각 필드의 값은 인쇄되지 않은 문자(탭, 운송 변환, 그리고 페이지 나누기와 같이 보이지 않는 문자)와 퍼센트 이스케이프(= 퍼센트 인코딩-URL 인코딩)된 공백으로 URL로 부호화되어야 한다 또한 물음표(?) 사용에 주의하라 필드 값과 기본 URL을 분리하고 앰퍼샌드(&)는 mailto: URL의 각 필드를 분리한다 이것은 표준 URL 쿼리 표기법이다 어떤 쿼리 표기법이 더 일반적으로 사용되는지 이해하기 위해서 The GET method를 읽어보라

 

Here are a few other sample mailto URLs:

다음은 몇가지 malito URL 샘플이 있다:

 

• mailto:
• mailto:nowhere@mozilla.org
• mailto:nowhere@mozilla.org,nobody@mozilla.org
• mailto:nowhere@mozilla.org?cc=nobody@mozilla.org
• mailto:nowhere@mozilla.org?cc=nobody@mozilla.org&subject=This%20is%20the%20subject

 

Test your skills!

 

당신의 능력을 시험해보라!

 

You've reached the end of this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see Test your skills: Links.

 

이 기사의 끝에 도달했지만, 당신은 가장 중요한 정보를 기억하는가? 이동하기전에 이 정보를 유지했는지 확인하기 위한 몇가지 추가 시험을 찾을 수 있다-Test your skills: Links

 

Summary

 

요약

 

That's it for links, for now anyway! You'll return to links later on in the course when you start to look at styling them. Next up for HTML, we'll return to text semantics and look at some more advanced/unusual features that you'll find useful — Advanced text formatting is your next stop.

 

그것은 링크를 위한 것이다, 어찌됐든 지금은! 당신은 나중에 스타일링을 보기 시작하면 후에 이 코스안에 있는 링크로 돌아갈 것이다 다음으로 HTML의 경우, 텍스트 의미론으로 돌아가고 몇가지 유용한 고급/비정상적인 기능을 찾아 볼 수 있다 Advanced text formatting이 다음 정거장이다