링크 만들기 (Creating links)
하이퍼링크란 무엇일까요? (What is a hyperlink?)
하이퍼링크는 브라우저가 다른 문서나 리소스, 때로는 같은 문서 내의 특정 부분으로 이동하게 만들어주는 HTML 문서의 기능이에요. 클릭하거나 키보드 등으로 활성화할 수 있죠.
하이퍼링크는 웹이 제공하는 가장 흥미로운 혁신 중 하나예요. 웹의 초창기부터 존재했던 기능이고, 웹을 진짜 '웹(거미줄)'답게 만들어주는 1등 공신이죠.
웹에 있는 각각의 리소스는 URL(Uniform Resource Locator)이라는 고유한 주소를 가지고 있고, 하이퍼링크는 바로 이 URL을 가리킨답니다.
💡 강사님의 보충 설명 & 참고 (Note):
URL은 HTML 파일뿐만 아니라 텍스트 파일, 이미지, 텍스트 문서, 비디오, 오디오 파일 등 웹에 존재하는 그 어떤 것도 가리킬 수 있어요.
만약 웹 브라우저가 이 파일을 어떻게 화면에 띄워야 할지, 또는 어떻게 처리해야 할지 모른다면 사용자에게 파일을 열 것인지(이 경우 기기에 설치된 적절한 기본 앱으로 넘어가게 돼요) 아니면 다운로드할 것인지(나중에 사용자가 직접 처리할 수 있도록) 물어볼 거예요.
예를 들어볼까요? 아래 BBC 홈페이지 이미지를 보면 여러 뉴스 기사로 연결되는 링크뿐만 아니라, 사이트의 다른 영역으로 가는 내비게이션 기능, 로그인/가입 페이지(사용자 도구) 등 수많은 링크가 포함되어 있어요.
링크의 구조 (Anatomy of a link)
가장 기본적인 형태의 링크는 텍스트나 다른 콘텐츠를 <a> 요소로 감싸고, 웹 주소를 담고 있는 href 속성을 사용해서 만들어요. 여기서 href는 Hypertext Reference(하이퍼텍스트 참조)의 약자로, 링크의 목적지(target)를 의미한답니다.
아래 코드를 볼까요?
<p>
I'm creating a link to
<a href="https://www.mozilla.org/en-US/">the Mozilla homepage</a>.
</p>위 코드를 작성하면 화면에는 다음과 같이 나타납니다:
I'm creating a link to the Mozilla homepage.
💡 참고 (Note):
Scrimba의 Anchor tags 스크림(인터랙티브 강의)에서 HTML로 링크를 만드는 방법을 직접 실습해 볼 수 있어요!
👨🏫 강사님의 현업 팁:
현업에서는<a>태그를 정말 밥 먹듯이 씁니다. 이때href속성이 실수로 빠지게 되면 브라우저는 이것을 단순한 텍스트 앵커로 취급해서 클릭할 수 있는 마우스 커서(손가락 모양)로 안 바뀌고, 탭(Tab) 키로 포커스도 잡히지 않아요. 웹 접근성(A11y) 측면에서 큰 문제가 되니 반드시href속성을 빼먹지 말고 챙겨주세요!
블록 레벨 링크 (Block level links)
앞서 말씀드린 것처럼 거의 모든 콘텐츠를 링크로 만들 수 있어요. 심지어 블록 레벨 요소(block-level elements)도 예외가 아니죠.
만약 제목(heading) 요소를 통째로 링크로 만들고 싶다면, 아래 코드 스니펫처럼 앵커(<a>) 요소로 감싸주기만 하면 됩니다.
<a href="https://developer.mozilla.org/en-US/">
<h1>MDN Web Docs</h1>
</a>
<p>
Documenting web technologies, including CSS, HTML, and JavaScript, since 2005.
</p>이렇게 하면 큼직한 <h1> 제목 전체가 클릭할 수 있는 링크로 변신해요!
👨🏫 강사님의 부연 설명:
과거 HTML4 시절에는 인라인 요소인<a>태그 안에 블록 요소인<h1>이나<div>를 넣는 것이 문법 규칙 위반이었어요. 하지만 HTML5부터는<a>태그가 감싸는 요소가 인라인이든 블록이든 모두 다 허용하도록 스펙이 발전했답니다. 덕분에 요즘은 쇼핑몰의 '상품 카드' 형태의 레이아웃 전체를 통째로 클릭하게 만들 때 최상위에<a>태그를 넓게 덮어씌우는 기법을 실무에서 굉장히 많이 사용해요!
이미지 링크 (Image links)
이미지를 링크로 만들려면 <img> 요소를 <a> 요소로 감싸면 끝이에요. 아래 예시는 로컬(내 컴퓨터/서버)에 저장된 SVG 이미지 파일을 상대 경로로 불러와서 링크로 만드는 방법입니다.
/* 이미지가 너무 커지지 않게 CSS로 크기를 살짝 조절해 줍니다 */
img {
height: 100px;
width: 150px;
border: 1px solid gray;
}<a href="https://developer.mozilla.org/en-US/">
<img src="mdn_logo.svg" alt="MDN Web Docs" />
</a>이 코드는 MDN 로고 이미지 자체를 클릭할 수 있는 링크로 만들어줘요.
💡 참고 (Note):
웹에서 이미지를 다루는 더 깊이 있는 방법은 이후에 다뤄질 문서에서 본격적으로 배우게 될 테니 기대해 주세요!
title 속성으로 부가 정보 추가하기 (Adding supporting information with the title attribute)
링크에 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>이 코드를 실행하고 브라우저에서 링크 위에 마우스를 가만히 올려보세요. title에 적었던 내용이 팝업처럼 "툴팁(Tooltip)" 형태로 스르륵 나타날 거예요!
🚨 주의 사항 (Note):
링크의title은 오직 마우스를 호버(hover)했을 때만 나타납니다. 즉, 키보드로 웹 서핑을 하거나 스마트폰의 터치스크린을 이용하는 사용자들은 이title정보를 아예 볼 수 없다는 뜻이죠.
만약 이 정보가 웹페이지를 이해하는 데 정말 중요한 핵심 내용이라면, 툴팁 안에 꽁꽁 숨겨두지 말고 일반 텍스트로 화면에 바로 보여주어서 모든 사용자가 쉽게 접근할 수 있도록 배려해야 합니다.
직접 예제 링크 만들어보기 (Creating your own example links)
자, 이제 여러분 차례예요!
- MDN 사이트 내부의 플레이그라운드를 쓰거나, 시작 템플릿 파일을 복사해서 코드를 수정해 보세요.
- "Red squirrel(청설모/붉은 다람쥐)"과 "Eastern gray squirrel(동부 회색 다람쥐)" 텍스트를 각각 관련 위키백과 페이지로 연결해 보세요. 그리고 각 링크에 다람쥐의 학명(Scientific name)을
title속성으로 넣어보세요. - "Wikipedia Squirrel page" 텍스트를 위키백과 다람쥐 메인 페이지로 연결해 보세요.
직접 해보시다가 잘 안 풀린다면 아래의 정답을 확인해 보세요!
정답 확인하기 (클릭해서 펼쳐보세요) 여러분이 작성한 최종 HTML 코드는 아래와 같은 모습이어야 합니다!<h1>Squirrels</h1>
<p>
Squirrels are commonly thought of as tree-dwelling mammals, but the squirrel
family extends far beyond that to include ground-dwelling rodents such as
chipmunks and prairie dogs, and flying squirrels.
</p>
<p>Two of the most common and best-known squirrel species are the:</p>
<ul>
<li>
<a
href="https://en.wikipedia.org/wiki/Red_squirrel"
title="Sciurus vulgaris">
Red squirrel
</a>
</li>
<li>
<a
href="https://en.wikipedia.org/wiki/Eastern_gray_squirrel"
title="Sciurus carolinensis">
Eastern gray squirrel
</a>
</li>
</ul>
<p>
For a good starting point on squirrel information, see the
<a href="https://en.wikipedia.org/wiki/Squirrel">Wikipedia Squirrel page</a>.
</p>URL과 경로에 대한 간단한 입문 (A quick primer on URLs and paths)
링크의 목적지는 항상 URL입니다. URL(Uniform Resource Locator)은 어떤 리소스가 웹의 어디에 위치해 있는지 정확히 정의하는 텍스트 문자열이에요. 예를 들어 모질라의 영문 홈페이지 위치는 https://www.mozilla.org/en-US/ 랍니다.
웹 서버는 이 URL에 대한 요청(Request)을 받고, 알맞은 리소스로 응답(Response)을 보내줘요. 대부분의 리소스는 서버 컴퓨터의 파일 시스템 안에 파일 형태로 고스란히 저장되어 있기 때문에, URL의 형태는 실제 파일의 경로(file paths)와 아주아주 비슷하게 생겼답니다.
💡 참고 (Note):
엄밀히 말하면 '파일 경로'와 'URL'은 똑같은 게 아니에요. 하지만 지금은 여러분의 쉬운 이해를 돕기 위해 둘을 사실상 같은 것이라고 생각하고 설명할게요. 이 둘의 차이점은 아래쪽의 URL은 어떻게 파일 경로로 변환될까요? 섹션에서 더 자세히 다룰 거예요.
서버의 디렉터리(폴더) 구조 예시를 한번 살펴볼까요?
이 디렉터리 구조의 가장 맨 위, 뿌리가 되는 곳을 루트(root)라고 부르고, 이 예시에서는 이름이 creating-hyperlinks네요. 보통 우리가 웹사이트 작업을 로컬 폴더에서 진행할 때, 사이트 전체를 담고 있는 단 하나의 최상위 디렉터리를 만들게 돼요.
이 루트 안에는 index.html 파일과 contacts.html 파일이 있습니다. 실제 웹사이트에서 index.html은 보통 홈 페이지(Home page)나 랜딩 페이지(방문자가 처음 도착하는 곳) 역할을 한답니다.
루트 디렉터리 안에는 pdfs와 projects라는 두 개의 하위 디렉터리도 있네요. 각각 내부에는 단일 파일이 하나씩 들어있어요. PDF 파일(project-brief.pdf)과 또 다른 index.html 파일이죠. 여기서 눈여겨볼 점은, 파일이 저장된 위치(경로)만 서로 다르면 한 프로젝트 안에 index.html이라는 이름의 파일을 여러 개 만들어도 아무 문제가 없다는 거예요! 두 번째 index.html은 아마도 프로젝트 관련 정보만을 담고 있는 서브 메인 랜딩 페이지 역할을 하겠죠.
이제 이 디렉터리 구조 안에서 파일들끼리 링크를 요리조리 걸어보면서, 다양한 '경로 지정 방식'을 연습해 볼게요.
같은 디렉터리 (Same directory)
만약 최상위 루트에 있는 index.html 파일 안에서, 똑같이 최상위에 있는 contacts.html로 링크를 걸고 싶다면 어떻게 해야 할까요?
두 파일이 같은 디렉터리에 살고 있으니까, 그저 연결하고 싶은 파일의 이름만 딸랑 적어주면 끝입니다. 사용할 URL은 그저 contacts.html 이에요.
<p>
Want to contact a specific staff member? Find details on our
<a href="contacts.html">contacts page</a>.
</p>같은 디렉터리에 있는 파일의 경로를 표시할 때 점 한 개와 슬래시를 써서 ./로 시작할 수도 있어요. 아래 코드는 바로 위 코드와 완전히 똑같은 동작을 합니다. 어떤 분들은 ./를 명시적으로 써주는 게 '아, 이건 현재 내 위치라는 뜻이구나!' 하고 눈에 확 띄어서 더 선호하기도 하죠.
<p>
Want to contact a specific staff member? Find details on our
<a href="./contacts.html">contacts page</a>.
</p>👨🏫 강사님의 꿀팁:
사실 단순한 HTML 문서를 넘어서서, 나중에 자바스크립트 모듈(import/export) 같은 것을 다루실 때는 파일을 불러올 때./를 반드시 명시해야만 에러가 나지 않는 경우가 꽤 있어요! 하지만 일반적인 HTML 태그 속성이나 CSS에서는./를 과감히 생략하셔도 전혀 문제없으니 마음 편히 작성하세요!
하위 디렉터리로 이동하기 (Moving down into subdirectories)
만약 루트의 index.html에서 projects/index.html 파일로 링크를 걸어주고 싶다면요?
이번에는 목적지 파일의 이름을 적어주기 전에, 먼저 projects라는 폴더 안으로 쏙 들어가야 해요. 방법은 간단합니다. 디렉터리 이름을 먼저 쓰고, 슬래시(/)를 넣은 다음, 파일 이름을 써주세요. URL은 projects/index.html이 됩니다.
<p>Visit my <a href="projects/index.html">project homepage</a>.</p>상위 디렉터리로 다시 올라가기 (Moving back up into parent directories)
이번엔 반대로 projects/index.html 파일 내부에서 링크를 걸어서 pdfs/project-brief.pdf 파일로 이동하고 싶다면 어떡할까요?
현재 projects 폴더 안에 갇혀 있으니, 폴더 밖으로 한 칸 빠져나와서(위로 올라가서), 다시 pdfs 폴더 안으로 내려가야겠죠.
디렉터리 밖으로 한 칸 위로 올라가려면 점 두 개 ..를 사용합니다! 따라서 URL은 ../pdfs/project-brief.pdf가 됩니다.
<p>A link to my <a href="../pdfs/project-brief.pdf">project brief</a>.</p>💡 참고 (Note):
만약 폴더 구조가 아주아주 깊다면, 이 문법들을 연속으로 섞어서../../../complex/path/to/my/file.html처럼 복잡한 경로를 만들어낼 수도 있습니다.
루트 디렉터리를 기준으로 링크하기 (Linking relative to the root directory)
위에서 배운 경로 작성법도 잘 작동하지만, 한 가지 치명적인 단점이 있어요. 링크가 쓰인 파일이든, 링크가 가리키는 대상 파일이든 누군가 실수로 다른 폴더로 옮겨버리면? 네, 경로가 어긋나서 링크가 와장창 깨져버리게 됩니다(엑스박스!).
내가 링크가 적힌 파일을 어디로 이리저리 옮기든 절대 깨지지 않는 무적의 링크를 만들고 싶다면, 경로의 제일 앞에 단일 슬래시(/)를 딱 하나 붙여보세요. 이건 "이 사이트의 가장 최상위 루트 디렉터리부터 경로 탐색을 시작하겠습니다!"라는 뜻이랍니다.
예를 들어 방금 작성했던 projects/index.html 안의 링크를 이렇게 바꿀 수 있어요.
<p>A link to my <a href="/pdfs/project-brief.pdf">project brief</a>.</p>이제 이 경로는 무조건 루트 디렉터리(creating-hyperlinks)에서 출발해서 -> pdfs 폴더로 들어가 -> project-brief.pdf 파일을 찾아냅니다. 만약 여러분이 이 링크 코드를 복사해서 저 깊숙한 곳에 있는 a/b/c/d/e/index.html 파일 안에 붙여넣어도 아무 문제 없이 완벽하게 작동할 거예요!
(물론 대상 파일인 project-brief.pdf 자체를 다른 곳으로 옮겨버리면 그땐 링크가 깨지겠죠?)
웹 개발을 하다 보면 앞으로 정말 귀에 딱지가 앉도록 듣게 될 용어 두 가지를 여기서 정리해 드릴게요. 바로 절대 경로(Absolute path)와 상대 경로(Relative path)입니다.
- 절대 경로 (Absolute path): 내 사이트 (또는 웹상의 어딘가)에 정의된 절대적이고 고정적인 위치를 가리켜요. 방금 본 예시처럼 맨 앞에 슬래시를 써서
/pdfs/project-brief.pdf라고 적어주면, 사이트 루트를 기준으로 변하지 않는 절대 경로가 됩니다. - 상대 경로 (Relative path): 이 링크 코드가 작성되어 있는 '현재 파일'의 위치를 기준으로 상대적인 위치를 가리켜요. 앞서 다룬
projects/index.html처럼 작성하면 현재 위치에서 출발하는 상대 경로가 되죠. 만약 현재 파일을 다른 폴더로 옮기면 출발지가 바뀌므로 대상이 가리키는 절대 위치도 덩달아 달라지게 됩니다.
👨🏫 강사님의 부연 설명:
사실 '절대 경로'라는 용어는 상황에 따라 일관되지 않게 쓰일 때도 있어요./pdfs/project-brief.pdf는 내 파일의 위치와 상관없는 고정 경로이긴 하지만, 결국 사이트의 '도메인 이름(예:example.com)'을 기준으로 삼고 있죠. 진정한 의미의 '웹 전체를 기준으로 한 절대 경로'는https://example.com/pdfs/project-brief.pdf처럼 http 프로토콜부터 도메인 주소까지 전체를 풀(full)로 적어준 것을 말한답니다.
전체 URL로 링크하기 (Linking with full URLs)
아예 전체 URL을 꽉 채워서 경로로 지정할 수도 있어요. 이렇게 작성하면 이 링크 코드를 어디에 갖다 쓰든 간에, 무조건 웹상의 똑같은 위치를 가리키게 되죠.
<a href="https://www.example.com/projects/">projects</a>이 링크는 여러분이 나중에 사이트를 아예 다른 도메인으로 이사하더라도 무조건 https://www.example.com/projects/로만 연결될 거예요.
내부 링크와 외부 링크 (Internal and external links)
- 내부 링크 (Internal link): 링크가 내 웹사이트 안에 있는 리소스(페이지, 이미지 등)를 가리킬 때 부르는 말이에요.
- 외부 링크 (External link): 링크가 내 사이트가 아닌 다른 남의 사이트를 가리킬 때 부르는 말이죠.
외부 링크를 지정할 때는 무조건 전체 URL을 경로로 다 적어줘야 해요!
<a href="https://www.some-other-site.com">projects</a>/pdfs/project-brief.pdf나 projects/index.html 같은 상대 경로로는 다른 웹사이트를 가리킬 수 없어요. 이 녀석들은 내 사이트 내부에서 길을 찾는 방식이고, 브라우저가 남의 서버까지 바다 건너 찾아가려면 그 사이트의 정확한 도메인 이름을 알아야 하거든요.
반면 내부 링크를 걸 때는 상대 경로, 절대 경로, 전체 URL 뭘 써도 상관이 없습니다. 아래 두 코드는 결국 똑같은 곳을 가리켜요.
<a href="https://www.example.com/projects/">projects</a>
<a href="projects">projects</a>하지만 가급적 두 번째 방법처럼 전체 도메인을 뺀 경로를 쓰시길 강력히 권장해요!
이유가 뭐냐고요? 바로 이식성(Portability) 때문입니다. 도메인까지 하드코딩해서 https://www.example.com/projects/ 라고 박아두면, 나중에 내 사이트 이름이 another-example.com으로 바뀌었을 때 내부에 적어둔 모든 URL 링크들을 일일이 찾아다니며 수정해야 하는 끔찍한 막노동을 해야 하거든요. 도메인을 빼고 상대경로나 루트 경로를 적어두면 사이트 주소가 바뀌어도 아무 수정 없이 알아서 잘 작동합니다.
문서 조각 / 앵커 (Document fragments)
링크를 누르면 항상 문서의 맨 꼭대기로만 이동하는 건 아니에요. HTML 문서 내의 특정한 위치로 슝~ 하고 건너뛰게 만들 수 있는데, 이를 문서 조각(Document fragment) 또는 앵커라고 부릅니다.
문서 안의 특정 HTML 요소에 id 속성을 달아주면, 그곳으로 다이렉트로 날아갈 수 있는 문서 조각 링크가 자동으로 만들어집니다.
가장 흔하게 쓰이는 패턴은 특정 제목(Heading)으로 건너뛰게 하는 거예요. 이렇게 말이죠.
<h2 id="mailing_address">Mailing address</h2>특정 id가 있는 곳으로 링크를 걸려면, 경로의 맨 마지막에 해시(우물 정) 기호 #를 붙이고 그 뒤에 해당 id 이름을 적어주면 됩니다!
<p>
Want to write us a letter? Use our
<a href="contacts.html#mailing_address">mailing address</a>.
</p>놀랍게도 파일 경로를 아예 빼버리고 문서 조각 참조(#)만 단독으로 써서 현재 보고 있는 문서 안의 다른 부분으로 스크롤 이동하게 만들 수도 있어요! 스크롤이 끝도 없이 긴 페이지에서 "맨 위로 가기" 같은 버튼을 만들 때 정말 유용하답니다.
<p>
The <a href="#mailing_address">company mailing address</a> can be found at the
bottom of this page.
</p>URL은 어떻게 파일 경로로 변환될까요? (How do URLs translate into file paths?)
지금까지 우리가 살펴본 링크의 목적지들은 모두 웹 서버가 찰떡같이 처리해서 해당 리소스를 찾아주는 URL이었어요.
중요한 사실 하나! 웹 콘텐츠는 절대로 서버의 진짜 파일 시스템 구조를 직접 들여다볼 수 없습니다. (보안상 아주 당연한 일이죠!)
지금까지 우리가 가정한 서버 예시는 정적 웹사이트(Static website)였어요. 정적 서버는 URL에서 경로명(pathname) 부분만 쏙 빼서, 서버 컴퓨터의 파일 시스템 내부에 일치하는 파일이 있는지 있는 그대로 1:1 매칭시켜 찾아줍니다.
💡 참고 (Note):
실제로는 정적 파일을 보내주기보다는, 사용자가 요청한 URL에 맞춰서 그때그때 코드를 실행해 콘텐츠를 찍어내서(동적으로) 보내주는 서버가 훨씬 많아요. 나중에 여러분이 웹 프레임워크를 쓰게 되면, 여러분이 코딩하는 소스 코드 폴더 구조와 실제 서버로 배포되는 구조가 완전히 달라지는 경험을 하시게 될 겁니다. 여러분의 웹사이트가 원활히 돌아가게 하려면, 내가 작성한 URL이 어떻게 소스 파일로 매핑되는지 본인의 빌드 도구와 서버 환경 설정을 잘 이해하고 있어야 해요.
자, 만약 도메인 이름이 example.com이고, 우리가 만든 샘플 폴더를 루트로 삼아서 로컬 테스트 서버를 켰다고 해볼게요.
그러면 pdfs/project-brief.pdf 파일은 https://www.example.com/pdfs/project-brief.pdf 라는 URL로 세상에 공개됩니다.
모든 링크는 현재 머물고 있는 문서의 URL을 기준으로 경로를 계산해요.
- 도메인이
https://example.com인 상황에서/pdfs/project-brief.pdf라는 절대 경로 링크를 걸면, 브라우저는 무조건 경로명이/pdfs/project-brief.pdf인https://www.example.com/pdfs/project-brief.pdf로 찾아갑니다. 서버는 루트 디렉터리에서pdfs폴더를 찾고, 그 안에서 해당 파일을 꺼내주죠. projects/index.html같은 상대 경로 링크는 이 코드를 어디에 작성했냐에 따라 결과가 확 달라집니다. 최상위 루트에 있는index.html이나contacts.html파일 안에서 불렀다면https://www.example.com/projects/index.html로 잘 가겠죠. 하지만 만약pdfs/index.html파일 안에서 이 링크를 불렀다면? 브라우저는 현재 위치에서 출발해서https://www.example.com/pdfs/projects/index.html을 찾으려 할 테고, 그런 폴더는 존재하지 않으니 (404 Not Found) 깨진 링크가 되어버립니다!
기본 index.html 페이지의 마법
index.html 파일로 링크를 걸 때는 보통 URL 끝에 굳이 index.html이라고 파일명까지 구구절절 써줄 필요가 없어요. 웹 서버는 파일명이 생략되었을 때, "아! 기본 랜딩 페이지인 index.html을 찾는 거구나!" 하고 알아서 찾아 보여주도록 기본 세팅이 되어 있거든요.
그래서 아까 작성했던 projects/index.html 경로의 예시를 보면, 그냥 짧게 projects 라고만 적어도 완벽하게 https://www.example.com/projects/index.html로 연결된답니다! 우리가 웹 브라우저 주소창에 들어갈 때도 https://www.example.com/projects/ 라고만 쳐도 원하는 페이지가 뿅 하고 나오게 되죠.
🚨 중요: 후행 슬래시(Trailing slash) (Note):
여기서 아주 조심해야 할 꿀팁 하나! URL 맨 끝에 붙는 슬래시(/)는 겉보기엔 작아 보여도 엄청난 차이를 만듭니다.
만약 주소창에 슬래시가 있는 상태인https://www.example.com/projects/에 머물고 있을 때, 상대 경로로contacts.html을 불렀다고 쳐볼게요. 브라우저는 "projects 폴더 안에 있는 파일이구나!" 하고 인식해서https://www.example.com/projects/contacts.html을 정상적으로 찾아냅니다.
그런데 끝에 슬래시가 빠져서 브라우저 주소가https://www.example.com/projects였다면? 브라우저는 "어라?projects가 폴더 이름이 아니라 파일 이름인가 보네?" 하고 착각해서 그 위 폴더인https://www.example.com/contacts.html(루트 위치)를 찾아버리게 되고, 결국 상대 링크가 망가지게 됩니다.
웹 서버들마다 이 마지막 슬래시를 처리하는 방식이 천차만별이니 이 원리를 꼭 기억해 두세요!
링크 모범 사례 (Link best practices)
링크를 작성할 때 꼭 지키면 좋은, 현업에서 통용되는 베스트 프랙티스(모범 사례)들을 알아볼게요!
명확한 링크 문구 사용하기 (Use clear link wording)
화면에 아무렇게나 링크를 띡 던져놓는 건 너무 쉬운 일이죠. 하지만 진정한 프론트엔드 개발자라면 그걸로 만족해선 안 됩니다! 우리는 현재 처한 상황이나 사용하는 기기에 상관없이 누구나 이 링크에 쉽게 접근(Accessible)할 수 있게 만들어야 해요.
- 화면 낭독기(Screen reader) 사용자들은 보통 페이지 전체를 순서대로 읽기보다, 화면을 스킵하며 페이지 안의 링크들만 징검다리 건너듯 넘나들며 정보를 파악하는 걸 좋아해요.
- 검색 엔진 봇들은 이 링크의 텍스트(Anchor text)를 분석해서 대상 파일이 무엇인지 색인(Indexing)합니다. 그래서 목적지를 잘 설명하는 핵심 키워드를 링크 텍스트에 녹여내면 검색 랭킹(SEO) 향상에 아주 긍정적인 영향을 줍니다.
- 눈으로 화면을 보는 일반 사용자들도 글을 정독하기보단 휙휙 스캐닝하듯 훑어보는데, 보통 색깔이 튀고 밑줄이 그어져 있는 링크로 눈길이 가게 마련이죠. 이들에게 잘 쓰인 링크 텍스트는 큰 도움이 됩니다.
직접 비교해 볼까요?
👍 좋은 예시: 목적지가 명확합니다. Download Firefox
<p><a href="https://www.firefox.com/en-US/">Download Firefox</a></p>👎 나쁜 예시: 앞뒤 문맥을 안 읽으면 어디로 가는지 알 수가 없습니다. Click here to download Firefox
<p>
<a href="https://www.firefox.com/en-US/">Click here</a> to download Firefox
</p>👨🏫 강사님의 꿀팁 4가지:
1. URL 전체 주소를 그대로 링크 텍스트로 쓰지 마세요. 너무 못생겨 보일 뿐만 아니라, 화면 낭독기가 "에이치 티 티 피 에스 콜론 슬래시 슬래시..." 하면서 한 글자씩 또박또박 다 읽어주는 고문을 선사하게 됩니다.
2. "여기를 클릭하세요(Click here)" 또는 "이 링크(Link)" 같은 말은 제발 피해주세요! 쓸데없는 잡음일 뿐이에요. 시각 장애인용 화면 낭독기는 이미 자체적으로 "이건 링크입니다"라고 알려줍니다. 거기다 대고 또 링크라고 말할 필요가 없어요. 화면을 볼 수 있는 사용자들도 파란색과 밑줄이라는 관습적인 스타일을 보고 링크인 걸 이미 직관적으로 안답니다. (이런 스타일 관습은 사용자들이 익숙해져 있으니 함부로 깨지 않는 것이 좋아요.)
3. 링크 텍스트는 가능한 한 짧고 간결하게 쓰세요. 화면 낭독기가 긴 텍스트를 끝까지 다 읽고 해석해야 하는 수고를 덜어줄 수 있습니다.
4. 한 페이지 안에 똑같은 텍스트("여기 클릭", "여기 클릭", "여기 클릭"...)를 가진 링크가 각기 다른 곳을 가리키게 두지 마세요. 화면 낭독기 사용자가 앞뒤 문맥 없이 "여기 클릭"이라는 목록만 쭉 듣는다고 상상해 보세요. 뭐가 뭔지 도저히 구분이 안 갈 겁니다.
비 HTML 리소스에 링크하기 - 명확한 안내 표지판 세워주기 (Linking to non-HTML resources — leave clear signposts)
웹페이지로 자연스럽게 이동하는 일반적인 내비게이션이 아니라, 무언가 사용자가 예상치 못한 일이 벌어질 것 같은 링크라면? 링크 텍스트 안에 어떤 일이 일어날지 명확하게 미리 알려주는 센스가 필요합니다!
예를 들어 파일을 다운로드하거나 비디오를 스트리밍할 때, 혹은 갑자기 팝업창이 뜨거나 하는 경우라면 그 사실을 텍스트에 꼭 적어주세요.
데이터 요금제가 넉넉지 않거나 느린 환경에 있는 사용자가 뭣도 모르고 수십 메가바이트짜리 파일을 다운받는 불상사를 피할 수 있겠죠. 또한 갑자기 새 탭이 열리거나 다운로드가 시작되었을 때 상황 파악이 안 돼 당황할 수 있는 화면 낭독기 사용자들에게 훌륭한 마음의 준비(?)를 시켜줄 수 있답니다.
<p>
<a href="/large-report.pdf" download>
Download the sales report (PDF, 10MB)
</a>
</p>
<p>
<a href="https://www.example.com/video-stream/" target="_blank">
Watch the video (stream opens in separate tab, HD quality)
</a>
</p>다운로드 링크에 download 속성 사용하기 (Use the download attribute when linking to a download)
링크가 단순히 웹 브라우저 화면에서 열리는 게 아니라 무언가 파일을 다운로드하게 만들고 싶을 때는 download 속성을 써주면 아주 유용합니다. 이 속성에 값을 지정해주면, 사용자가 파일을 다운로드할 때 '기본으로 저장될 파일 이름'까지 우리가 예쁘게 정해줄 수 있거든요!
아래는 최신 버전의 Windows용 Firefox 브라우저 설치 파일을 다운로드하는 예시입니다.
<a
href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=en-US"
download="firefox-latest-64bit-installer.exe">
Download Latest Firefox for Windows (64-bit) (English, US)
</a>새 탭에서 링크를 열어야 할 때 (When to open links in a new tab)
웹에서 링크는 기본적으로 사용자가 머물고 있던 현재 탭(창)에서 그대로 이동하게 설정되어 있습니다. 덕분에 브라우저의 '뒤로 가기' 버튼을 눌러서 언제든 쉽게 이전 페이지로 돌아올 수 있죠.
하지만 MDN을 비롯한 수많은 사이트들은 특정 링크(특히 외부 링크!)를 새 탭에서 열리게 만듭니다. 이럴 때는 target 속성을 "_blank"로 설정해주면 됩니다.
Firefox is developed by the
<a href="https://www.mozilla.org/en-US/" target="_blank">Mozilla Foundation</a>.하지만 링크를 새 탭으로 띄우는 건 사용자 경험(UX) 디자인 측면에서 아주 신중하게 생각하고 결정해야 할 문제예요. 고려해야 할 점들을 알려드릴게요.
- 새 탭으로 열면 두 개의 문서를 동시에 화면에 띄워놓고 "나란히(parallel)" 볼 수 있다는 장점이 있습니다. 반면, 현재 탭에서 바로 이동하는 것은 현재 흐름이 쭈욱 이어지는 "연장선(continuation)" 같은 느낌을 줍니다.
- 뒤로 가기 버튼을 누르는 데 익숙해져 있는 사용자들은, 새 탭이 열린 줄 모르고 무의식적으로 뒤로 가기를 눌렀다가 안 먹혀서 멘붕에 빠질 수 있습니다.
- 일반 링크라도 사용자가 원한다면 키보드 단축키(Ctrl+클릭)나 마우스 우클릭 메뉴를 써서 본인 마음대로 새 탭에서 열 수 있습니다. 반대로 개발자가 강제로 새 탭(
_blank)을 박아버리면, 사용자가 억지로 현재 탭에서 열게 하기는 아주 힘듭니다. - 화면 낭독기 사용자들은 탭이 새로 열렸다는 사실조차 눈치채지 못할 수 있어서, 내가 지금 웹페이지의 어디쯤 있는지 문맥을 잃어버리고 혼란스러워할 수 있습니다.
👨🏫 강사님의 현업 팁:
그래서 보통 프론트엔드 디자인 업계에서는 "내 사이트 안에서 돌아다니는 내부 링크는 현재 탭에서 열고, 아예 밖으로 나가는 외부 링크는 새 탭에서 연다"는 암묵적인 룰을 많이 따릅니다.
(물론 어떤 디자이너들은 모든 링크를 무조건 현재 탭에서 열게 고집하기도 해요!)
만약 새 탭에서 열리는 링크를 쓴다면, 사용자에게 "이거 누르면 새 창이 뜰 거야!"라는 힌트를 줄 수 있도록 링크 텍스트 옆에 ↗️ 이런 작은 아이콘을 붙여주시는 걸 강력히 추천합니다.
내비게이션 메뉴 만들기 (Creating a navigation menu)
실습 시간입니다! 여러 개의 HTML 파일을 만들고 내비게이션 메뉴(메뉴바)로 서로를 연결해서, 진짜 그럴싸한 다중 페이지 웹사이트를 한번 만들어 볼까요?
실제 웹사이트들이 가장 흔하게 사용하는 방식이에요. 똑같은 레이아웃과 내비게이션 메뉴 코드를 모든 페이지에 공통으로 붙여놓고, 링크를 누르면 이동하게 해서 사용자 입장에서는 마치 제자리에 가만히 있고 가운데 알맹이(콘텐츠)만 다른 것으로 바뀌는 것 같은 느낌을 주는 거죠.
로컬 폴더를 하나 만드시고 아래 4개의 파일 사본을 다운받아 같은 곳에 넣어주세요. 전체 원본 코드는 navigation-menu-start (GitHub)에서 보실 수 있습니다.
여러분이 하실 일은 다음과 같습니다.
1. 한 페이지의 지정된 위치에 순서 없는 목록(<ul>) 태그를 추가하고, 그 안에 우리가 이동할 페이지 이름들을 쭉 적어봅니다. 내비게이션 메뉴는 의미론적으로(Semantically) "링크들의 목록"에 불과하므로, 이렇게 리스트 태그를 쓰는 게 아주 정석적인 방법이에요.
2. 적어둔 각 페이지 이름을 <a> 태그로 묶어서 링크로 변신시켜주세요.
3. 완성된 내비게이션 메뉴 코드를 나머지 페이지들에도 복사해서 쫙 붙여넣습니다.
4. (핵심!) 각각의 페이지에 가서, 자기 자신을 가리키는 링크는 지워주세요. 예를 들어 사진 페이지에선 'Pictures' 링크를 지우는 거죠. 지금 머물고 있는 페이지를 가리키는 링크는 헷갈리고 아무 쓸모가 없거든요! 게다가 링크가 사라진 걸 보면 사용자가 "아, 내가 지금 이 페이지에 들어와 있구나!" 하고 바로 알아차릴 수 있는 아주 훌륭한 시각적 알리미 역할도 해줍니다.
성공적으로 완성했다면 아래 이미지와 비슷한 모양이 될 거예요.
💡 참고 (Note):
혼자 하다가 막히거나, 내가 한 게 맞는지 확인해보고 싶다면 navigation-menu-marked-up (GitHub) 디렉터리에 있는 정답 코드를 슬쩍 커닝해 보세요!
이메일 링크 (Email links)
웹사이트에 어떤 웹페이지 주소가 아니라, 클릭하자마자 사용자의 이메일 앱(Outlook 등)이 팟! 하고 켜지면서 새 메일 쓰기 창이 나오게 하는 링크도 만들 수 있어요.
<a> 요소와 mailto: 라는 URL 스킴(Scheme)을 사용하면 됩니다.
가장 흔하게 쓰이는 기본 형태는 받는 사람의 이메일 주소를 명시해 두는 거예요.
<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>클릭하면 이렇게 보입니다 👉 Send email to nowhere
사실 이메일 주소는 안 적어도 상관없어요. 받는 사람을 비워두고 그냥 href="mailto:" 라고만 적어두면, 사용자의 메일 앱에서 빈 새 이메일 창이 열리게 됩니다. 사용자가 메일 주소를 직접 적어서 아무한테나 내 사이트를 공유하게 만드는 "공유하기" 버튼을 만들 때 은근히 유용하게 쓰이죠.
세부 정보 지정하기 (Specifying details)
이메일 주소뿐만 아니라 이메일에 들어갈 여러 가지 옵션(표준 메일 헤더 필드)들을 링크 하나에 미리 다 세팅해 둘 수 있어요!
가장 많이 쓰이는 옵션은 "참조(cc)", "숨은 참조(bcc)", "제목(subject)", 그리고 메일에 미리 적혀있을 "메일 내용(body)"입니다. (body는 엄밀히 말해 헤더 필드는 아니지만 많이 쓰여요.)
이 값들은 URL 끝에 쿼리 파라미터(Query term) 방식으로 덧붙이게 됩니다.
참조, 숨은 참조, 제목, 내용까지 알차게 다 넣어본 예시를 볼까요?
<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):
위 코드에서%20같은 요상한 기호가 보이시나요? URL에는 띄어쓰기(공백)나 탭, 줄바꿈 같은 눈에 안 보이는 출력 불가 특수 기호를 있는 그대로 쓸 수 없기 때문에, 이를 웹이 알아먹을 수 있는 문자로 치환해 줘야 합니다. 이를 퍼센트 인코딩(URL 인코딩)이라고 불러요. 스페이스바(공백)는%20으로 맵핑되죠.
또한, 첫 번째 옵션을 시작할 때는 물음표(?)로 메인 URL과 구분해주고, 두 번째 옵션부터는 앰퍼샌드(&)를 써서 값들을 이어붙인다는 점을 눈여겨보세요! 이것이 웹 표준 URL 쿼리 표기법입니다. 이 개념은 나중에 폼(Form) 데이터를 다룰 때 배우게 될 GET 메서드 (The GET method) 파트에서 왜 이렇게 쓰는지 훨씬 깊게 이해하실 수 있을 거예요.
여기 몇 가지 다른 형태의 mailto URL 샘플들이 있으니 구조를 익혀두세요!
