Ch.2 콘텐츠 쌓기 — 텍스트, 목록, 링크, 이미지
링크로 세계 연결하기
a 태그로 하이퍼링크를 만들 수 있다절대 경로와 상대 경로의 차이를 이해한다target 속성으로 새 탭에서 열기를 설정할 수 있다
웹이 '거미줄'이라 불리는 이유는 바로 링크 때문이다
월드 와이드 웹(WWW)은 문서들이 서로 연결된 거대한 네트워크입니다. 이 연결을 만드는 것이 바로 하이퍼링크입니다.
HTML에서 다른 페이지로 이동하는 길은 어떻게 만들까?
a 태그(anchor) — 텍스트나 이미지를 클릭하면 다른 곳으로 이동하게 만드는 태그입니다.
article
핵심 내용
링크는 a 태그와 href 속성으로 만듭니다
<!-- 외부 사이트 링크 -->
<a href="https://google.com">구글로 이동</a>
<!-- 새 탭에서 열기 -->
<a href="https://naver.com" target="_blank">네이버 (새 탭)</a>
<!-- 같은 사이트 내 페이지 -->
<a href="about.html">소개 페이지</a>주소를 적는 방법에는 두 가지가 있습니다
절대 경로: https://부터 시작하는 전체 주소 (외부 사이트 링크) 상대 경로: 현재 파일 위치 기준 (같은 사이트 내 이동) 같은 사이트 안에서는 상대 경로가 편리합니다.
좋아하는 사이트 링크를 홈페이지에 추가해봅시다
링크를 새 탭에서 열리게 하려면 어떤 속성을 추가해야 하는가?
<a> 태그 안에 이미지를 넣으면 이미지를 클릭해서 이동할 수 있다
<a> 태그에서 새 탭으로 열리게 하려면 target 속성에 어떤 값을 넣어야 할까요?
하이퍼링크
key
핵심 용어
🔗
href
이동할 주소 (URL 또는 파일 경로)
📑
target="_blank"
새 탭에서 열기
📝
내부 텍스트
화면에 보이는 링크 텍스트
edit_note
정리 노트
링크로 세계 연결하기
링크 기본
- <a>
- 하이퍼링크를 만드는 태그
- href
- 이동할 URL 주소를 지정하는 속성
- target="_blank"
- 링크를 새 탭에서 여는 설정
경로 종류
- 절대 경로
- https://로 시작하는 전체 URL
- 상대 경로
- 현재 파일 기준으로 상대적 위치 지정
★
외부 링크에는 target="_blank"를 붙여 사용자 경험을 개선하세요.
check_circle
핵심 정리
- 1<a href="주소">텍스트</a>로 링크를 만든다
- 2target="_blank"로 새 탭에서 열 수 있다
- 3같은 사이트는 상대 경로, 외부는 절대 경로
퀴즈와 인터랙션으로 더 깊이 학습하세요
play_circle인터랙티브 레슨 시작