import {
  A, Bold, Details, Dl, H, Message, NoteBottom, NoteTop, P,
  Quote, Score, Youtube, Ul, Ol, Em, Gray, Code, Kbd, Image,
  Q, Strong, Spoiler, Strike, Line, Mark, HtmlGuideMessage, Name,
  Dt, Dd
} from '@/components/Post';

<HtmlGuideMessage />

# 개요
이번 글은 웹 개발을 위한 HTML 가이드 14편입니다. 시간이 참 오래 흘렀는데 제가 게을러서 14편 밖에 작성하질 못했네요. 아무튼간에 이제는 조금 더 자주 가이드를 작성하도록 하고, 저번 두 글 [Visual Studio Code 사용하기](/post/2021-09-13-01-vscode-install) [VSCode 추천 확장 프로그램](/post/2021-09-23-01-vscode-extension)를 통해서 우리는 편집기를 메모장에서 vscode로 교체했습니다. 간단한 기능들과 확장 프로그램을 알려드렸으니 요령껏 잘 사용하시면 되겠습니다.

이번 글에서는 저번 글에 예고했던대로 웹 페이지끼리 서로 연결해주는 **하이퍼 링크**를 만들 수 있는 **링크 태그**에 대해서 알아볼 겁니다. 링크는 `a`태그로 만들 수 있습니다. 웹은 하이퍼링크로 연결되어 있는 웹 페이지들의 세상이라고 했었죠. 그렇기 때문에 링크는 그야말로 **웹의 꽃이자 모든 것**이라고 해도 과언이 아닙니다.

그럼 이제 이 링크 태그에 대해서 제대로 알아보도록 합시다.

# 링크 태그
<P>위에서 언급했듯이 <Strong>링크 태그</Strong>(이하 <Code>a</Code>태그)는 <Strong>웹에서 중요한 위치</Strong>를 차지하고 있습니다. <Strong>링크가 없으면 웹은 의미가 없어지기 때문입니다.</Strong> 그만큼 중요한 역할을 합니다. 그래서 최대한 빨리 <Code>a</Code>태그에 대해서 다루고 싶었습니다. 어떻게 해야 처음 HTML을 접하는 분들이 이해하기 쉽게 설명할 수 있을지를 고민했는데 그게 잘 될는지는 모르겠습니다. <Bold>이 글이 잘 이해가 안된다면 설명을 못한 저의 문제입니다. 저의 공부가 덜 된 것이지.. 여러분의 문제는 아닙니다.</Bold></P>

`a`태그는 일반적으로 **html 페이지과 html 페이지를 연결**해주는 역할을 합니다. 웹 상에 존재하는 그 어떤 html 파일과도 연결이 가능하기 때문에 이론상 유튜브에서 네이버로도 점프가 가능합니다. <Bold>물론 유튜브에는 네이버로 이동하는 링크가 없습니다!</Bold>

`a`태그는 여는 태그와 닫는 태그로 구성이 되어있습니다.

## 하이퍼 링크
`a`태그의 유일하면서도 강력한 기능은 바로 **하이퍼 링크를 구현하는 것**에 있습니다. 하이퍼 링크는 위에서 계속 설명했던 것처럼 **html 페이지와 html 페이지를 연결하는 기능**입니다. 중요한 점은 하이퍼 링크는 기본적으로는 쌍방향이 아니라 단방향이라는 것입니다. A지점에서 B지점으로 이동을 한다고 치면 B지점으로 이동하고 싶은 A지점이 일방적으로 접근하는 것입니다.

하지만 B지점에도 A지점으로 통하는 하이퍼 링크가 있다면 이 경우엔 단방향이 아니라 쌍방향이 되겠죠. 왔다가 갔다가를 반복할 수 있으니까요. 이런 쌍방향 링크들은 웹 사이트 하위에 있는 웹 페이지들에서 나타납니다. 하이퍼 링크는 없는 곳이 없습니다. 웹이라면 어디에나 하이퍼 링크가 존재합니다.

`a`태그를 이용하면 내 페이지(사이트)에서 다른 웹 사이트로 넘어가거나 내 페이지끼리 왔다 갔다 할 수 있습니다. 그럼 이제 본격적으로 어떻게 사용하는 것인지 알아보도록 합시다.

## 내 페이지에서 다른 웹 사이트 연결하기
<P>여러분의 프로젝트 폴더에서 연습할 파일을 아무거나 만들어봅시다. 저는 작업 폴더 안에 training 이라는 폴더를 하나 만들어 그 안에 <Name>link.html</Name> 이라고 이름을 지었습니다. 전에 만들었던 <Name>index.html</Name>은 실전 연습을 할 때에 건드려볼 겁니다. 아무튼 이 안에다가 <Code>a</Code>태그를 연습해봅시다.</P>

```html file=link.html
<div>
  <h1>아이유</h1>
  <p>대한민국의 가수이자 배우. 본명은 이지은이며, 예명 아이유(IU)는 "음악으로 너와 내가 하나가 된다"라는 뜻을 가지고 있다.</p>
</div>
```

