책 씹어먹는 즐거움

1. <a> 요소의 기본적인 사용법

HTML은 월드와이드웹(www)에서 웹페이지를 부호화하고 HyperText 링크를 제공하는 언어이다. 이때, HyperText 링크를 제공하는 요소가 바로 앵커(anchor)를 의미하는 <a> 요소이다.

<a> 요소는 링크를 눌렀을 때 다른 페이지가 열려야 하므로 기본적으로 열어야할 목적지 주소와 링크로 제시될 내용이 포함되어 다음과 같은 형식으로 작성한다.

<a> 요소의 내용(contents)은 이미지 요소나 텍스트 형식으로 링크가 어디로 연결될지 보여주는 라벨의 역할을 수행한다. 라벨은 브라우저에서 클릭할 수 있다는 것을 나타내기 위해 밑줄이 처진 상태로 보이고 그 위에 마우스 커서를 올리면 커서가 작은 손 모양으로 바뀐다.

2. href 속성

href 속성은 hypertext reference의 줄임말로 링크가 연결될 목적지 주소(destination address)를 <a> 요소에 부여하는 필수적인 속성이다. 웹 브라우저는 바로 이 href의 속성값을 읽어 목적지의 문서를 연결한다. <a> 요소에 href 속성이 없으면 웹 표준 위반이다.

다음의 HTML 문서를 작성해서 0019.html로 만들고  sun.jpg파일을 같은 디렉터리에 놓고 실행해보자. 

다음은 sun.jpg 파일이다. 

0019.html 파일은 웹 브라우저에 다음과 같이 나타난다. 

href 속성으로 제시할 수 있는 목적지의 형식은 URL, 상대경로, id 이동이 있는데 이를 위의 예제 웹페이지는 전부 집어넣어 보았다. 하나하나 살펴보자. 

① URL로 링크걸기 : 책 씹어먹는 즐거움

이 부분에 해당하는 HTML은 <p> 요소 내부에 다음과 같이 작성된 부분이다.

가장 흔히 볼 수 있는 URL로 링크 걸기이다. 외부 사이트에 링크를 만들 경우에는 URL을 이용하여 링크한다. URL에 대해서는 0015 URL 간략하게 이해하고 연습하기를 참조하길 바란다.

② 이미지에 링크걸기

그 다음은 이미지에 링크를 건 경우이다. 태양 사진이 있고 이를 클릭하면 본 블로그로 이동한다. 이는 <a> 요소 내부에 <img /> 요소를 아래와 같이 중첩시켜 만들었다(0019.html 파일과 sun.jpg 파일이 같은 디렉터리에 있어야 한다.).

③ 로컬 링크를 상대경로로 링크

이 부분에 해당하는 HTML은 <p> 요소 내부에 다음과 같이 작성된 부분이다.

상대경로에 대해서는 앞의 0016 이미지를 보여주는 img 요소 01 사용법 및 src 속성의 하단부에 정리된 src 속성에서 상대경로 작성법과 동일하다.

클릭하면 서버 내에 웹페이지 파일과 같은 디렉터리에 있는 sun.jpg 파일을 브라우저로 열게 된다. 이렇게 같은 사이트 내에서 서버 내부의 파일로 연결하는 링크를 로컬 링크(local links)라고 한다. 

로컬 링크의 경우에는 다음과 같은 이유에서 href 속성의 속성값으로 URL이 아닌 상대경로를 사용하도록 권장된다. 

④ 특정 id를 가진 요소로 이동

이 부분에 해당하는 HTML은 <p> 요소 내부에 다음과 같이 작성된 부분이다.

이를 클릭하면 제목(<h2>요소)으로 되어 있는 “a요소의 href 속성으로 다양한 링크 걸기”로 이동한다. 이는 다음과 같이 제목의 요소(<h2>요소)에 아이디(id) 속성 "first"가 부여되어 있기 때문이다. 즉, href 속성값으로 "#first"가 부여되어 있으면 같은 페이지에 있는 요소 중에 아이디(id)가 "first"인 요소로 이동한다. 

아이디(id) 속성은 원하는 요소(element)를 다른 요소와 구별되어 그 자체로 고유하게 만드는 속성이다. 똑같은 <h1> 요소라고 해도 아이디(id)를 통해서 다른 <h1> 요소와 구별되는 것이다. 나중에는 이 아이디(id) 속성을 이용하여 CSS로 특정 id의 요소만 스타일링 하거나, Javascript로 특정 id의 요소만 조작하는 등으로 응용할 수 있어 가장 많이 사용되는 속성(attribute) 중에 하나이다.

HTML 웹페이지의 요소에 필요한 아이디(id) 속성을 부여하고 이제 <a> 요소의 href 속성에 "#아이디" 형태의 문자열을 속성값으로 부여하면 같은 페이지에 있는 해당 아이디(id)를 가진 요소로 바로 이동할 수 있다. 

아이디(id)로 이동은 같은 페이지 내부의 이동에만 사용되는 것은 아니다. 앞서 배운 URL 뒤에 "#아이디" 형태의 문자열을 붙이거나, 상대경로의 뒤에 "#아이디" 형태의 문자열을 붙여서 다른 페이지의 해당 아이디(id)를 속성으로 가진 요소로 바로 이동할 수 있다. 가령, 다음과 같다.

아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다. 

Ankilog 파일:   0019 a요소 01 사용법 및 href 속성.apkg

2019/01/02 am 1:27 본문 및 Ankilog 파일에 id 속성값으로 올 수 있는 문자들 문구 수정