웹 개발을 위한 HTML 가이드 14편 - 링크 태그(a)

개요

이번 글은 웹 개발을 위한 HTML 가이드 14편입니다. 시간이 참 오래 흘렀는데 제가 게을러서 14편 밖에 작성하질 못했네요. 아무튼간에 이제는 조금 더 자주 가이드를 작성하도록 하고, 저번 두 글 Visual Studio Code 사용하기 VSCode 추천 확장 프로그램를 통해서 우리는 편집기를 메모장에서 vscode로 교체했습니다. 간단한 기능들과 확장 프로그램을 알려드렸으니 요령껏 잘 사용하시면 되겠습니다.

이번 글에서는 저번 글에 예고했던대로 웹 페이지끼리 서로 연결해주는 하이퍼 링크를 만들 수 있는 링크 태그에 대해서 알아볼 겁니다. 링크는 a태그로 만들 수 있습니다. 웹은 하이퍼링크로 연결되어 있는 웹 페이지들의 세상이라고 했었죠. 그렇기 때문에 링크는 그야말로 웹의 꽃이자 모든 것이라고 해도 과언이 아닙니다.

그럼 이제 이 링크 태그에 대해서 제대로 알아보도록 합시다.

링크 태그

위에서 언급했듯이 링크 태그(이하 a태그)는 웹에서 중요한 위치를 차지하고 있습니다. 링크가 없으면 웹은 의미가 없어지기 때문입니다. 그만큼 중요한 역할을 합니다. 그래서 최대한 빨리 a태그에 대해서 다루고 싶었습니다. 어떻게 해야 처음 HTML을 접하는 분들이 이해하기 쉽게 설명할 수 있을지를 고민했는데 그게 잘 될는지는 모르겠습니다. 이 글이 잘 이해가 안된다면 설명을 못한 저의 문제입니다. 저의 공부가 덜 된 것이지.. 여러분의 문제는 아닙니다.

a태그는 일반적으로 html 페이지과 html 페이지를 연결해주는 역할을 합니다. 웹 상에 존재하는 그 어떤 html 파일과도 연결이 가능하기 때문에 이론상 유튜브에서 네이버로도 점프가 가능합니다. 물론 유튜브에는 네이버로 이동하는 링크가 없습니다!

a태그는 여는 태그와 닫는 태그로 구성이 되어있습니다.

하이퍼 링크

a태그의 유일하면서도 강력한 기능은 바로 하이퍼 링크를 구현하는 것에 있습니다. 하이퍼 링크는 위에서 계속 설명했던 것처럼 html 페이지와 html 페이지를 연결하는 기능입니다. 중요한 점은 하이퍼 링크는 기본적으로는 쌍방향이 아니라 단방향이라는 것입니다. A지점에서 B지점으로 이동을 한다고 치면 B지점으로 이동하고 싶은 A지점이 일방적으로 접근하는 것입니다.

하지만 B지점에도 A지점으로 통하는 하이퍼 링크가 있다면 이 경우엔 단방향이 아니라 쌍방향이 되겠죠. 왔다가 갔다가를 반복할 수 있으니까요. 이런 쌍방향 링크들은 웹 사이트 하위에 있는 웹 페이지들에서 나타납니다. 하이퍼 링크는 없는 곳이 없습니다. 웹이라면 어디에나 하이퍼 링크가 존재합니다.

a태그를 이용하면 내 페이지(사이트)에서 다른 웹 사이트로 넘어가거나 내 페이지끼리 왔다 갔다 할 수 있습니다. 그럼 이제 본격적으로 어떻게 사용하는 것인지 알아보도록 합시다.

내 페이지에서 다른 웹 사이트 연결하기

여러분의 프로젝트 폴더에서 연습할 파일을 아무거나 만들어봅시다. 저는 작업 폴더 안에 training 이라는 폴더를 하나 만들어 그 안에 link.html 이라고 이름을 지었습니다. 전에 만들었던 index.html은 실전 연습을 할 때에 건드려볼 겁니다. 아무튼 이 안에다가 a태그를 연습해봅시다.

<div>
  <h1>아이유</h1>
  <p>대한민국의 가수이자 배우. 본명은 이지은이며, 예명 아이유(IU)는 "음악으로 너와 내가 하나가 된다"라는 뜻을 가지고 있다.</p>
</div>

div태그를 하나 만들고 그 안에 h1태그와 p태그를 넣었습니다. 저는 아이유라는 제목에 링크를 달고 싶어졌습니다. 저는 어쩔 수 없는 아이유 신자이기 때문에 아이유에 대한 신앙을 더 널리 퍼뜨리고 싶거든요. 이럴 때 사용하는 게 바로 a태그인 겁니다. 넣어봅시다.

구글에서 아이유를 검색했을 때 나오는 검색 결과 페이지를 제목에 링크해볼겁니다. 여러분은 아무 제목을 적어도 상관 없고 그냥 아무 사이트를 연결해도 상관 없습니다. 저는 그냥 이게 하고 싶었습니다.(?)

