[TIL] 230316 [JS] <a>태그가 아닌 다른 태그에 링크 걸기

---

TIL 학습목표

• <a> 태그를 이용한 링크연결을 할 수 있다.
• <a> 태그가 아닌 다른 태그로도 링크연결을 할 수 있다.

---

1) 문제점

기존에 <a>태그를 이용해서만 링크를 걸어줬었다.

하지만 프로젝트 진행에 있어서 a태그 외에 다른 태그에도 링크를 걸어줄 필요가 있었다.

또한, <a>태그의 target 속성처럼 현재창열기, 새 창 열기를 결정하고 싶었다.

---

2) 시도해본 것들

JS 지식이 부족해 일어난 일이므로, 링크와 관련된 학습을 진행했고 배운 것을 정리해보자.

 

▶<a> 태그의 사용법과 target 요소 참고

_blank	링크된 문서를 새로운 윈도우나 탭(tab)에서 오픈함.
_self	링크된 문서를 링크가 위치한 현재 프레임에서 오픈함. 기본값(defalut)으로 생략 가능.
_parent	링크된 문서를 현재 프레임의 부모 프레임에서 오픈함.
_top	링크된 문서를 현재 윈도우 전체에서 오픈함.
프레임 이름	링크된 문서를 명시된 프레임에서 오픈함.

        <a href="https://www.tistory.com/" target="_blank"> 새창에서 열기</a>    

        <a href="https://www.tistory.com/" target="_self"> 현재창에서 열기(defalut)</a>

        <a href="https://www.tistory.com/"> 현재창에서 열기(defalut)</a>

        <a href="https://www.tistory.com/" target="_parent"> 부모 프레임에서 오픈</a>

        <a href="https://www.tistory.com/" target="_top"> 윈도우 전체에서 오픈</a>

---

▶onclick을 활용한 링크걸기

        <button onclick="location.href='https://www.tistory.com/';">현재 창에서 열기</button>

        <button onclick="window.open('https://www.tistory.com/');">새 창에서 열기</button>

---

3) 해결

onclick을 이용하는 방법

아래 코드를 활용하여 <div> 태그에도 적용하였다.

        <button onclick="window.open('https://www.tistory.com/');">새 창에서 열기</button>

        <div onclick="window.open('https://www.tistory.com/');">새 창에서 열기</div>

---

4) 알게 된 점

<a> 태그를 자식요소로 활용할 수도 있지만, 다른 태그들에게 바로 링크가 가능함을 배웠다.

 

가능할까? 라는 생각보다는 가능하겠지! 하는 생각으로 찾아보는 습관을 더 늘려가야겠다.