링크와 네비게이션
혼자인 단일 페이지는 고립된 섬입니다. 링크는 페이지를 웹으로 연결하는 것입니다. 링크는 방문자가 다른 페이지로 이동하거나, 아래로 더 내려간 섹션으로 점프하거나, 이메일 앱을 열어서 당신에게 메시지를 보낼 수 있게 해줍니다. 이 모든 것의 뒤에 있는 요소는 앵커 <a>이고, href 속성과 함께 작동합니다. 요소와 속성이라는 단어가 새롭다면, What is HTML 장에서 소개합니다.
앵커 요소
링크는 **앵커 요소**로 만들어지며, <a>로 표기됩니다. href 속성을 주는데, 이것이 링크가 가는 곳이고, 여는 태그와 닫는 태그 사이의 텍스트가 방문자가 보고 클릭하는 부분입니다.
<a href="https://scrimba.com">Scrimba 방문</a>"Scrimba 방문"이라는 단어가 클릭 가능한 링크로 나타납니다. 이 단어를 클릭하면 브라우저가 href의 주소를 로드합니다.
href를 이정표에 쓰인 목적지로, 링크 텍스트를 표지판에 칠해진 레이블로 생각하세요. 레이블은 사람들이 읽는 부분이고, 목적지는 화살표가 가리키는 곳입니다.
<a href="...">입니다. href는 어디로 가는지이고, 태그 사이의 텍스트는 사람들이 클릭하는 부분입니다. 이것이 요소의 전부입니다. 이 두 부분을 알면 웹 어디든 링크할 수 있습니다. 절대 URL과 상대 URL
모든 링크에는 가리킬 주소가 필요하며, 두 가지 종류가 있습니다. 절대 URL은 https://로 시작하는 전체 주소이며, 주소창에 입력하는 것과 같습니다. 다른 웹사이트로 링크할 때 사용하세요:
<a href="https://scrimba.com">Scrimba 홈페이지</a>**상대 URL**은 자신의 사이트에 있는 다른 페이지로의 바로가기입니다. 전체 주소 대신 현재 위치에서의 경로를 제공합니다:
<a href="about.html">소개</a>그 링크는 현재 페이지와 같은 폴더에서 about.html 파일을 찾습니다. 절대 URL은 나라와 도시가 있는 완전한 우편 주소이고, 상대 URL은 "여기서 두 집 아래"입니다.
https://...이고, about.html 같은 상대 URL은 자신의 사이트에 있는 페이지로의 바로가기입니다. 완전한 우편 주소 대 "두 집 아래". 자신의 페이지에 상대 링크로 시작하면 훨씬 적게 입력할 수 있습니다. 링크 대상, rel, 새 탭에서 열기
기본적으로 링크를 클릭하면 새 페이지가 같은 탭에 로드되어 있던 페이지를 대체합니다. 때로는 대신 새 탭에서 열어서 방문자가 당신의 페이지를 열어두고 싶을 수도 있습니다. target 속성을 _blank로 설정하면 됩니다:
<a href="https://scrimba.com" target="_blank">Scrimba를 새 탭에서 열기</a>_blank는 "신선하고 빈 탭"을 의미합니다. 링크를 보통 여는 것은 다음 방으로 문을 통해 걷는 것이고, target="_blank"는 두 번째 문을 열어서 첫 번째 방이 원래 있던 위치에 있도록 합니다.
target="_blank"는 새 탭에서 링크를 열어서 당신의 페이지가 그대로 있게 합니다. 그것을 빼면 링크는 같은 탭에서 열리며, 이는 대부분의 경우 사람들이 기대하는 바입니다. 새 탭은 다른 사이트로 향하는 링크를 위해 남겨두세요. 프래그먼트 ID로 페이지 내 링크 만들기
링크는 다른 페이지로만 가는 게 아닙니다. 목차가 하듯이 현재 페이지의 더 아래로 점프할 수도 있습니다. 먼저, 도달하고 싶은 위치, 예를 들어 제목에 고유한 id 속성을 주세요:
<h2 id="pricing">가격</h2>그런 다음 그 이름 앞에 #을 붙여서 링크하세요:
<a href="#pricing">가격으로 이동</a>링크를 클릭하면 페이지가 가격 제목까지 스크롤됩니다. #name 부분을 **프래그먼트**라고 합니다. id는 페이지에 끼워 넣은 북마크이고, # 링크는 당신이 바로 거기로 넘어가는 것입니다.
id를 주고, #과 같은 이름으로 링크하세요. 예를 들어 <a href="#pricing">. 페이지가 바로 그곳으로 스크롤됩니다. id를 북마크로, # 링크를 그것으로 펼치는 것으로 생각하세요. 네비게이션 구축하기
대부분의 사이트는 맨 위에 링크 행이 있습니다. 홈, 소개, 연락처 등입니다. 이것을 **네비게이션**이라고 하며, 이는 함께 그룹화된 일련의 앵커입니다. HTML에는 이를 위해 만들어진 요소 <nav>가 있으며, 이것은 블록을 페이지의 네비게이션으로 표시합니다:
<nav>
<a href="/">홈</a>
<a href="/about">소개</a>
<a href="/contact">연락처</a>
</nav>각 링크는 일반적인 앵커입니다. 그들을 <nav>에 감싸면 브라우저와 다른 도구에 "이 그룹이 사이트를 돌아다니는 방법"이라고 알립니다.
<nav>에 감싼 링크 그룹입니다. 홈, 소개, 연락처 같이요. <nav>는 모든 것에 "이것이 당신이 돌아다니는 방법"이라고 알립니다. 안의 링크들은 평범한 앵커이고 배울 새로운 게 없습니다.