topic★★★★★난이도 · 약 10분
링크로 세계 연결하기
a 태그와 href 속성으로 하이퍼링크를 만든다. 절대 경로 vs 상대 경로.
#a#href#target#링크#경로
왜 배우는가
월드 와이드 웹(WWW)은 문서들이 서로 연결된 거대한 네트워크이다. 이 연결을 만드는 것이 바로 하이퍼링크이다.
링크는 a 태그와 href 속성으로 만듭니다
html
<!-- 외부 사이트 링크 -->
<a href="https://google.com">구글로 이동</a>
<!-- 새 탭에서 열기 -->
<a href="https://naver.com" target="_blank">네이버 (새 탭)</a>
<!-- 같은 사이트 내 페이지 -->
<a href="about.html">소개 페이지</a>a 태그의 href에 이동할 주소를 넣고, target="_blank"로 새 탭에서 열 수 있다.
| 속성 | 설명 |
|---|---|
| href | 이동할 주소 (URL 또는 파일 경로) |
| target="_blank" | 새 탭에서 열기 |
| 내부 텍스트 | 화면에 보이는 링크 텍스트 |
주소를 적는 방법에는 두 가지가 있습니다
| 구분 | 절대 경로 (전체 주소) | 상대 경로 (현재 위치 기준) |
|---|---|---|
| 예시 | `https://google.com` | `about.html` |
| 용도 | 외부 사이트 | 같은 사이트 내 이동 |
절대 경로: https://부터 시작하는 전체 주소 (외부 사이트 링크) 상대 경로: 현재 파일 위치 기준 (같은 사이트 내 이동) 같은 사이트 안에서는 상대 경로가 편리합니다.
좋아하는 사이트 링크를 홈페이지에 추가해봅시다
html
<h2>좋아하는 사이트</h2>
<ul>
<li>
<a href="https://github.com" target="_blank">GitHub</a>
— 코드 저장소
</li>
<li>
<a href="https://developer.mozilla.org" target="_blank">MDN</a>
— 웹 개발 문서
</li>
<li>
<a href="https://youtube.com" target="_blank">YouTube</a>
— 코딩 강의
</li>
</ul>ul 안에 a 태그로 링크를 만들어 좋아하는 사이트 목록을 정리한 예시.
| 핵심 | 설명 |
|---|---|
| `<a>` | 하이퍼링크를 만드는 태그 |
| href | 이동할 URL 주소를 지정하는 속성 |
| target="_blank" | 링크를 새 탭에서 여는 설정 |
| 경로 종류 | 설명 |
|---|---|
| 절대 경로 | https://로 시작하는 전체 URL |
| 상대 경로 | 현재 파일 기준으로 상대적 위치 지정 |
외부 링크에는 target="_blank"를 붙여 사용자 경험을 개선하세요.
실기 드릴 3문항
edit실기 드릴 · 단답형
링크를 새 탭에서 열리게 하려면 어떤 속성을 추가해야 하는가?
check_circle실기 드릴 · OX
<a> 태그 안에 이미지를 넣으면 이미지를 클릭해서 이동할 수 있다.
edit실기 드릴 · 단답형
<a> 태그에서 새 탭으로 열리게 하려면 target 속성에 어떤 값을 넣어야 하는가?