a 태그와 링크, 하이퍼 텍스트 – HTML/CSS 따라하기 8

a 태그와 링크, 하이퍼텍스트

HTML의 뜻은 Hyper Text Markup Language 입니다. 이것으로 문서를 만들면 html 파일이라고 하죠. 여기서 Hypertext 의 뜻은 w3.org의 정의에 따르면 다른 텍스트로 연결되는 링크(연결고리)를 의미합니다. 그러니까 텍스트에서 텍스트로 이동할 수 있는 연결입니다. SF 영화에서 보면 다른 차원으로 이동하는 문같은게 있습니다. 포탈(portal)이라고 하죠. 인터넷의 링크들을 모아놓은 것이 네이버나 다음 같은 포탈 사이트입니다. 그래서 포탈사이트는 온갖 a 태그로 만들어져 있습니다.

다른 텍스트로의 링크를 제공하는 a 태그야 말로 인터넷 혁명의 시작이었습니다. 하이퍼텍스트라는 단어는 1965년 Ted Nelson에 의해서 대중에게 알려졌습니다.

여기서 약간 하이퍼텍스트에 대해서 이야기하면, 인터넷 이전의 시대에는 어땠을까요? 예를 들어 책으로된 브리타니카 백과사전을 읽던 아이가 중간에 모르는 단어가 나오면 그 단어를 찾기 위해서 다른 사전의 색인을 찾아서 읽은 후에 다시 읽던 백과사전으로 돌아와서 두개의 내용을 종합하여 이해할 수 있었습니다. 물론 이렇게 하기위해서는 읽고 있던 브리타니카를 내려놓고 다시 서재에 돌아가서 관련된 용어를 설명하는 사전이나 책을 찾는 수고가 필요했고 보통의 집에 있는 책에서는 한계가 있었기에 단순한 용어를 설명하는 것 이상의 좀 더 제대로된 연구를 위해서는 큰 도서관에서 찾아야 했습니다. 이런 과정에 시간과 비용이 많이 소모가 되지요. 이런 시대에는 학문의 전당인 대학에서 오래 공부한 학자들과 일반인들과의 지식 격차가 컸습니다.

그런데 전세계의 데이타베이스, 전세계의 도서관인 인터넷이 보급되면서 변하기 시작했습니다. 그 중에 가장 중요한 역할을 a 태그가 한 것 입니다. 위의 브리타니카 백과사전을 읽던 아이는 모르는 용어를 알기위해 서재나 도서관을 뒤질 필요도 없습니다. 하이퍼텍스트 전송 프로토콜인 http 요청을 보내기만 하면 됩니다. 브리태니커도 온라인에 이미 구현되어 있을 뿐만 아니라 어려운 용어들에는 링크가 다 걸려있어서 독자가 할 일은 손가락을 1cm 가량 움직여서 링크를 클릭하는 것 입니다. 용어 하나를 알기 위해서 마음의 결심을 하고 도서관으로 출발하던 시대와는 차원이 다릅니다. 그만큼 방대한 지식을 빨리 습득할 수 있게 된 것 입니다. 이런 시대라면 일반인도 노력에 따라 인문학 박사에 못지않는 지식을 뽐낼 수 있습니다. (물론 학자들 수준의 통찰력을 가지는 것은 별개의 문제입니다)

그리고 브리태니커 백과사전은 비쌌습니다. 인터넷만 연결되어 있다면 이것들을 무료로 이용할 수 있는 것이지요. 그리고 인터넷은 일반 가정집 부터 공공 교육시설 까지 이미 대부분의 국민들에게 보급이 되어 있습니다.

브리태니커라는 한가지 예를 들어서 이야기 했지만 이는 인류 전체적으로 바라보면 엄청난 지식의 혁신입니다. 그리고 그 혁신은 지금도 진행되고 있는 중이죠.

모든 것은 a 태그라는 하이퍼텍스트의 사용이 가능해졌기 때문입니다. 기존의 지식은 책이나 신문을 손으로 붙잡고 읽는 것이었습니다. 이는 어느정도 방향성이라는게 있었지요. 보통 책은 1페이지부터 끝까지 읽습니다. 잡지나 신문은 주제가 다양하지만 이것도 발행하는 시간의 흐름에 따라 읽기 때문에 방향성이 분명합니다. 오늘 읽은 신문의 내용이 내일 읽는 신문의 내용과 이어지고 반영이 됩니다.