<div>
  <h1><a href="https://www.google.com/search?q=%EC%95%84%EC%9D%B4%EC%9C%A0&oq=%EC%95%84%EC%9D%B4%EC%9C%A0&aqs=chrome..69i57j69i64l2j69i60j69i61l2j0i433i512l2&sourceid=chrome&ie=UTF-8">아이유</a></h1>
  <p>대한민국의 가수이자 배우. 본명은 이지은이며, 예명 아이유(IU)는 "음악으로 너와 내가 하나가 된다"라는 뜻을 가지고 있다.</p>
</div>

크게 보기 (새 창)

a태그에는 기본적으로 들어가야 하는 속성이 있습니다. 바로 href 입니다. 이 속성의 값으로는 웹 상의 주소가 들어갑니다. 웹 페이지와 웹 페이지를 연결하는거니까 아주 당연한 것이겠죠. 아무튼 구글 검색 결과를 넣어봤습니다.

링크가 적용되면 기본적으로 텍스트의 색이 파랗게 변하고 밑줄이 생깁니다. 이 디자인은 언제든지 바꿀 수 있습니다.(CSS를 강조하는 이유는 익숙해지라는 차원에서 입니다.) 그런데 저는 이미 방문을 했던 페이지라서 보라색으로 뜨네요. 그럼 이제 저장을 하고 라이브 서버를 켜봅시다. 제목에 건 링크를 클릭하면 그 페이지로 넘어가는걸 볼 수 있습니다.

축하합니다! 여러분은 최초로 링크를 구현했습니다!

내 페이지에서 다른 내 페이지와 연결하기

링크는 다른 웹 사이트의 페이지 뿐만 아니라 우리가 만든 페이지와도 연결이 가능합니다. 단 현재상으로는 라이브서버를 켰을 때에만 가능한 방법입니다. 그 이유는 아직 우리는 서버에 파일을 올리지도 않았고 그런 방법도 모르기 때문이죠. 웹 상의 모든 페이지들은 전부가 서버 컴퓨터에 올라간 파일들이라는 걸 잊으면 안됩니다.

아무튼 라이브서버를 통해서 우리의 프로젝트 폴더가 웹 상에 일시적으로나마 존재하게끔 만들어서 링크를 테스트해볼 수 있습니다. 저는 link.html 파일이 있는 폴더의 안에 또 다른 파일을 만들었습니다. 파일 이름은 link2.html 이라고 지었습니다.

<div>
  <h1><a href="https://www.google.com/search?q=%EC%95%84%EC%9D%B4%EC%9C%A0&oq=%EC%95%84%EC%9D%B4%EC%9C%A0&aqs=chrome..69i57j69i64l2j69i60j69i61l2j0i433i512l2&sourceid=chrome&ie=UTF-8">아이유</a></h1>
  <p>대한민국의 가수이자 배우. 본명은 이지은이며, 예명 아이유(IU)는 "음악으로 너와 내가 하나가 된다"라는 뜻을 가지고 있다.</p>
</div>

위와 같았던 코드를 아래처럼 바꿨습니다. 일단 href속성의 값을 비워뒀고 p태그를 없앴습니다. p태그는 link2.html로 옮겼습니다.

<div>
  <h1><a href="">아이유</a></h1>
</div>

<div>
  <p>대한민국의 가수이자 배우. 본명은 이지은이며, 예명 아이유(IU)는 "음악으로 너와 내가 하나가 된다"라는 뜻을 가지고 있다.</p>
</div>

파일을 두개로 쪼갠 이유는 제목을 클릭하면 설명이 나오게끔 하기 위함입니다. 제 파일에서 제 파일로 연결을 하는거죠. 제 파일에서 다른 파일로 연결을 할 때에도 주소를 적어야 합니다. 이때 나오는 개념이 절대경로과 상대경로입니다.

