HTML 강좌 3편 - 하이퍼 링크 만들기 | <a> | HTML Tag | 문서의 연결방법

HTML 하이퍼링크(Hyper Link) 만들기

 1. Explain

 2. Usage

   └ ■ Sample

 3. Property

 4. Application

   └ ■ Sample

 5. Secure

현재 Tistory에서는 <a>태그의 오작동이 발견되어

예제는 해당 태그를 본인이 .html파일을 만들어 사용할 것을 권장드립니다.

 #1. Explain(설명)

a 태그는 HTML에서 자주 쓰이는 요소(태그)중 하나입니다.

주로 텍스트나 영역 그림등에 링크를 만들때 사용합니다.

 #2. Usage(사용법)

 - <a>A 태그를 쓰는 방법입니다.</a>

   하지만 위 내용처럼 <a>내용</a> 이렇게만 작성하면 하이퍼링크의 효능이 없습니다.

   <a href="http://gmyankee.tistory.com">GM Yankee 블로그 메인페이지!</a>

   위 와 같이 href =""을 작성해주셔야합니다.

 #2-1. Sample(예제)

See the Pen mxZEzG by GM Yankee (@GMyankee) on CodePen.

 #3. Property(속성)

Property(속성)	사용법 및 정의
href	연결할 문서의 URL 지정
hreflang	연결할 문서의 기본 언어를 지정합니다.
type = content-type	연결할 문서의 MIME(전자우편을 위한 인터넷 표준)을 지정
rel = link-types	현재 문서에서 연결할 링크페이지와의 상관관계를 표현합니다. (이부분은 따로 작성하여 추후 링크로 연결할 예정입니다.)
rev = link-types	링크된 문서를 기준으로 현재 문서와의 관계를 표현합니다. (HTML5에서는 지원이 중단되었다고 합니다.)
charset = charset	연결할 문서의 인코딩을 지정합니다.
shape = default / rect / circle / poly	이미지 맵의 모양을 지정하는 속성입니다. (area태그에서 많이 사용하며, 기본값은 rect입니다.)
coords = '19,24,255'	shape를 통해 모양을 지정한 경우 해당 이미지맵의  좌표값을 설정하는 속성입니다.  rect = 4개 circle = 3개 poly = 최소 6개입니다.
target = '_blank'	문서를 여는 방법에 대한 정의 입니다. target 아래 Application에서 설명하고 있어요!
tabindex = 0	Tab키를 이용하여 이동되는 순서를 의미합니다. 값의 범위 : 0 ~ 32767
accesskey = '1'	단축키를 지정합니다. alt + 1을 누를 경우 해당 태그로 Focus(초점,화면)로 이동되며, onclick 으로 특정 함수를 지정한 경우 해당 이벤트가 동작합니다.
id	css에서 #으로 선언하여 사용하는 방법인데, 이는 옛날 name 속성을 대체하는 방법이기도 합니다. 한 페이지내에 단 한 녀석만 존재해야하는 단점이 있습니다. (CSS에서 심도있는 내용을 다룰 예정입니다.)
class	css에서 .으로 선언하여 사용하는 방법입니다. id와는 다르게 여러 태그에 선언할 수 있습니다. 일부 겹치는 속성을 추상화하여 쓸수도있고, class 자체를 여러개 사용할 수도 있습니다. ex) class='wrap wrap1 wrap2 wrap3'
lang	html선언부에서 lang='ko' 라고 선언하여  이 페이지는 한국어로 작성되었음을 표기합니다.  웹 개발자라면 규격을 작성해주는 퍼포먼스가 있다면 사소한 부분일지라도 정말 멋진 개발자입니다!
dir	텍스트의 방향을 표현합니다.  dir속성안에 3가지 속성이 존재하며 ltr : 왼쪽에서 오른쪽 (left to right) rtl : 오른쪽에서 왼쪽 (right to left) auto : 요소내용에 따른 방향성 (양방향 알고리즘이긴하나 그닥 좋은 성능은 보여내지 못한다고합니다.)
title	a 태그에서 title='GM Yankee' 라고 지정을 한다면, 해당 링크의 마우스 오버(갖다 댈 경우)시 GM Yankee 라는 텍스트가 보입니다.
style	CSS의 정의방법은 약 3가지가 있습니다. 1. CSS파일을 따로 생성하는 경우 2. html 페이지 내에 존재하는 경우 3. html tag 자체에 끼워넣는 경우 우선순위는 3번이 가장 우선시 됩니다.

Application(응용)

 #4. Application(응용)

 * frame name의 경우 target='content' 이렇게 쓰면 안되고 꼭 _content 이렇게 작성해주셔야 target으로 인지합니다. 또한 iframe의 name도 content가 아닌 name = '_content' 라고 명시해주셔야 사용이 가능합니다.

 #4-1. Sample

See the Pen XELKEj by GM Yankee (@GMyankee) on CodePen.

 #5. Secure

a태그에서 페이지 이동을 안 할 경우

<a href="#"></a>을 쓰는 경우가 많은데

이는 클릭시 페이지가 Refersh(새로고침) 되어 다시 로드하게 되어 오래걸리는데,

이때 <a href='javascript:void(0)'></a>를 사용하시면 javascript의 void를 호출하여 undefined 즉 Null값을 호출하여 페이지의 변화가 없습니다.

onclick 등의 호출로 함수를 불러와 특정 이벤트를 발생시킬 수 도 있습니다.