인터넷의 핵심 요소 중 하나는 바로 하이퍼링크입니다. 흔히 링크라고도 부르죠. 링크는 웹 페이지들을 서로 연결하여 인터넷을 거미줄처럼 엮어주며, 이를 통해 우리는 다양한 정보를 손쉽게 접근할 수 있습니다. 만약 웹 페이지 간에 링크가 없다면, 인터넷은 지금처럼 유용하지 않을 것입니다.
이번에는 HTML에서 링크를 생성하고 활용하는 방법에 대해 자세히 알아보겠습니다. 특히, 링크의 두 가지 주요 유형인 내부 링크와 외부 링크에 대해 설명하고, 이를 실제로 구현해보겠습니다.
링크의 두 가지 유형
1. 내부 링크 (Internal Links)
내부 링크는 같은 웹사이트 내의 다른 페이지로 연결되는 링크를 말합니다. 예를 들어, 블로그 페이지에서 다른 블로그 게시물로 이동하는 링크가 이에 해당합니다. 내부 링크를 통해 사용자는 웹사이트 내에서 다양한 콘텐츠를 탐색할 수 있습니다.
2. 외부 링크 (External Links)
외부 링크는 다른 웹사이트로 연결되는 링크를 말합니다. 예를 들어, 여러분의 웹사이트에서 교육 자료를 제공하는 외부 사이트인 Udemy나 MDN 웹 문서로 연결되는 링크가 이에 해당합니다. 외부 링크를 통해 사용자는 더 다양한 정보를 얻을 수 있습니다.
외부 링크 생성하기
우선, 외부 링크를 생성하는 방법부터 알아보겠습니다. 여기서는 MDN 웹 문서로의 링크를 예시로 들겠습니다.
1. 링크할 URL 가져오기
먼저, 링크하고자 하는 외부 웹페이지의 URL을 가져와야 합니다. 검색 엔진에서 "MDN HTML"을 검색하여 해당 페이지의 URL을 복사합니다.
예시 URL:
https://developer.mozilla.org/ko/docs/Web/HTML2. HTML 코드 작성하기
HTML에서 링크를 생성하려면 <a> 태그를 사용합니다. 이 태그는 앵커(anchor) 요소라고 부르며, 링크를 생성하는 데 사용됩니다.
<a href="https://developer.mozilla.org/ko/docs/Web/HTML">MDN 웹 문서</a>href속성에 링크하고자 하는 페이지의 URL을 입력합니다.- 태그 안의 콘텐츠인 "MDN 웹 문서"는 링크로 표시될 텍스트입니다.
3. 새 탭에서 열리게 하기 (선택 사항)
링크를 클릭했을 때 새 탭에서 열리도록 하려면 target="_blank" 속성을 추가합니다.
<a href="https://developer.mozilla.org/ko/docs/Web/HTML" target="_blank">MDN 웹 문서</a>target="_blank"는 링크를 새 탭에서 열리도록 지정하는 속성입니다.
내부 링크 생성하기
이번에는 웹사이트 내의 다른 페이지로 연결되는 내부 링크를 생성해보겠습니다. 이를 위해 새로운 HTML 파일을 생성하고, 그 파일로의 링크를 만들어보겠습니다.
1. 새로운 HTML 페이지 생성하기
예를 들어, blog.html이라는 새로운 페이지를 생성합니다.
<!-- blog.html -->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>블로그</title>
</head>
<body>
<h2>블로그 페이지</h2>
<p>이곳은 블로그 페이지입니다.</p>
<a href="index.html">홈으로 돌아가기</a>
</body>
</html>- 이 페이지는 간단한 구조로, 메인 페이지로 돌아가는 링크도 포함하고 있습니다.
2. 메인 페이지에서 내부 링크 생성하기
이제 메인 페이지인 index.html에서 blog.html로 연결되는 링크를 생성합니다.
<!-- index.html -->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>홈페이지</title>
</head>
<body>
<h1>환영합니다!</h1>
<a href="blog.html">블로그로 이동</a>
</body>
</html>href속성에 내부 페이지의 파일명을 입력하여 링크를 생성합니다.
아무 곳도 가리키지 않는 링크
가끔은 아직 존재하지 않거나 준비 중인 페이지에 대한 링크를 만들어야 할 때가 있습니다. 이럴 때는 href="#"를 사용하여 임시로 링크를 생성할 수 있습니다.
<a href="#">준비 중인 페이지</a>- 이 링크를 클릭하면 현재 페이지의 맨 위로 이동합니다.
- 이는 나중에 실제 페이지가 준비되면 해당 링크의
href속성을 업데이트하면 됩니다.
전체 실습 코드
이제 위에서 설명한 내용을 모두 합쳐서 전체 코드를 작성해보겠습니다.
index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>홈페이지</title>
</head>
<body>
<h1>환영합니다!</h1>
<p>우리 웹사이트에 오신 것을 환영합니다.</p>
<!-- 내부 링크 -->
<h2>내부 링크</h2>
<a href="blog.html">블로그로 이동</a>
<!-- 외부 링크 -->
<h2>외부 링크</h2>
<p>더 많은 정보를 원하시면 아래 링크를 참고하세요:</p>
<a href="https://developer.mozilla.org/ko/docs/Web/HTML" target="_blank">MDN 웹 문서</a>
<!-- 임시 링크 -->
<h2>준비 중인 페이지</h2>
<p>
<a href="#">챌린지</a><br>
<a href="#">Flexbox</a><br>
<a href="#">CSS Grid</a>
</p>
</body>
</html>blog.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>블로그</title>
</head>
<body>
<h2>블로그 페이지</h2>
<p>이곳은 블로그 페이지입니다.</p>
<a href="index.html">홈으로 돌아가기</a>
</body>
</html>요약 및 추가 설명
<a>태그는 링크를 생성하는 데 사용되는 앵커 요소입니다.href속성은 링크할 대상의 URL이나 파일 경로를 지정합니다.- 외부 링크의 경우, 전체 URL을 입력합니다. (예:
https://www.example.com) - 내부 링크의 경우, 상대 경로나 파일명을 입력합니다. (예:
about.html)
- 외부 링크의 경우, 전체 URL을 입력합니다. (예:
target속성은 링크를 클릭했을 때 열리는 방식을 지정합니다.target="_blank"는 새 탭에서 링크를 열도록 합니다.
- 임시 링크는 아직 준비되지 않은 페이지에 대한 링크를 나타낼 때 사용하며,
href="#"로 표시합니다.
링크 스타일링
기본적으로 링크는 파란색 텍스트에 밑줄이 그어져 있습니다. 이는 CSS를 사용하여 스타일을 변경할 수 있습니다. 하지만 기본 스타일은 사용자가 링크임을 쉽게 인식할 수 있도록 도와주므로, 특별한 이유가 없다면 기본 스타일을 유지하는 것이 좋습니다.
접근성 고려
링크 텍스트는 해당 링크의 목적을 명확하게 나타내야 합니다. "여기를 클릭하세요"와 같은 모호한 표현보다는 "MDN 웹 문서로 이동"처럼 구체적인 링크 텍스트를 사용하는 것이 좋습니다. 이는 사용자 경험을 향상시키고, 스크린 리더를 사용하는 시각장애인들에게도 도움이 됩니다.
결론
이번에 우리는 HTML에서 하이퍼링크를 생성하고 사용하는 방법에 대해 자세히 알아보았습니다. 링크는 웹의 핵심 요소로서, 웹 페이지들을 서로 연결하여 사용자가 다양한 정보를 손쉽게 접근할 수 있게 해줍니다. 내부 링크와 외부 링크를 적절히 활용하여 풍부하고 유용한 웹사이트를 만들어보세요.
이렇게 해서 링크를 생성하고 활용하는 방법을 알아보았습니다. 위의 전체 코드를 직접 작성하고 브라우저에서 열어보시면 링크가 제대로 동작하는 것을 확인하실 수 있습니다.
