[Html] a태그 링크 정리(새창으로 열기,현재창으로 열기)

 

 

 

안녕하세요. 키미추입니다.

HTML 링크 걸어주는 방법 총정리를 해보았습니다.

 

 

 

블로그를 하다보니..더군다나 티스토리 블로그라서 HTML을 조금씩 만지면서 사용하곤 하는데, 자주 사용되는 태그는 아마도 링크를 걸어주는 a태그가 아닐까싶다.

블로그 에디터 자체에서 링크 걸어주는 방법도 있지만.. 버릇처럼 자꾸만 HTML 에디터 모드에서 일일이 a href=""...를 쳐주고 있다.

전용 에디터 경우 자동완성으로 조금 더 빠르고 편하게 사용할 수 있지만 블로그에서는 일일이 수작업으로 하나하나 쳐줘야 한다.

---

자주 사용하는 링크와 기타링크에 대한 것까지 정리해놓으면 내 블로그 쓰는 시간도 단축되고 여러 방면에서 훨씬 효율적일 것으로 본다.

 

 

 

 

 

 

1.링크 의미,뜻

링크는 다른 페이지나 문서,파일 간의 연결을 의미하며 기본적으로 링크 위에 마우스를 올리면 작은 손모양으로 바뀌게 된다.

웹,앱을 사용하면서 거의 모든 글에서 "다른 글을 보여주기 위해" 또는 "광고를 보이기 위해" 매우 흔하게 접하는만큼 링크는 매우 중요한 기능을 하는 웹,프로그래밍 요소이다.

 

 

2. a태그

a태그는 하이퍼링크를 말한다.

<a>태그와 함께 사용할 수 있는 속성으로는 href 가 있으며, <a href="url"> 같은 식으로 써준다.

a태그는 기본적으로 현재 창에서 열리며 링크주소에 밑줄이 생기고 마우스 포인터가 작은 손으로 변경되지만, 이는 언제든 쉽게 변경이 가능하다.

 

 

 

3.링크 정리

3-1.기본 링크

-현재 창에서 열기 <a href="링크주소"></a> -새창으로 열기 <a href="링크주소" target="_blank"></a>

target은 a태그가 어느 목표 지점에서 열릴 것인가를 결정해주는 속성이다.

target의 속성은 _self(현재 지점)/_blank(새 창)/_parent(상위 프레임)/_top(창 전체) 이 있으며

a태그의 기본속성은 "현재창에서 열기"이니 따로 속성을 지정해줄 필요가 없다.

주로 사용하는 것이 새창/현재창으로 열기인데 새창으로 열기를 해줄때만 target=_blank를 지정해주면 된다.

 

 

3-2.링크 설명(마우스 올릴때 설명 나타남)

-현재 창에서 열기 <a href="링크주소" alt="링크설명"></a> -새창으로 열기 <a href="링크주소" target="_blank" alt="링크설명"></a>

 

 

 

 

 

3-3.기본링크+링크에 밑줄 표시X

-현재 창에서 열기 <a style="text-decoration: none;" href="링크주소"></a> -새창으로 열기 <a style="text-decoration: none;" href="링크주소" target="_blank"></a>

 

 

3-4.이미지/사진에 링크 달기

-현재 창에서 열기 <a href="링크 주소">     <img scr="이미지 파일경로" style="width:200px;height:300px;"> </a> -새창으로 열기 <a href="링크 주소" target="_blank">     <img scr="이미지 파일경로" style="width:200px; height:300px;"> </a>

---

문의는 댓글 남겨주세요.