[HTML#6] 링크태그!

 안녕하세요, 민둥산의 민둥이입니다. 블로그 정리 글을 오늘 써야지 내일 써야지 하다가 며칠이 지나버렸네요 하하(머쓱). 하지만 최근에는 같은 반에 티스토리 블로그를 하시는 분과 맞구독도 했기 때문에 다시 열심히 해보려고 합니다!

 

 오늘은 링크를 거는 태그에 대해서 알려드릴 건데요, 웹 브라우저에서 자주 볼 수 있는 그 하이퍼 링크를 말하는 것이 맞습니다. 

 

 링크 태그의 기본 문법

<a href="이동할 경로(주소)"> ... </a>

링크 태그는 기본적으로 <a> 태그를 사용하여 문자 또는 이미지를 감싸주어야 합니다. <a> 태그에서 a는 anchor의 약자로, "고정시키다" 쯤의 의미가 되겠네요. 중요한 것은 <a>태그가 절대 혼자 쓰일 일이 없고, 경로를 설정하는 속성인 href가 항상 같이 쓰인다는 점입니다. 

 

링크 태그의 특징 (하이퍼 링크의 텍스트 특징)

• 색상 변화 - 링크의 상태에 따라서 링크를 감싸고 있는 텍스트의 색깔이 변화합니다.
  • blue - 초기링크. (이동한 적이 없는 주소)
  • 빨간색 - 활성화 링크. (마우스 커서로 누르는 동안 나옴)
  • 보라색 - 방문한 링크. (방문한 적이 있는 주소)
• 밑줄 - 하이퍼링크라는 것을 사용자에게 알려주기 위해 텍스트에 밑줄이 표시됩니다.
  • 하이퍼링크에 마우스를 올리고 있으면 커서가 손 모양으로 바뀝니다.
• 한 가지 알아야 할 점은 링크 태그에 텍스트가 없이 이미지를 사용한다 하면 위의 특징들은 나타나지 않습니다.

 

링크 태그의 속성

• href
  • hypertext reference의 약자로, 하이퍼 텍스트 참조라는 뜻입니다.
  • 링크 태그로 감싼 텍스트를 클릭 했을 때의 이동 경로를 지정합니다.
• target=""
  • _self (default)
    • 다른 속성을 지정하지 않을 경우 자동으로 기본 설정되는 값입니다.
    • 하이퍼링크 클릭 시 클릭한 페이지 자체를 바꿉니다.
  • _blank
    • 하이퍼 링크 클릭 시 새 탭에서 링크를 엽니다.

 

☆★또 한가지 굳이 추가하자면 절대 경로와 상대 경로의 개념입니다만, 저번에 이미지 태그에 설명한 것과 정확하게 똑같이 적용되는 개념이라 따로 설명하지 않겠습니다(궁금하면 전의 글을 다시 방문해주세요^^)★☆

 

 HTML 코드로 쓴 것과 제가 타이핑으로 쓴 설명글을 나누는 경계입니다^^ 연습하실 분은 한번 따라 만들어 보세요:)

============================================================================

링크 수업 - 1 링크 수업 - 2 링크 수업 - 2(Gallery Menu)

---

a 태그로 링크 걸기

<a href="이동할 경로(주소)"> ... </a>

• 링크 걸린 텍스트의 특징
• 색상 변화
1. blue - 초기링크. (이동한 적이 없는 주소)
2. 빨간색 - 활성화 링크. (마우스커서로 누르는 동안)
3. 보라색 - 방문한 링크. (방문한 적이 있는 주소)
• 밑줄
커서가 손모양으로 바뀜

경로

• 절대 경로 - 항상 고정된 주소
• 상대 경로 - 웹문서의 위치에 따라 달라지는 주소

---

w3schools
daum

---

2. 상대 경로로 링크 걸기

html기초 수업
글자tag 수업
목록 수업
테이블 수업
이미지 수업
링크 수업

2-2. 상대 경로로 .jpg/gif/png/...(이미지)로 링크 걸기

cat woman Daum으로 가기 겨울

2-3. 상대 경로로 동영상 (mp4)으로 링크 걸기

겨울영상 수트남

2-4. 상대 경로로 *.txt(파일)로 링크 걸기

메모장

---

3. 웹브라우저가 처리 불가한 파일 링크 걸기(*.zip/*.hwp...)

이미지 압축파일

링크를 여는 방식 지정 - target=""

1. _self - 기본값. 현재 위치에 링크가 열림
2. _blank - 새탭에 링크가 열림
3. _parent - 상위창에 링크가 열림
4. _top - (프레임구조에서) 나뉨없이 전체에 하나로 링크가 열림

w3schools
겨울영상 수트남
ITWILL Busan

---

링크 걸린 이미지(이미지 링크 걸기)

<a href="이동할 경로(주소)"> <img src="이미지 경로"> </a>

로고클릭시 해당 사이트 열어주기

썸네일 클릭시 이미지 보여주기

---

이메일링크 걸기

관리자에게 문의 class@itwillbs.co.kr

---

Top 링크 걸기

TOP