링크는 웹의 핵심 구성 요소 중 하나로, 사용자가 한 페이지에서 다른 페이지로, 또는 특정 웹사이트로 이동할 수 있게 해 줍니다. 링크를 올바르게 사용하려면 절대 경로와 상대 경로라는 두 가지 중요한 개념을 이해해야 합니다. 이번 포스팅에서는 절대 경로와 상대 경로의 차이점을 이해하고, HTML에서 하이퍼링크를 만드는 방법을 배워보도록 하겠습니다. 이론을 설명한 다음 즉각적인 실습을 통해 지식을 굳히는 시간을 가져봅시다.
이론: 링크와 하이퍼링크
1. 하이퍼링크 (Hyperlink)
하이퍼링크는 웹 페이지에서 텍스트나 이미지를 클릭하면 다른 페이지로 이동하는 링크를 말합니다. HTML에서는 <a> (anchor) 태그를 사용하여 하이퍼링크를 생성합니다.
<a href="https://www.example.com">방문하기</a>
위 코드에서 href 속성은 "h yperlink r eference"의 약자로, 링크의 목적지 주소를 지정합니다.
2. 절대 경로 (Absolute Path)
절대 경로는 리소스의 전체 URL을 제공합니다. 이것은 프로토콜(http://, https://), 도메인 이름(http://www.example.com), 파일 경로(/images/photo.jpg)까지 포함된 완전한 경로입니다. 어느 위치에서 해당 링크를 클릭하든 동일한 목적지에 도달합니다.
3. 상대 경로 (Relative Path)
상대 경로는 현재 위치한 페이지의 URL을 기준으로 리소스의 위치를 지정합니다. 여기에는 폴더 레벨 구분자인 ../ (상위 폴더로 이동)가 포함될 수 있습니다. 상대 경로는 사이트 내에서 다른 페이지로 링크할 때 자주 사용됩니다.
실습: 링크와 하이퍼링크 생성하기
웹 페이지에서 절대 경로와 상대 경로를 사용하여 링크를 생성해보겠습니다.
1. 텍스트 에디터를 열고 다음의 HTML 코드를 작성해 보세요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>링크와 하이퍼링크</title>
</head>
<body>
<h1>HTML 링크 연습</h1>
<h2>절대 경로를 사용한 외부 링크</h2>
<p><a href="https://www.google.com">Google 바로가기</a></p>
<h2>상대 경로를 사용한 내부 링크</h2>
<p><a href="pages/about.html">회사 소개 페이지로 이동</a></p>
<p><a href="/documents/report.pdf">연간 보고서 다운로드</a></p>
<p><a href="../contacts.html">연락처 페이지</a></p>
</body>
</html>
2. 이 파일을 links.html로 저장하고, 같은 폴더 내에 pages라는 폴더를 만들고 그 안에 about.html 파일을, documents 폴더를 만들고 그 안에 report.pdf 파일을, 상위 폴더에 contacts.html 파일을 만듭니다. (이 파일들은 존재하는 파일이어야 하며, 실제 내용이 있어야 링크가 올바르게 작동합니다.)
3. 저장한 파일을 웹 브라우저에서 열어 링크가 정상적으로 작동하는지 확인해 보세요.
코드 설명
- <a> 태그는 하이퍼링크를 만드는 데 사용되었습니다. href 속성으로 링크의 목적지를 지정합니다.
- 절대 경로 링크 예시에서는 완전한 URL을 사용해 Google로 이동하는 링크를 만들었습니다.
- 상대 경로 링크 예시에서는 현재 파일 위치를 기준으로 하여 다른 내부 페이지로의 링크를 생성했습니다. 상대 경로는 웹사이트 구조가 변경되었을 때 간단히 업데이트할 수 있다는 장점이 있습니다.
마무리
웹 페이지에서 링크를 생성하는 것은 사용자에게 추가 정보를 제공하고, 웹사이트 간의 내비게이션을 가능하게 하는 필수적인 기술입니다. 절대 경로와 상대 경로의 차이를 이해하고 적절히 활용하는 것은 웹 개발의 중요한 부분입니다.
오늘 배운 내용을 통해 여러분은 웹 페이지간의 연결을 자유롭게 구성할 수 있게 되었습니다. 다음 포스팅에서는 다른 중요한 HTML 요소에 대해 더 배워볼 예정입니다.
항상 행복한 코딩 되세요!