(html) a href 새 창 열기 및 크기 지정
a href 새 창 열기 및 크기 지정하는 방법
a tag
<a href="url">새 창 열기</a><a> 태그는 하나의 페이지에서 다른 페이지로 연결하는 하이퍼링크(hyperlink)를 걸기 위한 용도로 사용되는데요.
<a> 태그에서 가장 핵심이 되는 속성은 링크의 목적지를 가리키는 href 속성으로 <a href="url">의 형식으로 주로 사용됩니다.
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
//새 창 열기
<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/