HTML 버튼 링크 새창 열기 방법 정리

HTML에서 버튼을 클릭했을 때 새 창으로 링크를 열려면 window.open 또는 a 태그의 target 속성을 활용해야 합니다. 특히 폼 전송 없이 링크만 새 탭에 띄우고 싶을 때 자바스크립트 방식이 가장 많이 사용됩니다.

하지만 단순 a 태그와는 달리, button 요소는 클릭 이벤트 처리가 필요하다는 점에서 헷갈리는 경우가 많습니다.

버튼 클릭 시 새창 열기 코드는 어떻게 구성해야 할까요?

HTML 버튼 링크 새창 열기 방법 정리

• <button> 태그 자체에는 링크 기능 없음
• JavaScript의 window.open()으로 새창 열기 처리
• <a> 태그 사용 시 target="_blank" 추가

1. button 태그는 기본적으로 링크 기능이 없습니다

HTML의 `

1) 단순 클릭 이벤트로 새창 열기

자바스크립트의 `window.open()` 함수를 이용하면, 특정 URL을 새 창(또는 새 탭)으로 열 수 있습니다. 예시는 아래와 같습니다.

<button onclick="window.open('https://example.com', '_blank')">새창으로 이동</button>

2) target=_blank는 a 태그 전용

`target="_blank"` 속성은 `` 태그에서만 작동합니다. `button` 태그에 붙여도 작동하지 않으며, 반드시 자바스크립트로 새창 처리를 해야 합니다.

3) 보안 정책과 팝업 차단 주의

브라우저에 따라 팝업 차단 설정이 기본 활성화되어 있을 수 있습니다. 사용자 클릭 이벤트와 연결되지 않은 window.open() 호출은 대부분 차단됩니다.

IcoMoon 아이콘 폰트 사용법 정리

IcoMoon 아이콘 폰트 사용법 정리

2. HTML 버튼 새창 링크 방법 요약

아래는 각 방식별 코드 비교입니다. 상황에 맞게 선택하세요.

방법	설명	사용 대상	주의사항
<a> + target="_blank"	가장 단순한 새창 링크	일반 텍스트 또는 버튼 스타일	버튼처럼 보이도록 CSS 필요
<button> + onclick + window.open()	자바스크립트로 새창 열기	폼 외의 버튼 사용	브라우저 팝업 차단 확인
<input type="button">	button과 유사	클래식한 버튼 UI	JS로 새창 처리 동일

3. 다양한 버튼 예제 코드

1) 자바스크립트 직접 삽입형

<button onclick="window.open('https://naver.com', '_blank')">네이버 새창</button>

2) 자바스크립트 함수 분리형

<button onclick="openNewTab()">구글 새창</button>

<script>
  function openNewTab() {
    window.open('https://google.com', '_blank');
  }
</script>

3) a 태그를 버튼처럼 사용하기

<a href="https://daum.net" target="_blank" style="padding:10px 20px; background:#007bff; color:#fff; text-decoration:none; border-radius:4px;">다음 새창</a>

4. 추천 사용 시점 및 팁

1) 팝업이 필요한 이벤트 버튼

광고나 이벤트 참여, 약관 확인 등 기존 페이지를 벗어나지 않도록 새창을 유도해야 하는 상황에 적합합니다.

2) CSS 스타일 통일 목적

모든 인터랙션을 `

3) 접근성과 SEO

`a` 태그는 본래 링크 기능이 있으므로, 검색엔진 최적화나 키보드 접근성 측면에서는 더 유리합니다. 중요한 링크는 가능하면 ``를 사용하는 것이 좋습니다.

• button 태그는 JS 없이 링크 기능 불가
• window.open()으로 새창 트리거 가능
• 팝업 차단 회피를 위해 사용자 이벤트 연결 필수

2025년 장마 기간과 7월 8월 장마전선 영향

2025년 장마 기간과 7월 8월 장마전선 영향

5. 자주 묻는 질문

Q. HTML button 태그에 링크를 넣을 수 있나요?

직접적으로는 불가능하며, JavaScript의 onclick을 이용해 링크를 열어야 합니다.

Q. 새창으로 열기 위한 속성은 어떤 건가요?

a 태그의 경우 target="_blank" 속성으로 새창을 열 수 있습니다. button 태그는 JavaScript가 필요합니다.

Q. 팝업 차단으로 window.open이 막히는 경우?

window.open은 사용자 클릭 이벤트 안에서 실행되어야 합니다. 자동 실행되면 대부분 브라우저가 차단합니다.

Q. button 대신 a 태그를 써야 할 때는?

링크 목적이라면 a 태그를 사용하는 것이 접근성과 SEO 측면에서 더 좋습니다.

Q. 버튼 링크 클릭 시 페이지 전환 없이 새창으로 열 수 있나요?

window.open을 사용하면 현재 페이지는 그대로 유지되고 새 탭이 열립니다.