[HTML 하이퍼링크 & 네비게이션] #03 페이지 내 이동, 외부 링크, 새 창 열기 실습

 

 

안녕하세요 토스트데브입니다.
이번 글에서는 HTML 하이퍼링크의 다양한 활용 방법에 대해 실습 중심으로 정리해보겠습니다.
단순한 링크를 넘어서 페이지 내 이동, 외부 웹사이트로 연결, 새 창 열기 등 실무에서 많이 사용되는 패턴들을 배워보세요!

 

 

🧷 기본 하이퍼링크 구조

HTML에서 링크를 걸 때는 <a> 태그를 사용합니다.

<a href="https://toastdev.kr">토스트데브 바로가기</a>

• href: 이동할 주소(URL 또는 앵커)를 지정합니다.

 

 

✅ 1. 페이지 내 특정 위치로 이동 (앵커 링크)

페이지 안에서 특정 영역으로 부드럽게 이동할 때 사용됩니다.
보통 목차나 긴 페이지에서 유용하게 쓰입니다.

🔹 구조 예시

<!-- 이동 버튼 -->
<a href="#section2">2번 섹션으로 이동</a>

<!-- 대상 영역 -->
<h2 id="section2">2번 섹션</h2>
<p>이곳이 이동 대상입니다.</p>

 

• href="#아이디" → 이동할 요소의 id와 일치해야 합니다.
• 반드시 이동 대상 요소에 id 속성이 있어야 합니다.

 

 

✅ 2. 외부 웹사이트로 이동하기

웹페이지에서 다른 사이트로 연결할 때 사용합니다.

<a href="https://www.google.com">구글로 이동</a>

 

• 외부 사이트일 경우, 보안과 접근성을 고려해 target과 rel 속성을 함께 사용하는 것이 좋습니다.

 

 

✅ 3. 새 창에서 열기 (target="_blank")

링크 클릭 시 새 탭 또는 새 창에서 열고 싶을 때 사용합니다.

<a href="https://naver.com" target="_blank" rel="noopener noreferrer">
  네이버 새 창으로 열기
</a>

🔒 보안 팁

• target="_blank" 사용 시 꼭 rel="noopener noreferrer"를 함께 사용해야 보안상 안전합니다.
• 그렇지 않으면 열린 새 창이 부모 페이지에 접근할 수 있습니다 (탭 납치 공격 등).

 

 

✅ 4. 이메일, 전화번호 링크

• 이메일 링크:

<a href="mailto:contact@toastdev.com">이메일 보내기</a>

• 전화번호 링크 (모바일):

<a href="tel:01012345678">전화 걸기</a>

 

 

✅ 5. 다운로드 링크 만들기

파일을 클릭해서 브라우저로 여는 게 아니라 다운로드하게 할 때 사용합니다.

<a href="/files/sample.pdf" download>PDF 다운로드</a>

 

 

💡 실습 정리: 메뉴 목차 만들기 예제

<nav>
  <a href="#intro">소개</a>
  <a href="#features">특징</a>
  <a href="#contact">문의</a>
</nav>

<section id="intro">
  <h2>소개</h2>
  <p>HTML 앵커 이동에 대한 내용입니다.</p>
</section>

<section id="features">
  <h2>특징</h2>
  <p>외부 링크, 새 창 열기 등 실습을 해봅니다.</p>
</section>

<section id="contact">
  <h2>문의</h2>
  <p>이메일 또는 전화 링크를 배워봅니다.</p>
</section>

 

 

🧩 마무리

HTML 하이퍼링크는 단순한 <a href> 태그 그 이상입니다.
사용자 경험을 고려한 내부 이동, 외부 연결, 새 창 열기, 파일 다운로드 등 다양한 방식으로 활용할 수 있죠.
위 예제들을 직접 따라 해 보시면서, 링크의 동작을 확실히 익혀보세요! 😊

 

 

#HTML #하이퍼링크 #a태그 #앵커링크 #웹페이지이동 #외부링크 #새창열기 #target속성 #웹접근성 #HTML실습 #프론트엔드기초 #코딩입문 #HTML강의 #toastdev #HTML링크