꼬마낙타 태그 연습장
HTML의 가장 기본이라고 할 수 있는 요소가 바로 링크입니다. 하이퍼 텍스트( Hyper Text ) 라는 말에서 알 수 있듯이 웹에서 모든 문서는 서로 링크라는 것으로 연결이 되어 있습니다. 그러면 링크란 무엇이며 링크 태그는 어떻게 사용하는 것일까요? 먼저 링크 태그는 HTML 페이지를 구성 할 때, 링크를 넣어 주는 역할을 하는 태그를 의미 합니다.
링크란 무엇일까요? 이것이 링크입니다. --> http://plusblog.tistory.com/
화살표 오른편에 있는 주소를 클릭하면 여러분은 저의 블로그로 돌아 올 수가 있습니다. ( 비슷한 예로 네이버 주소를 클릭해서 들어가게 만들 수도 있지요. 링크는 사전적으로 연결이란 뜻을 가지고 있는데, 웹 페이지에선 클릭을 해서 다른 페이지로 혹은 자기 자신의 특별한 곳으로 갈 수 있는 기능을 의미합니다.
링크를 걸 수 있는 방법은 여러가지가 있습니다. 첫 번째로 블로그의 스마트 에디터가 있는데요. 티스토리를 예로 들면 글을 쓸 때, 쇠사슬 모양의 링크 버튼이 있습니다.
링크 태그 넣기 : 스마트 에디터
1번 버튼을 누르면 2번이 확장되어 주소를 쓸 수 있는 창이 나오게 됩니다. 2번의 입력 창에 주소를 입력하면 본문에 링크가 삽입이 됩니다. 물론 이런 쉬운 방법이 있지만 HTML 태그를 이용해서 좀 더 강력하고 추가적인 정보를 입력 할 수가 있습니다.
링크 태그의 기본적인 형태는 다음과 같습니다. 태그연습장을 열어서 연습해 보세요~
<a href="주소">꼬마낙타 블로그</a>
위 속 성에서 주소라는 부분에 연결을 시킬 주소를 써 넣습니다. 만약 href="http://www.naver.com/" 을 써 넣으셨다면 해당 링크 태그를 적용 시켰을 때, 네이버로 링크를 시켜주겠죠. 주의 하실 점은 <a src="주소"> 로 사용하지 않는 것입니다. 다른 태그들은 src 속성으로 주소를 접근하지만 a 엘리먼트는 href 로 접근하니 꼭 외워 두시기 바랍니다.
태그 연습장을 열어서 다음을 연습합니다
.
<a href="주소" target="_blank">꼬마낙타
블로그</a>
이번에 추가로 볼 속성은 target 속성입니다. target 속성은 링크를 클릭했을때, 링크에 해당하는 html 문서( 혹은 이미지 혹은 비디오 등등... 링크가 걸린 대상 )가 새창에서 열릴 것인지 혹은 현재창에서 열릴 것인지를 결정하는 속성입니다. target 속성은 다음의 값들을 취할 수 있으며 각각 뜻을 가지고 있습니다.
| Target 값 |
의미 |
| _blank | 새로운 창을 만들어서 해당 링크를 새로운 창에 불러옵니다. |
| _self |
현재 창에 해당 링크를 불러옵니다. ( 현재 창이 바뀝니다. ) |
| _parent | iframe 같은 엘리먼트에서 부모 프레임에 해당 링크를 불러옵니다. |
| _top | 현재 창 전체에 불러옵니다. ( 프레임이 있을 경우 ) |
나머지는 조금 응용을 할 때 필요하고 _blank와 _self 정도를 알아두면 편리하게 웹 페이지 혹은 블로그를 꾸미실 수 있을 겁니다.
.
<a href="주소" title="설명">꼬마낙타 블로그</a>
이번엔 title 이라는 속성에 대해서 알아보도록 하겠습니다. title 은 img 태그에서도 쓰이는 속성으로 마우스를 가져 갔을 때, 부가 설명으로 뜨는 작은 메모 같은 것입니다. 위 태그를 태그연습장으로 실행시켜 보면,
위 사진처럼 링크에 부가적인 설명이 붙게 됩니다. 링크의 내용( 여기서 꼬마낙타 블로그라는 글자 )이 너무 길어질 경우에는 간단하게 마우스를 가져가면 부가적인 설명이 뜨도록 하고 싶을 때, title 속성을 이용하면 유용합니다.
.
<a href="mailto:intro200@naver.com" title="메일보내기">꼬마낙타 블로그</a>
태그를 위와 같이 쓰면 어떻게 될까요? 주소를 쓰는 href 속성안에 mailto: 라는 생소한 단어와 함께, 뒤에는 메일주소로 보이는 것이 쓰여져 있습니다. 눈치가 빠르신 분이라면 아셨겠지만 바로 웹 페이지에서 클릭 한번으로 메일을 보낼 수 있게 해주는 방법입니다.
제 경우에는 태그연습장을 이용해서 위 태그를 돌려보니, Outlook 이 켜지네요. 아마 다른 분들도 ( 윈도우즈 운영체제를 사용하시는 분이라면 ) 아웃룩이 뜰 꺼라고 생각 됩니다. 다른 메일 관리 프로그램이 설치되어 있고, 그 프로그램이 기본 프로그램으로 설정되어 있다면 아마도 그 프로그램이 뜨겠죠. ^^
.
<a href="주소" title="CSS 적용" style="color:red">꼬마낙타 블로그</a>
앞으로 HTML을 배운뒤 CSS라는 것을 배우게 될 텐데, 간단히 CSS를 적용 할 수 있는 속성이 바로 style 속성입니다. 이 style 속성 안에는 css 문법에 맞게 디자인 된 코드가 들어가게 되는데, 위 내용은 이 엘리먼트의 글자 색을 red ( 빨간색 ) 로 하겠다!! 라는 의미입니다. css 는 생각보다 매우 강력한 도구이기 때문에 앞으로 웹 페이지를 디자인 할 때, 이 style 태그를 많이 사용하시게 될 겁니다.
<a href="http://www.naver.com" title="네이버"><img src="http://sstatic.naver.net/search/img2/logo_naver_2.gif" /></a>
태그 실행 결과 : 
위 이미지를 클릭하면 바로 네이버 홈페이지로 링크를 따라 가는 것을 볼 수 있습니다. 링크 태그의 가장 큰 장점이 바로 이것이 아닌가 생각되네요. 홈페이지 꾸밀 때, 배너를 클릭하면 홈페이지로 링크를 따라서 갈 수 있게 해놓면 좀 더 멋진 홈페이지를 만들 수 있을 겁니다.
<a name="#앵커이름">앵커</a>
...
...
...
<a href="#앵커이름">잃어버린 앵커를 찾아서~</a>
...
...
...
<a href="#앵커이름">잃어버린 앵커를 찾아서~</a>
이 포스트에도 앵커를 걸어 놨습니다. 위 링크들을 클릭하면 해당 챕터로 이동하게 되구요. 앵커를 이용하면 웹 페이지의 특정 위치로 이동하기에 편하다는 장점이 있습니다. 좀 더 스마트한 웹 페이지를 만들고 싶으신 분들은 앵커를 사용해서 웹 페이지를 좀 더 구성지게 만들어 보세요.
지금까지 링크 태그의 사용법과 특징들에 대해서 알아 봤습니다. 링크 태그만 알아도 정보로 가득한 웹 페이지를 만들수가 있으니 잘 알아 두시기 바래요. ^^