들어가며
우피의 
HTML 편집 기능은 페이지를 원하는대로 변경할 수 있는 기능입니다. 이론적으로는 페이지의 모든 부분을 변경/추가/삭제할 수 있습니다. 오늘은 그 중에서도 페이지별 HTML 코드 블럭 기능을 이용해서 특정 페이지의 동작을 변경시켜 볼게요. 실제로 종종 문의가 오는 부분이기도 합니다. ‘특정 페이지의 링크들을 모두 새창에서 열도록’ 해볼게요.
HTML 편집 기능은 페이지를 원하는대로 변경할 수 있는 기능입니다. 이론적으로는 페이지의 모든 부분을 변경/추가/삭제할 수 있습니다. 오늘은 그 중에서도 페이지별 HTML 코드 블럭 기능을 이용해서 특정 페이지의 동작을 변경시켜 볼게요. 실제로 종종 문의가 오는 부분이기도 합니다. ‘특정 페이지의 링크들을 모두 새창에서 열도록’ 해볼게요.이번 글의 대부분은 코드 관련 내용입니다. 모두 동작을 보장하는 코드입니다만, 코드 레벨의 안내를 문의에 대한 답변으로 드리지는 않고 있다는 점 참고해주세요~!
코드
페이지 안에 있는 링크들 찾기
var anchors = document.querySelectorAll('a')
JavaScript
복사
querySelectorAll 이라는 함수를 통해서 필요한 element 들을 찾을 수 있습니다. 우리가 찾아야 하는 element 는 링크 인데요. HTML 에서 링크 element 는 <a> 그러니까, anchor 태그로 작성합니다. 위의 코드는 그러니까, 페이지에서 anchor 태그로 작성한 링크 element 들을 찾아달라는 것입니다. 더 자세하고 기술적인 내용은 아래 레퍼런스 링크를 참고해주세요.
링크에 새창으로 여는 옵션 적용하기
var anchors = document.querySelectorAll('a');
anchors.forEach((item) => {
item.target = "_blank";
});
JavaScript
복사
anchor 태그는 target 값을 통해, 클릭했을 때 해당 링크를 어디에서 열 지 설정할 수 있습니다. 새창으로 열기 위해서는 “_blank” 로 target 을 설정하시면 됩니다. 위에 추가한 세줄의 코드는 다음과 같이 해석할 수 있어요.
찾은 링크 element 들의 target 값을 _blank 로 설정하겠다.
작성한 코드 적용하기
<head>
<script defer>
function applyTargetBlank() {
var anchors = document.querySelectorAll('a');
anchors.forEach((item) => {
item.target = "_blank";
});
}
window.addEventListener("load", applyTargetBlank);
</script>
</head>
HTML
복사
이제 페이지별 HTML 코드 블럭 에 맞는 형태로 코드를 조금 바꾸기만 하면 됩니다. 위와 같은 코드 블럭을 작성해서, 해당 블럭을 특정 페이지의 최상단에 놓으면 위에서 작성한 내용이 해당 페이지에 적용되어, 해당 페이지의 모든 링크들은 새창으로 열리게 됩니다.
페이지별 HTML 코드 블럭 에 맞는 형태로 코드를 조금 바꾸기만 하면 됩니다. 위와 같은 코드 블럭을 작성해서, 해당 블럭을 특정 페이지의 최상단에 놓으면 위에서 작성한 내용이 해당 페이지에 적용되어, 해당 페이지의 모든 링크들은 새창으로 열리게 됩니다.코드가 조금 길어져 설명이 필요할 것 같은데요. <head> 선언은, HTML 의 head 에 해당 코드를 넣겠다는 의미 입니다. <script> 선언은 javascript 코드가 이 안에 있다는 뜻이구요. defer 는 크게 신경쓰지 않으셔도 됩니다. 없어도 되구요. 그 다음은 위에서 우리가 작성한 코드를 applyTargetBlank라는 이름의 함수로 선언했습니다. 보기도, 읽기에도 조금 더 쉬우니까요. 마지막은 조금 의아할 수 있는데요. 적당히 해석하자면, ‘페이지에 필요한 리소스(그러니까 링크들)가 나타난 후에 applyTargetBlank 를 실행해줘’ 입니다.
나가며
문법적인 코드 지식이 조금 필요하긴 합니다만, ‘변경하고자하는 부분을 찾아서, 변경하는 코드를 작성하고, 이를 적절하게 배포(적용)한다’라는 것이 변하지 않는 흐름입니다.