그런데 하이퍼텍스트는 다릅니다. 앞으로 갔다가 뒤로 갔다가 다소 산만한데요. 처음에 브리태니커 백과사전을 읽기 시작해서 나중에는 전혀 다른 웹사이트를 서핑하고 있을지도 모릅니다. (아니 높은 확률로 그렇게 됩니다) 백과사전에서 페르시안 고양이를 검색하다가 유튜브에서 longhair cat 영상을 시청하고 있는 자신의 모습을 발견하는 것은 흔한 일입니다. 결국은 보면 백과사전을 읽는게 아니라 유튜브를 시청하고 앉아있는 거죠.

또 유튜브에는 추천시스템이란게 있습니다. 내가 관심있어 하는 분야를 추천해서 링크를 걸어주는거죠. 아 그리고 하이퍼텍스트라고 꼭 텍스트만 의미하는 것은 아닙니다. 이미지, 동영상, 음악, 게임 등 멀티미디어에 연결하는 것도 똑같은 방법입니다. 링크는 URL(Universal Resource Locator – 유니버셜 자원 로케이터)을 찾는 것 입니다. 리소스가 있는 위치만 알면 그게 텍스트건 멀티미디어건 상관없습니다. 그래서 본질적으로 유튜브의 추천시스템이란 것도 동영상으로 이루어진 하이퍼텍스트 네트워크라고 볼 수 있습니다.

이렇게 심오한 하이퍼텍스트와 링크 네트워크에 대한 내용은 대학원의 전공으로 연구할 만한 깊이가 있기 때문에 딸랑 a 태그 하나의 사용법으로 퉁치는 것은 불가능한데 일단 HTML을 시작하면 기본이니까 이 포스팅에서 조금 다루어 보겠습니다.

링크란 것은 어떤 텍스트의 위치를 찾아가는 것 입니다. 세부적으로 나누면 아래와 같습니다.

• 하나의 웹사이트에서 다른 웹사이트로 넘어가는 링크
• 같은 웹사이트에서 웹페이지간의 이동하는 링크
• 같은 페이지에서 이동하는 링크
• 새로운 탭이나 윈도우에서 오픈하는 링크
• 이메일 프로그램을 시작하는 링크

a 태그

a 태그의 뜻은 anchor 입니다. 태그의 이름이 다소 좀 비유적이죠? 돛단배의 닻에서 가져온 anchor는 하이퍼링크의 도착지를 의미합니다. 항구라면 정박하는 곳을 의미할테고 이는 태그가 찾아가는 목적지입니다. 인터넷에 대해서 초창기 사람들이 가졌던 인식은 정보의 바다를 항해하는 개념입니다. 인터넷의 발상지가 미국이라서 그런지 몰라도 콜럼부스의 대항해시대에 대한 향수가 느껴지는 이름입니다.

처음에 a 태그를 보고 왜 이게 하이퍼 링크인지 원래 용어에 대해서 궁금하게 생각했었는데 정보의 바다, 정보의 대서양 이 정도의 개념으로 붙인 것 같습니다. 그래서 웹서핑이라는 말도 있고 블로그(web log)도 바다를 항해하는 선장이 항해 기록을 남기는 것에서 유래했다고 합니다. 이름을 붙일 거면 우주 탐사로 붙일 수 있었는데 굳이 바다를 선택한 것은 역사적인 용어 선택으로 볼 수 있습니다.

암튼 사용법은 간단합니다.

a 태그의 속성으로 href (hypertext reference – 하이퍼텍스트 참조) 값을 입력하면 됩니다. 웹사이트의 주소를 풀로 다 입력하면 absolute URL(절대 URL)이라고 합니다. target 속성을 _blank로 지정하면 새창으로 지정하지 않으면 현재 창에서 연결합니다. (사용자 개인 브라우저 설정에 따라 달라지기도 함)

    <ul>
        <li>
            <a href="https://www.naver.com/" target="_blank">네이버</a>
        </li>
        <li>
            <a href="https://www.daum.net/">다음</a>
        </li>
        <li>
            <a href="https://duckduckgo.com/">덕덕고</a>
        </li>
    </ul>