하지만 이건 지금 다루기엔 너무 복잡하니까 다음 글에서 제대로 다뤄보도록 하고 아주 간단하게만 다뤄보자면, 예전에 작성했던 index.html에 대해 글을 보면 프로젝트 폴더의 최상위 폴더는 웹 상에서 **/**로 표현한다고 했었습니다. 이 슬래시로 시작하는 주소는 절대경로입니다. 절대경로는 루트폴더에서부터 접근합니다.

상대경로는 루트폴더에서부터 접근하는 게 아니라 특정 파일을 기점으로 접근합니다. link.html과 link2.html은 둘 다 training 폴더 안에 있습니다. 같은 폴더 안에 있는 파일에 접근하려면 **./**로 시작합니다. 상위 폴더에 있는 파일에 접근하려면 **../**로 시작합니다. 상위 폴더의 상위 폴더라면 **../../**로 접근하겠죠.

제 프로젝트 폴더의 기준으로 절대경로와 상대경로를 적용한 주소는 아래와 같습니다.

• 절대경로: /training/link2.html
• 상대경로: ./link2.html

이걸 a태그에 적용하면 아래와 같겠죠.

<div>
  <h1><a href="./link2.html">아이유</a></h1>
  <!-- <h1><a href="/training/link2.html">아이유</a></h1> 절대경로일 경우 -->
</div>

이렇게 하고 저장한 후에 라이브서버에서 실행해보면 설명 페이지로 잘 넘어가게 됩니다. 하지만 뭔가 아쉬운 점이 있죠. 어떤 웹 사이트를 보면 링크를 클릭했을 때 새 창에서 띄우던데 우리도 그렇게 할 수 없을까요? 그래서 존재하는 게 바로 아래와 같은 속성들입니다.

링크 태그의 다른 속성

a태그에는 아주 많은 속성들이 있지만 기본적으로 알면 좋은 두개의 속성을 다뤄보도록 하겠습니다.

target 속성

target속성은 쉽게 말해 현재 페이지에서 링크를 띄우느냐 새로운 창이나 탭에서 링크를 띄우느냐를 결정하는 속성입니다. 값은 총 4개가 있지만 우리는 그냥 두개만 알면 됩니다. _self과 _blank입니다. _self는 현재 페이지에서 띄우게 합니다. 기본값입니다. target속성을 명시하지 않아도 기본적으로 실행된다는 것입니다. 그래서 새 창으로 띄우려면 _blank를 값으로 넣으면 됩니다.

<a href="#" target="_blank">블라블라</a>

rel 속성

rel속성은 relationship의 약자입니다. 현재 페이지와 링크될 페이지간의 관계를 설정하는 것인데, target속성을 사용할 때에 혹 있을지 모르는 해커의 외부적인 접근을 방지해야 하는데 이를 수행하기 위한 속성이기도 합니다. target="_blank"를 사용할 때에는 rel="noreferrer noopener"를 함께 작성해주면 됩니다.

이외 에도 다양한 값들이 있는데, 나중에 여러분의 지식이 더 커지면 그때 공부해도 될 겁니다.

<a href="#" target="_blank" rel="noreferrer noopener">블라블라</a>

실전 연습

그럼 이제 계속해서 수정해왔던 index.html 파일을 준비해봅시다. 지금까지 알아본 것을 바탕으로 우리의 프로젝트를 발전 시켜 보는겁니다.

우리의 프로젝트는 아래처럼 생겼죠.

<h1>웹 개발의 3요소</h1>
<h2>HTML</h2>
<p>HTML은 웹의 뼈대를 만들어주는 기능을 하는 마크업 언어입니다.</p>
<h2>CSS</h2>
<p>CSS는 HTML로 만든 뼈대에 피부를 만들어주고 화장을 시켜주는 스타일 시트 언어입니다.</p>
<h2>JavsScript</h2>
<p>자바스크립트는 HTML과 CSS를 동적으로 제어할 수 있는 웹의 뇌와 같은 언어입니다.</p>

h2태그들에 링크를 넣고 싶습니다. 각각의 키워드를 구글에 검색한 결과를 링크하려고 합니다. 아래처럼 하면 되겠죠.

<h1>웹 개발의 3요소</h1>
<h2><a href="https://bit.ly/3lXTSYW" target="_blank" rel="noopener noreferrer">HTML</a></h2>
<p>HTML은 웹의 뼈대를 만들어주는 기능을 하는 마크업 언어입니다.</p>
<h2><a href="https://bit.ly/3u9M22j" target="_blank" rel="noopener noreferrer">CSS</a></h2>
<p>CSS는 HTML로 만든 뼈대에 피부를 만들어주고 화장을 시켜주는 스타일 시트 언어입니다.</p>
<h2><a href="https://bit.ly/39BnSnM" target="_blank" rel="noopener noreferrer">JavsScript</a></h2>
<p>자바스크립트는 HTML과 CSS를 동적으로 제어할 수 있는 웹의 뇌와 같은 언어입니다.</p>

href속성에는 링크할 페이지의 주소를 넣는 거였죠. 구글 검색결과 페이지의 주소가 너무 길어서 줄였습니다. 새 창에서 뜨게 하기 위해서 target="_blank"속성을 넣었고 같이 따라오는 rel="noopener noreferrer"속성은 외부의 악의적인 접근을 방지하기 위해 넣었습니다.

크게 보기 (새 창)

이렇게 하면 우리의 프로젝트는 좀 더 발전했습니다! 이번 글의 실전 연습에 대한 부분은 깃허브 web-tuto에 기록해놨습니다. 3번 보시면 됩니다.

가이드를 작성하다보니 글이 아주 길어졌습니다. 하지만 내용은 그다지 어려운 부분은 없을겁니다. 절대경로나 상대경로 부분은 좀 살짝 머리가 아플 수 있는데 다음 글에서 제대로 다뤄볼 예정입니다. 이번 글은 여기까지입니다. 이번 글에서는 a태그에 대해서 알아봤고 우리의 기술은 조금 더 늘었습니다.

그럼 이번 글은 여기서 마치도록 하고 다음 글에서 봅시다.