`div`태그를 하나 만들고 그 안에 `h1`태그와 `p`태그를 넣었습니다. 저는 아이유라는 제목에 **링크**를 달고 싶어졌습니다. 저는 어쩔 수 없는 아이유 신자이기 때문에 아이유에 대한 신앙을 더 널리 퍼뜨리고 싶거든요. 이럴 때 사용하는 게 바로 `a`태그인 겁니다. 넣어봅시다.

구글에서 아이유를 검색했을 때 나오는 검색 결과 페이지를 제목에 링크해볼겁니다. 여러분은 아무 제목을 적어도 상관 없고 그냥 아무 사이트를 연결해도 상관 없습니다. 저는 그냥 이게 하고 싶었습니다.(?)

```html file=link.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>
```

![아이유를 검색한 결과 페이지를 링크했다.](https://drive.google.com/uc?export=view&id=1ZsWk03JHV1n4nC8ReDfPdc-pHEZQJj0h)

`a`태그에는 기본적으로 들어가야 하는 속성이 있습니다. 바로 `href` 입니다. 이 속성의 값으로는 **웹 상의 주소**가 들어갑니다. 웹 페이지와 웹 페이지를 연결하는거니까 아주 당연한 것이겠죠. 아무튼 구글 검색 결과를 넣어봤습니다.

<P>링크가 적용되면 기본적으로 텍스트의 색이 파랗게 변하고 밑줄이 생깁니다. 이 디자인은 언제든지 바꿀 수 있습니다.<Gray>(CSS를 강조하는 이유는 익숙해지라는 차원에서 입니다.)</Gray> 그런데 저는 이미 방문을 했던 페이지라서 보라색으로 뜨네요. 그럼 이제 저장을 하고 라이브 서버를 켜봅시다. 제목에 건 링크를 클릭하면 그 페이지로 넘어가는걸 볼 수 있습니다.</P>

축하합니다! 여러분은 최초로 링크를 구현했습니다!

## 내 페이지에서 다른 내 페이지와 연결하기
링크는 다른 웹 사이트의 페이지 뿐만 아니라 **우리가 만든 페이지와도 연결이 가능**합니다. 단 현재상으로는 **라이브서버를 켰을 때에만 가능**한 방법입니다. 그 이유는 아직 우리는 서버에 파일을 올리지도 않았고 그런 방법도 모르기 때문이죠. 웹 상의 모든 페이지들은 전부가 서버 컴퓨터에 올라간 파일들이라는 걸 잊으면 안됩니다.

<P>아무튼 라이브서버를 통해서 우리의 프로젝트 폴더가 웹 상에 일시적으로나마 존재하게끔 만들어서 링크를 테스트해볼 수 있습니다. 저는 <Name>link.html</Name> 파일이 있는 폴더의 안에 또 다른 파일을 만들었습니다. 파일 이름은 <Name>link2.html</Name> 이라고 지었습니다.</P>

```html file=link.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>
```

<P>위와 같았던 코드를 아래처럼 바꿨습니다. 일단 <Code>href</Code>속성의 값을 비워뒀고 <Code>p</Code>태그를 없앴습니다. <Code>p</Code>태그는 <Name>link2.html</Name>로 옮겼습니다.</P>

```html file=link.html
<div>
  <h1><a href="">아이유</a></h1>
</div>
```

```html file=link2.html
<div>
  <p>대한민국의 가수이자 배우. 본명은 이지은이며, 예명 아이유(IU)는 "음악으로 너와 내가 하나가 된다"라는 뜻을 가지고 있다.</p>
</div>
```

파일을 두개로 쪼갠 이유는 제목을 클릭하면 설명이 나오게끔 하기 위함입니다. 제 파일에서 제 파일로 연결을 하는거죠. 제 파일에서 다른 파일로 연결을 할 때에도 주소를 적어야 합니다. 이때 나오는 개념이 **절대경로**과 **상대경로**입니다.

하지만 이건 지금 다루기엔 너무 복잡하니까 다음 글에서 제대로 다뤄보도록 하고 아주 간단하게만 다뤄보자면, 예전에 작성했던 [index.html에 대해](/post/2021-09-04-01-filename-index) 글을 보면 프로젝트 폴더의 최상위 폴더는 웹 상에서 **/**로 표현한다고 했었습니다. 이 슬래시로 시작하는 주소는 **절대경로**입니다. 절대경로는 루트폴더에서부터 접근합니다.

<Message color='b'>
  <p>루트 폴더는 프로젝트 폴더의 <Strong>최상위 폴더</Strong>를 의미합니다!</p>
</Message>

상대경로는 루트폴더에서부터 접근하는 게 아니라 특정 파일을 기점으로 접근합니다. <Name>link.html</Name>과 <Name>link2.html</Name>은 둘 다 training 폴더 안에 있습니다. 같은 폴더 안에 있는 파일에 접근하려면 **./**로 시작합니다. 상위 폴더에 있는 파일에 접근하려면 **../**로 시작합니다. 상위 폴더의 상위 폴더라면 **../../**로 접근하겠죠.

제 프로젝트 폴더의 기준으로 절대경로와 상대경로를 적용한 주소는 아래와 같습니다.

* **절대경로:** /training/link2.html
* **상대경로:** ./link2.html

이걸 a태그에 적용하면 아래와 같겠죠.

```html file=link.html
<div>
  <h1><a href="./link2.html">아이유</a></h1>
  
</div>
```

이렇게 하고 저장한 후에 라이브서버에서 실행해보면 설명 페이지로 잘 넘어가게 됩니다. 하지만 뭔가 아쉬운 점이 있죠. 어떤 웹 사이트를 보면 링크를 클릭했을 때 **새 창**에서 띄우던데 우리도 그렇게 할 수 없을까요? 그래서 존재하는 게 바로 아래와 같은 속성들입니다.

## 링크 태그의 다른 속성
`a`태그에는 아주 많은 속성들이 있지만 기본적으로 알면 좋은 두개의 속성을 다뤄보도록 하겠습니다.

### target 속성
`target`속성은 쉽게 말해 **현재 페이지에서 링크를 띄우느냐 새로운 창이나 탭에서 링크를 띄우느냐**를 결정하는 속성입니다. 값은 총 4개가 있지만 우리는 그냥 두개만 알면 됩니다. **_self**과 **_blank**입니다. **_self**는 현재 페이지에서 띄우게 합니다. 기본값입니다. `target`속성을 명시하지 않아도 기본적으로 실행된다는 것입니다. 그래서 새 창으로 띄우려면 **_blank**를 값으로 넣으면 됩니다.

```html
<a href="#" target="_blank">블라블라</a>
```

### rel 속성
`rel`속성은 **relationship**의 약자입니다. 현재 페이지와 링크될 페이지간의 관계를 설정하는 것인데, `target`속성을 사용할 때에 혹 있을지 모르는 해커의 **외부적인 접근을 방지**해야 하는데 이를 수행하기 위한 속성이기도 합니다. `target="_blank"`를 사용할 때에는 `rel="noreferrer noopener"`를 함께 작성해주면 됩니다.

이외 에도 다양한 값들이 있는데, 나중에 여러분의 지식이 더 커지면 그때 공부해도 될 겁니다.

```html
<a href="#" target="_blank" rel="noreferrer noopener">블라블라</a>
```

# 실전 연습
<P>그럼 이제 계속해서 수정해왔던 <Name>index.html</Name> 파일을 준비해봅시다. 지금까지 알아본 것을 바탕으로 우리의 프로젝트를 발전 시켜 보는겁니다.</P>

우리의 프로젝트는 아래처럼 생겼죠.

```html file=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`태그들에 링크를 넣고 싶습니다. 각각의 키워드를 구글에 검색한 결과를 링크하려고 합니다. 아래처럼 하면 되겠죠.

```html file=index.html
<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"`속성은 외부의 악의적인 접근을 방지하기 위해 넣었습니다.

![프로젝트 세번째 과정.](https://drive.google.com/uc?export=view&id=1mRWGfvGJTB_zw2L2V2tEXjYj0RNcNcY6)

<P>이렇게 하면 우리의 프로젝트는 좀 더 발전했습니다! 이번 글의 실전 연습에 대한 부분은 깃허브 <A href='https://github.com/nihil-programming-guide/web-tuto/tree/master/HTML' type='normal'>web-tuto</A>에 기록해놨습니다. 3번 보시면 됩니다.</P>

<Line />

가이드를 작성하다보니 글이 아주 길어졌습니다. 하지만 내용은 그다지 어려운 부분은 없을겁니다. 절대경로나 상대경로 부분은 좀 살짝 머리가 아플 수 있는데 다음 글에서 제대로 다뤄볼 예정입니다. 이번 글은 여기까지입니다. 이번 글에서는 `a`태그에 대해서 알아봤고 우리의 기술은 조금 더 늘었습니다.

그럼 이번 글은 여기서 마치도록 하고 다음 글에서 봅시다.

이번 글은 웹 개발을 위한 HTML 가이드 14편입니다. 시간이 참 오래 흘렀는데 제가 게을러서 14편 밖에 작성하질 못했네요. 아무튼간에 이제는 조금 더 자주 가이드를 작성하도록 하고, 저번 두 글 Visual Studio Code 사용하기 VSCode 추천 확장 프로그램를 통해서 우리는 편집기를 메모장에서 vscode로 교체했습니다. 간단한 기능들과 확장 프로그램을 알려드렸으니 요령껏 잘 사용하시면 되겠습니다. 이번 글에서는 저번 글에 예고했던대로 웹 페이지끼리 서로 연결해주는 하이퍼 링크를 만들 수 있는 링크 태그에 대해서 알아볼 겁니다. 링크는 a태그로 만들 수 있습니다. 웹은 하이퍼링크로 연결되어 있는 웹 페이지들의 세상이라고 했었죠. 그렇기 때문에 링크는 그야말로 웹의 꽃이자 모든 것이라고 해도 과언이 아닙니다. 그럼 이제 이 링크 태그에 대해서 제대로 알아보도록 합시다.

“ a 태그 ” 태그 관련 포스트 1건

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