brunch

매거진 코딩 공부를 해보자

라이킷 2 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 아무나 Jun 26. 2019

[생활코딩] HTML 3일차 - 링크!

*생활코딩 강의를 토대로 쓴 리뷰입니다.

https://opentutorials.org/course/3084/18418

1. 태그의 제왕, 링크 - <a> / <a href>

우리는 매일 컴퓨터나 스마트 폰을 통해 한 페이지에서 다른 페이지로 넘나들며 글, 사진, 영상들을 보고 즐긴다. 이 모든 것이 가능한 것이 바로 '링크' 때문이다. 정보의 바다에 닻(anchor)을 내린다는 의미로 만들어진 태그 <a> 곧 '링크'를 나타내는 것이다. 이것이 없었으면 인터넷 정보혁명 자체가 불가능했을 것이다.

자 그럼 어떻게 링크를 거는지 연습해보자!

html specificaiton이라고 검색하면 웹을 만든 W3C에서 작성한 HTML 설명서를 볼 수 있다.

그렇다면 이 페이지(https://www.w3.org/TR/html51)로 링크를 걸어보자.

<a>먼저 하이퍼링크를 걸고 싶은 곳을 a태그로 감싼다</a>

하지만 이것으로는 부족하다 왜냐하면 이 a가 '어디로'링크를 걸어야 할지에 대한 정보가 부족하기 때문이다.

그렇다면 속성 값을 추가해줘야 한다. img의 속성 값이 src(source의 줄임말)이었다면 a의 속성 값인 '하이퍼링크 참조'의 줄임말은 href(hyperlink reference)이

<a href="https://www.w3.org/TR/html51/"> 설명서를 읽어보자.</a>

바로 이렇게 걸어야 작동을 한다.

보랏빛으로 칠해진 설명서를 읽어보자!

설명서를 읽어보자 부분에 링크가 걸린 것이 보일 것이다. 클릭하면 잘 링크된 페이지로 잘 이동한다.

2. 새창에서 열리게 해 보자 <a target="_blank">

새창에서 열리게 하고 싶으면 <a> 태그 안에 속성 값으로 target="_blank"를 추가한다. 물론 안에 하이퍼링크 주소를 넣는 것도 잊으면 안 된다.

3. 링크에 마우스를 대면 설명을 나오게 하고 싶다 <a title="html5 specification">

가끔 우리는 이 링크가 어디로 연결되는 것인지 궁금할 때가 있다. 눌러봐야 하나 말아야 하나 고민될 때 마우스 커서를 살포시 가져다 대면 어디로 연결되는지 작은 설명이 뜬다. 바로 이 <a title="html5 specification"> 태그가 그 설명 툴팁을 띄울 때 사용된다.