5. HTML의 핵심! 링크에 대해 배워보자

오늘은 HTML의 꽃인 링크 거는 법에 대해서 배워볼까 합니다. 혹시 모르시는 분들을 위해서 언제나 그랬듯이 예시를 먼저 보여드리고 설명을 이어나가도록 하겠습니다. 

<예시1>

http://techdaddy.tistory.com/

예시에 담긴 링크를 클릭하면 어느샌가 techdaddy의 블로그에 도달하는 것을 보실 수 있습니다. 즉 한마디로 링크란, 임의의 누군가가 클릭을 했을 시 해당 웹사이트로 이동을 시켜주는 일을 대신해줍니다. 블로그를 돌아다니던 어느 웹사이트를 돌아다니던 이러한 링크는 전 세계 모든 웹사이트에서 볼 수 있습니다. 링크가 없는 사이트는 아마 없을 정도로 이 챕터는 HTML에서 가장 중요한 부분 중에 하나입니다. 

자 그렇다면 다른 예제를 보겠습니다. 이것은 쿠팡 홈페이지입니다. 만약 여러분이 뷰티>헤어 카테고리에서 왁스를 구매하고 싶다면 자연스럽게 저 화면에 보이는 헤어를 클릭하실 겁니다. 그렇다면 저기 적힌 헤어, 바디, 네일, 뷰티소품, 향수, 스킨케어와 같은 카테고리는 링크일까요? 

<예시2>

정답은 '맞습니다'입니다. 헤어라는 글자를 클릭하는 순간 여러분의 화면이 바뀌는 것을 볼 수 있습니다. 앞에 보여드린 첫 번째 예제와 두 번째 예제는 같은 링크 기법을 사용했는데 왜 앞에 것은 허접해 보이고 쿠팡 예제는 더 멋져 보이는 것일까요? 하나의 정답은 CSS에 있습니다. (간단히 말씀드리면 CSS는 홈페이지를 디자인적으로 더 화려하게 꾸미는 것을 가능케합니다). 다른 정답은 링크 태그(아래서)에서 배우실 수 있습니다. 여하튼, 포인트는 두 개의 예제는 같은 기법을 사용했다는 데에 있습니다. 알고 보니 정말 많은 웹사이트들이 링크 기법을 사용한다는 것을 몸소 느끼실 수 있겠죠? 

이제 본론으로 들어가서 과연 링크기법은 어떻게 HTML로 구현(표현)하는가?를 알아보도록 합시다. 

---

1. <a href="링크 걸고 싶은 사이트 ">사람들이 클릭하게될 텍스트</a>

링크를 걸기 위해서는 <a>태그를 이용합니다. a는 anchor를 일컫는 말인데 한국어로는 닻을 의미합니다. 과연 닻과 링크와는 어떤 관련이 있길래 이름을 이렇게 지은 걸까요? 저도 정확히는 잘 모르겠습니다만, 제 생각은 아래와 같습니다. 배를 위에 예시에서 헤어(텍스트 그 자체)라고 생각하시고 닻이 있는 곳이 헤어를 클릭했을 때 바뀐 화면이라고 비유해봅시다. 그렇다면 배(헤어)를 클릭하는 순간 닻이 있는 위치(헤어를 눌렀을 때 이동된 화면)에 도달하는 모습을 보여주기 위해 anchor라는 이름을 쓴 것이 아닌가라는 추측을 해보았습니다. 물론 제 추측이 말도 안 되는 헛소리 일수도 있습니다. 혹시 정답을 알고 계시다면 아래 댓글을 달아주세요. 정정하겠습니다. 

 

우리는 <a>태그를 보자마자 이상한 생각이 듭니다. 왜냐? 앞에 봤던 태그들은 정말 이쁘고 가지런히 생겼었습니다. 무슨 말이냐면, <p>태그를 사용한다고 가정했을 때, 우린 <p> ...내용...</p> 만 쓰면 완벽했는데, 이 태그는 <a> 태그 안에 이상한 href="링크 걸고 싶은 사이트" 가 추가가 되어있습니다. 자 여기서 우리는 Attribute(속성)에 주목할 필요가 있습니다. 

위에 <a href ="링크 걸 사이트">처럼 태그 안에 무언가 있다면 그것은 다 Attribute(속성)입니다. 좀 더 자세히 알아보자면, href는 속성 이름을 의미하며, ""(따옴표) 안에 들어가 있는 것들을 속성값이라고 부릅니다. 그렇다면 <a> 태그만 속성 값이 존재하느냐? 그렇지 않습니다. 다른 태그에도 속성 값을 추가할 수 있습니다. <p>태그에도 추가할 수 있고, <h1>태그에도 추가할 수 있습니다. 어떤 속성 이름과 속성 값을 추가해야 하는지는 7번째 강의 정도에 가면 배울 수 있습니다. 아직은 <a>태그의 속성(href)에만 집중을 해보도록 합시다.

---

2. 사용법

예시를 먼저 살펴보면 이해하기가 훨씬 더 수월합니다. 저는 예시로서 구글을 링크하는 법을 확인해 보겠습니다.

보시면 href="" (따옴표) 안에는 내가 유도하고 싶은 사이트 링크를 입력해 주시면 됩니다. (참고로, http를 넣고 안넣고는 크게 상관이 없습니다)

그리고 <a>..</a> 태그 사이에는 자신이 원하는 텍스트를 입력하시면 됩니다. 그러면 앞에 두 번째 예제도 동일한 방식이 사용되었다는 것을 추측할 수가 있겠죠? 아마 <a href="url..">헤어</a>를 입력했기 때문에 헤어라는 카테고리가 생겼을 것입니다. 

그렇다면 맨 처음 예제인 http://techdaddy.tistory.com/ 는 어떻게 표현된 것일까요?

바로 <a>태그 사이에 URL을 그대로 삽입하면 위와같은 링크가 출력이 되는 것입니다. 신기하지 않나요? 

---

3. 연습문제

오늘은 저번 강의 (리스트)와 결합된 응용문제를 드리려고 합니다. 한 번 고민을 해보시고 직접 타이핑도 해보시고 모르시겠으면 정답1.txt 파일을 참고해 주세요. 모르는 부분이 있으시면 언제나 댓글을 달아주세요. 

문제: 아래와 같이 출력이 되도록 코딩을 해보세요. (네이버는 네이버를 클릭하면 네이버 사이트로 이동하고, 구글을 클릭하면 구글로 이동하게 구성하셔야 합니다.)

• 네이버
• 구글
• www.daum.net
• www.tistory.com

정답파일

정답.txt

---

수고하셨습니다.