• 네이버
• 다음
• 덕덕고

상대경로(relative URL)를 사용하는 것은 아래와 같습니다. 같은 웹사이트내에 있는 경우 도메인네임을 생략할 수 있습니다. 여기서는 슬러그 이름을 상대경로로 사용했습니다. 웹사이트의 디렉토리 계층에 따라 상대경로를 사용할 수 있는데 웹서버 설정에 따라 사용하면 됩니다.

    <ul>
        <li>
            <a href="파이썬-튜토리얼/">파이썬 튜토리얼</a>
        </li>
        <li>
            <a href="자바-튜토리얼/">자바 튜토리얼</a>
        </li>
        <li>
            <a href="c-튜토리얼">C++ 튜토리얼</a>
        </li>
    </ul>

• 파이썬 튜토리얼
• 자바 튜토리얼
• C++ 튜토리얼

페이지 내부 이동은 아래와 같은 #와 id를 사용합니다. 페이지 내부 뿐만 아니라 다른 웹페이지로 이동할 때도 사용할 수 있습니다. 단 그 페이지의 id를 입력해줘야 합니다.

<a href="#daum_link">다음 링크로 이동(페이지내)</a>

이메일 프로그램을 실행하는 href 속성값은 아래와 같습니다.

<a href="mailto:myemail@email.com">메일프로그램에 연결</a>

요약

하이퍼텍스트에 대한 이야기를 조금 하고 a 앵커 태그의 사용법을 알아봤습니다. 문서에 링크를 걸고 문서간에 서로 연결한다는 발상은 인류에게 오래전부터 있었던 발상입니다. 그런데 그것을 실제로 실현시킨 것은 긴 역사에 비하면 정말 최근의 일입니다. 전세계의 지식을 하나의 네트워크에 연결한다는 발상이 얼마나 혁신적인지 우리는 별반 못느끼며 살아가지만 지식에 목말라 있던 과거의 사람들이 언제나 바라던 것이었습니다. 모르는게 생기면 누구나가 궁금하니까요.

이제는 모르는게 생기면 인터넷에 검색하면 됩니다. 거기 모든 대답이 들어있지는 않지만 보편적인 지식은 거의 다 들어가고 있습니다. 글로 읽는게 힘들면 유튜브 등 영상도 많이 있고요. 이런 것들을 연결시켜주는 밑바탕에는 하이퍼텍스트 네트워크가 있습니다. 이를 구현하기 위해서는 많은 태그가 필요없지요. a태그와 몇가지 태그를 조합하면 됩니다.

한가지 주의할 점은 하이퍼텍스트 기술이 좀더 발전하면서 임베디드 태그 같은게 나왔는데 웹사이트에 무단으로 남의 자원들(동영상, 이미지, 음원 파일 등 멀티미디어, 혹은 크롤링 데이터)을 무단으로 사용하는 경우 저작권 문제에 걸릴 수 있습니다. 사이트에 따라서는 a 태그만 걸어도 문제가 되는 경우가 있기 때문에 타인의 사이트에 링크를 거는 경우 충분히 저작권을 알아보고 하는게 좋습니다. 제일 좋은 방법은 사이트 관리자에게 이메일 등 서면 허가를 받아서 사용하는 것 입니다.

판례 상으로는 링크를 거는 것 정도는 허용되는 것으로 알려져 있지만 항상 그렇지는 않습니다. 링크의 사용에 대한 것도 기술과 시대의 변화를 반영하기도 합니다.

또 한가지는 구글 검색엔진의 SEO 랭킹을 개선하기 위해서 백링크라는게 있습니다. 백링크 전략을 사용하기 위해서 사용하는 속성도 있는데 이 포스팅에서 다루지는 않겠습니다. 다만 구글 SEO 백링크로 검색을 하면 그런 내용도 나오니 참고하면 좋습니다.

참고문서

<a> – HTML: Hypertext Markup Language | MDN (mozilla.org)