이메일 주소에 하이퍼링크를 설정할 수 있습니다. 작동 방법을 보여드리기 전에 몇 가지 팁을 알려드리겠습니다. 개인적으로 저는 이러한 이메일 링크를 좋아하지 않습니다. 양식이 더 적합합니다. 이메일 클라이언트가 설치되어 있지 않거나 현재 사용자에 대해 구성되지 않은 경우 이메일 링크가 제대로 작동하지 않습니다. 물론 궁극적으로 이메일 링크를 사용할지 양식을 사용할지는 사용자가 직접 결정해야 합니다. 물론 양식에 대한 자세한 내용은 이 시리즈의 뒷부분에서 다룰 예정입니다.
이메일 링크를 클릭하면 일반적으로 방문자에게 이메일 창이 열립니다.
그러나 이것이 보장되는 것은 아닙니다. 사용자가 실제로 적절한 설정을 해야 합니다. 다시 한 번 말하지만 이메일 링크 솔루션은 이상적이지 않습니다. 그럼에도 불구하고 때때로 이러한 링크가 필요할 수 있습니다. 구문은 다음과 같습니다:
<a href="mailto:kontakt@psd-tutorials.de">kontakt@psd-tutorials.de</a>
보시다시피 이것은 처음에는 고전적인 하이퍼링크입니다.
그러나 여기서 결정적인 요소는 href 속성에 값으로 할당되는 내용입니다. 링크 대상은 항상 mailto로 시작하고 콜론이 뒤따릅니다. 그 뒤에 원하는 이메일 주소가 이어집니다.
참고로 이메일 링크의 링크 텍스트로 입력하는 내용에 주의해야 합니다. 항상 이메일 주소를 다시 입력하는 것이 가장 좋습니다. 이렇게 하면 하이퍼링크를 클릭하지 않거나 이메일 클라이언트가 열리지 않는 사용자도 주소를 복사하여 이메일을 보낼 수 있습니다.
이메일 링크를 정의하는 경우 수신자 주소만 지정하는 것보다 더 많은 옵션을 사용할 수 있습니다. 여기에 설명된 내용은 HTML 표준은 아니지만 대부분 브라우저에서 지원된다는 점에 유의하세요.
첫째, CC 수신자를 직접 지정할 수 있습니다.
<a href="mailto:kontakt@psd-tutorials.de?cc=info@psd-tutorials.de">kontakt@psd-tutorials.de</a>
실제 받는 사람 주소 뒤에 물음표를 붙입니다. 그 뒤에 CC와 등호 기호가 오고, 그 뒤에 보이는 이메일 사본을 보낼 주소가 이어집니다. CC 대신 숨은 참조를 입력할 수도 있습니다. 이 경우 지정된 주소가 숨은 참조 필드에 복사되고 이메일이 이 주소로 보이지 않는 사본으로 전송됩니다.
미리 정의된 제목을 지정하려는 경우 이 방법도 가능합니다.
<a href="mailto:kontakt@psd-tutorials.de?subject=Post%20an%20PSD-Tutorials.de">kontakt@psd-tutorials.de</a>
제목 뒤에 원하는 제목을 입력합니다. 모든 것이 실제로 작동하려면 제목에 공백을 사용하지 않거나 %20이라는 문자열을 사용하여 제목을 마스킹해야 합니다.
원하는 경우 이메일 텍스트 전체 또는 일부를 입력할 수도 있습니다. 이를 위해 매개변수 본문이 사용됩니다.
<a href="mailto:kontakt@psd-tutorials.de?body=Hallo%20PSD-Tutorials.de">kontakt@psd-tutorials.de</a>
제목과 관련하여 이미 설명한 것과 동일한 내용이 여기에 적용됩니다.
다운로드용 파일 제공
웹사이트에서 다운로드할 수 있는 파일을 제공하려는 경우 당연히 그렇게 할 수 있습니다. (이 시점에서 법적인 측면은 제쳐두겠습니다). 이는 매우 쉽게 실현할 수 있습니다. 하이퍼링크를 정의하고 해당 파일을 링크 대상으로 지정하면 됩니다.
<a href="book.zip">책 다운로드</a>
이 경우 링크 대상은 zip 파일입니다. 하이퍼링크를 클릭하면 일반적으로 브라우저에서 다운로드 대화 상자를 제공하거나 파일을 직접 다운로드합니다.
그러면 이를 사용하여 파일을 다운로드할 수 있습니다. 그러나 궁극적으로 지정된 파일을 어떻게 진행할지는 브라우저에서 결정합니다.
브라우저는 일반적으로 해당 링크를 클릭하면 PDF 파일을 직접 표시합니다. 물론 대부분의 경우 이는 완벽하게 정상입니다. 그러나 다운로드용 PDF 파일도 제공하고 싶을 수도 있습니다. (물론 사용자는 마우스 오른쪽 버튼으로 링크를 클릭하고 파일을 다운로드할 수 있습니다. 하지만 모든 웹사이트 방문자가 이러한 가능성을 알고 있다고 가정해서는 안 됩니다.)
HTML5에서 하이퍼링크는 실제로 다운로드 링크로 레이블을 지정할 수 있습니다. 이를 위해 다운로드 속성이 사용됩니다.
<a href="ebook.pdf" download>다운로드</a>
이 속성이 있는 링크는 브라우저가 해당 속성을 지원하는 경우 파일을 다운로드합니다.
기본적으로 파일은 원본에 있는 이름으로 저장됩니다. 이 또한 일반적으로 괜찮습니다. 그러나 다운로드한 파일에 다른 이름을 지정하고 싶을 수도 있습니다. 이 역시 문제 없이 가능합니다. 다운로드 속성이 다시 사용됩니다. 원하는 이름이 이 속성에 값으로 할당됩니다.
<a href="ebook.pdf" download="dk.pdf">다운로드</a>
브라우저에서 이 옵션을 지원하는 경우 다운로드할 때 다운로드 속성에 할당된 이름을 사용합니다.
논리적 관계 지정
하이퍼링크 정의와 관련하여 매우 흥미로운 속성은 rel입니다. 이 속성은 하이퍼링크와 링크 대상 간의 논리적 관계를 지정하는 데 사용할 수 있기 때문입니다. 예를 들어 브라우저는 이 정보를 사용하여 마우스로 링크 위에 마우스를 가져갈 때 해당 아이콘을 표시할 수 있습니다. 그러나 현재로서는 그렇게 하지 않습니다. 따라서 rel 속성은 눈에 보이는 효과가 없습니다.
<a href="two.htm" rel="next">더 보기</a>
rel 속성에 사용할 수 있는 값은 다음과 같습니다.
- alternate - 문서의 다른 버전으로 연결합니다.
- 작성자 - 문서의 작성자로 연결되는 링크입니다.
- 북마크 - 북마크로 사용할 수 있는 문서의 영구 링크입니다.
- 도움말 - 도움말 파일에 대한 링크입니다.
- 라이선스 - 저작권 정보로 연결되는 링크입니다.
- 다음 - 다음 문서로 연결되는 링크입니다.
- nofollow - 검색 엔진이 링크를 따라가지 않도록 지정하는 데 사용할 수 있습니다.
- noreferrer - 브라우저가 HTTP 리퍼러 헤더를 보내지 않습니다.
- prefetch - 문서를 캐시에 로드해야 합니다.
- 이전 - 이전 문서로 링크합니다.
- search - 문서에 대한 검색 도구로 연결되는 링크입니다.
- 태그 - 문서를 설명하는 키워드입니다.
이러한 방식으로 참조 대상과 하이퍼링크 간의 관계를 더 자세히 설명할 수 있습니다.
