Learn HTML & CSS링크와 내비게이션
페이지 하나만 있으면 그것은 섬에 불과합니다. 링크가 있어야 페이지들이 하나의 웹으로 연결됩니다. 링크가 있으면 방문자가 다른 페이지로 이동하거나, 아래쪽에 있는 특정 섹션으로 건너뛰거나, 이메일 앱을 열어 여러분에게 메일을 쓸 수 있습니다. 이 모든 것의 뒤에 있는 요소가 바로 앵커, <a>이며, href라는 속성과 함께 동작합니다. 요소와 속성이라는 말이 낯설다면 HTML이란 무엇인가 챕터에서 소개하고 있습니다.
앵커 요소
링크는 **앵커 요소**로 만들며, <a>로 씁니다. href 속성에 링크가 향하는 곳을 지정하고, 여는 태그와 닫는 태그 사이의 텍스트가 방문자에게 보여지고 클릭되는 부분입니다.
<a href="https://scrimba.com">Visit Scrimba</a>"Visit Scrimba"라는 글자가 클릭 가능한 링크로 나타납니다. 이 글자를 클릭하면 브라우저는 href에 적힌 주소를 불러옵니다.
href는 표지판에 쓰인 목적지이고, 링크 텍스트는 그 표지판에 적힌 문구라고 생각해 보세요. 사람들이 읽는 것은 문구이고, 화살표가 가리키는 곳은 목적지입니다.
<a href="...">입니다. href는 향하는 곳이고, 태그 사이의 텍스트는 사람들이 클릭하는 부분입니다. 이것이 이 요소의 전부입니다. 이 두 가지만 알면 웹 어디로든 링크를 걸 수 있습니다. 절대 URL과 상대 URL
모든 링크는 가리킬 주소가 필요하며, 여기에는 두 가지 종류가 있습니다. 절대 URL은 https://로 시작하는 전체 주소로, 주소창에 직접 입력하는 것과 같습니다. 다른 웹사이트로 연결할 때 사용합니다.
<a href="https://scrimba.com">Scrimba's home page</a>**상대 URL**은 같은 사이트 안에 있는 다른 페이지로 가는 지름길입니다. 전체 주소 대신, 지금 있는 위치를 기준으로 한 경로를 적어 줍니다.
<a href="about.html">About us</a>이 링크는 현재 페이지와 같은 폴더에 있는 about.html 파일을 찾습니다. 절대 URL은 국가와 도시까지 적힌 우편 주소 전체이고, 상대 URL은 "여기서 두 집 건너"에 해당합니다.
https://...이고, about.html 같은 상대 URL은 같은 사이트 안 페이지로 가는 지름길입니다. 전체 우편 주소와 "두 집 건너"의 차이입니다. 자신의 사이트 안에서는 상대 링크부터 쓰면 타이핑할 양이 훨씨 줄어듭니다. 링크 타겟, rel, 그리고 새 탭에서 열기
기본적으로 링크를 클릭하면 같은 탭에서 새 페이지가 열리고, 보고 있던 페이지는 사라집니다. 때로는 방문자가 여러분의 페이지를 계속 열어 둘 수 있도록 새 탭에서 열리게 하고 싶을 때가 있습니다. 이럴 때는 target 속성을 _blank로 설정합니다.
<a href="https://scrimba.com" target="_blank">Open Scrimba in a new tab</a>_blank는 "새롭고 비어 있는 탭"이라는 뜻입니다. 링크를 평범하게 여는 것은 옆방으로 통하는 문을 통과해 들어가는 것이고, target="_blank"는 두 번째 문을 여는 것이어서 첫 번째 방은 그 자리에 그대로 남아 있습니다.
target="_blank"는 링크를 새 탭에서 열어 여러분의 페이지를 그 자리에 남겨 둡니다. 이 속성을 쓰지 않으면 링크는 같은 탭에서 열리는데, 대부분의 경우 사람들이 기대하는 동작입니다. 새 탭은 다른 사이트로 향하는 링크에만 아껴서 쓰세요. 프래그먼트 ID를 이용한 페이지 내 링크
링크는 다른 페이지로만 이동하는 것이 아닙니다. 목차가 그러하듯, 현재 페이지의 아래쪽에 있는 특정 지점으로 건너뛸 수도 있습니다. 먼저, 도착하고자 하는 지점, 예를 들면 헤딩에 고유한 id 속성을 부여합니다.
<h2 id="pricing">Pricing</h2>그런 다음, 그 이름 앞에 #을 붙여서 링크를 만듭니다.
<a href="#pricing">Jump to pricing</a>링크를 클릭하면 페이지가 pricing 헤딩까지 아래로 스크롤됩니다. #name 부분을 **프래그먼트**라고 부릅니다. id는 페이지 안에 꽂아 둔 책갈피이고, # 링크는 곧바로 그 책갈피로 넘어가는 동작입니다.
id를 부여하고, 같은 이름 앞에 #을 붙여 링크를 만드세요. <a href="#pricing">처럼요. 그러면 페이지가 곧바로 그곳으로 스크롤됩니다. id는 책갈피, # 링크는 그 책갈피로 넘어가는 동작이라고 생각하세요. 내비게이션 만들기
대부분의 사이트에는 맨 위에 Home, About, Contact 같은 링크가 한 줄로 늘어서 있습니다. 이것이 바로 **내비게이션**이며, 여러 개의 앵커가 한데 묶인 것입니다. HTML에는 이를 위한 요소가 따로 있는데, <nav>가 바로 그것으로, 특정 블록을 페이지의 내비게이션으로 표시합니다.
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/contact">Contact</a>
</nav>각 링크는 평범한 앵커입니다. 이것들을 <nav>로 감싸면, 브라우저와 다른 도구들에게 "이 그룹이 사이트를 돌아다니는 방법이다"라고 알려주는 셈입니다.
<nav>로 감싼 링크 그룹입니다, 이를테면 Home, About, Contact처럼요. <nav>는 모든 것에게 "여기가 사이트를 돌아다니는 방법이다"라고 알려줍니다. 안에 들어 있는 링크들은 그냥 평범한 앵커일 뿐, 새로 배울 것은 없습니다.