[a Tag] 링크 태그

안녕하세요 아기크롱입니다.

작성된 글을 읽으시면서 빼먹은 부족한 부분은 댓글고고^^ 

그럼 시작합시다

 

 

<a>태그란,

- <a href="URL경로" title="설명" target="문서가 로드될 대상"> 링크이름 </a>⊙ 

- 문서에서 다른 문서로 이동할 수 있도록 도와주는 연결시스템이다.

 

(1)대체적으로 사용되는 사례     

1) 문서에서 문서로의 이동 

== <a href ='다른url주소 또는 html주소'></a>

2) 이미지에서 이미지로 연결입니다.

== <a href='이미지가 있는 html 경로'> <img src='이미지 경로'></a>

3) 다른 태그의 id값과 href에 #를 사용하면 같은 문서내에서 특정위치(페이지상단)로 이동가능

== <a href ='페이지 상단 임의의 태그id값'></a>

4) 압축파일 다운받기입니다.

== <a href ='압축파일경로.파일명'></a>

 

(2)속성에 대한 설명

 1) href : 링크와 연결된 리소스(Resource)의 주소

 2) title: 연결되 있는 리소스에 대한 설명.

 3) target: _self, _blank, _parent 등 문서가 로드될 위치.

_self : 현재 문서가 로드된 프레임. 현재 문서가 사라지고 해당 리소스의 주소가 실행됨

_blank: 새 창(새 탭). (새 창을 띄우고 거기에 문서를 로드시킴)

_parent: 현재 문서가 frame나 iframe에 로드된 경우 현재 문서를 로드한 프래임에 문서로드.

 

(3) 링크태그의 경로설정

1) sample2.html에서 하위경로 a폴더내에 sample1.html 지정시

      하위경로 지정 <a href="a/sample1.html"> 

2) sample1.html에서 상위경로 a폴더내에 sample2.html 지정시

상위경로 지정  <a href="../sample2.html">

(4) <a>element에 타이틀 속성을 설정할 수 있습니다.

sample.html에서 하위경로 a폴더내에 link.html 지정시, 

목적지를 생성하기 위해 <a> element를 사용할 수 있습니다.

<a id="식별자">내용</a>

(5-1) 미디어 연결하기

브라우저 파싱을 개선하기 위해 width, height 속성을 사용합니다.

<img src="해당파일이 있는 경로" alt="설명" width="100" height="150">

색상 영역에 따라 이미지 포맷 방식의 차이를 둡니다.

이미지의 이름: src=google.png 

가로크기: width="200"

세로크기: height="100" 

엑박일경우 텍스트표시: alt="구글이미지"

이미지경계선: border="0" (0은 선이없는것, 수가 클수록 선이 두꺼워진다)

.jpg: color가 많은 경우

.gif: color가 적은 경우

 

(gif일 경우 외각의 투명 영역 포함 여부를 결정합니다.)

(폴더명의 대문자소문자를 맞춰주지 않으면 링크와 연결안된다)