(html) a href 새 창 열기 및 크기 지정

a href 새 창 열기 및 크기 지정하는 방법

 

a tag

a tag

<a href="url">새 창 열기</a>

<a> 태그는 하나의 페이지에서 다른 페이지로 연결하는 하이퍼링크(hyperlink)를 걸기 위한 용도로 사용되는데요.

<a> 태그에서 가장 핵심이 되는 속성은 링크의 목적지를 가리키는 href 속성으로 <a href="url">의 형식으로 주로 사용됩니다.

 

 

---

a href 새 창 열기

a href 새 창 열기

<a href="url" target="_blank">새 창 열기</a>

a href에서 새 창을 열기 위해서는 a 태그의 target 속성을 사용해야 하는데요.

target 속성은 링크된 문서를 클릭했을 때 문서가 열릴 위치를 명시하는 용도로 사용됩니다.

 

target 속성에 설정할 수 있는 값으로는 '_sefl', '_blank', '_parent', '_top'이 있으며, 링크를 새 창으로 열기 위해서는 '_blank'로 값을 지정해야 하는데요. '_blank' 외에 다른 설정값에 대한 내용은 아래와 같습니다.

 

_self : 클릭한 해당 창에서 링크를 연다.

_blank : 새 창으로 링크를 연다.

_parent : 부모 창에서 링크를 연다.

_top : 전체 브라우저 창 중에서 가장 상위 창에서 링크를 연다.

 

(target 외에도 title이라는 속성이 있으며, title 속성을 통해 해당 링크에 마우스 커서를 올렸을 때, 도움말 설명을 설정할 수 있습니다.)

 

 

---

window.open

window.open

//새 창 열기
<a href="url" onclick="window.open(this.href, '_blank'); return false;">새 창 열기</a>

//새 창 열기(사이즈 지정)
<a href="url" onclick="window.open(this.href, '_blank', 'width=400, height=400'); return false;">새 창 열기</a>

새 창을 여는 방법에는 javascript window 객체의 open() 함수를 사용하는 방법도 있는데요.

새 창을 열 때 사이즈를 지정하고 싶은 경우는 다음과 같이 window.open() 방식을 사용해야 합니다.

 

사이즈를 설정하는 부분에 들어갈 수 있는 'width', 'height' 외에 다른 옵션으로는 'left', 'top', 'location', 'menubar', 'resizeable', 'scrollbars', 'status', 'toolbar' 등이 있습니다.

 

 

width : 새 창의 폭 (pixels 단위, 최소 값은 100)

height : 새 창의 높이 (pixels 단위, 최소 값은 100)

left : 새 창의 왼쪽 위치 (pixels 단위, 양수만 가능)

top : 새 창의 위쪽 위치 (pixels 단위, 양수만 가능)

location : 주소 표시줄의 여부 (yes, no)

menubar : 메뉴 표시줄의 여부 (yes, no)

resizeable : 창 크기 조절 여부 (yes, no)

scrollbars : 스크롤 막대 표시 여부 (yes, no)

status : 상태 표시줄 여부 (yes, no)

toolbar : 도구모음 표시 여부 (yes, no)

 

 

***

<input type="button" value="새 창 열기" onclick="window.open('url', '_blank', 'width=400, height=400');">

window.open() 방식은 a 태그가 아닌 input 태그에도 사용할 수 있습니다.

 

 

---

ref="noreferrer noopener"

번외로 target="_blank"에는 보안적인 문제점이 존재하는데요.

따라서 링크한 페이지에서 발생할 수 있는 보안 문제를 방지하기 위해 rel 속성의 값을 noreferrer noopener로 설정하는 것이 권장됩니다.

 

noopener : 노오프너(noopener)를 지정하면 링크된 페이지에서 window.opener를 사용해서 링크를 건 페이지를 참조할 수 없게 됩니다.

noreferrer : 노리퍼러(noreferrer)를 지정하면 다른 페이지로 이동할 때, 링크를 건 페이지의 주소 등의 정보를 브라우저가 HTTP 리퍼러 헤드(referrer head)를 넘기지 않도록 합니다.

 

 

 

< 참고 자료 >

https://www.freecodecamp.org/korean/news/how-to-use-html-to-open-link-in-new-tab/

https://serpiko.tistory.com/486