내부 링크를 현재 창에서, 외부 링크를 새 탭에서 열리도록 설정하기 [자바스크립트]

자바스크립트 위치

Rank Math 등 SEO 플러그인에서는 SEO(검색엔진최적화)를 위해 모든 외부 링크를 새 탭/새 창에서 열리도록 하는 옵션을 제공합니다. 플러그인을 사용하지 않고 모든 링크를 새 창이나 현재 창에서 열리도록 하기를 원하거나 내부 링크는 현재 탭에서 외부 링크는 ...

더 읽기

자바스크립트 팝업 만들기 (feat. ChatGPT)

자바스크립트 팝업 만들기 (feat. ChatGPT)

워드프레스에는 다양한 팝업 플러그인이 있기 때문에 팝업 플러그인을 사용하여 쉽게 팝업을 표시할 수 있습니다. 플러그인에서 제공하는 기능을 사용하여 팝업을 표시할 페이지, 빈도 등을 설정하는 것도 가능합니다. 심플한 이미지 팝업부터 드래그 앤 드롭 방식으로 쉽게 팝업을 ...

더 읽기

자바스크립트 모달 팝업 (Javascript Modal Popup)

자바스크립트 모달 팝업 (Javascript Modal Popup)

워드프레스에서는 팝업 플러그인을 사용하여 쉽게 모달 팝업을 사이트에 표시할 수 있습니다. 이 글에서는 자바스크립트를 사용하여 페이지 로드 시 모달 팝업을 표시하는 방법에 대하여 살펴보겠습니다. CSS를 사용하여 Div 요소를 클릭하면 모달 팝업이 표시되도록 하고 싶은 경우 ...

더 읽기

Identifier 'elements' has already been declared 에러

Identifier 'elements' has already been declared 에러

워드프레스 bbPress 게시판에서 날짜 포맷을 바꾸고 길이를 조정하는 자바스크립트 코드를 적용하니 Uncaught SyntaxError: Identifier 'elements' has already been declared 에러가 발생하면서 스크립트를 제대로 작동하지 않는 문제가 발생하여 이 에러에 대하여 구글링을 해보았습니다. 자바스크립트에서 Uncaught SyntaxError: ...

더 읽기

jQuery를 사용한 기본적인 이미지 롤오버(Rollover) 효과

jQuery 이미지 롤오버

마우스를 올렸을 때 이미지가 바뀌는 기본적인 JQuery 기반의 이미지 롤오버(Rollover) 효과를 구현하는 방법입니다. 동일한 크기의 이미지 두 개를 준비합니다. 마우스를 올리면 원래 표시되던 이미지가 페이드 아웃(Fade out)되고 다른 이미지가 페이드 인(Fade in)되고, 마우스가 그림 영역을 벗어나면 ...

더 읽기

Medium처럼 위아래 스크롤에 따라 헤더 숨기기/표시하기

Medium처럼 위아래 스크롤에 따라 헤더 숨기기/표시하기 2

과거 우리나라에서 웹사이트 제작이 비교적 초창기였을 때 사이트들은 전반적으로 플래시를 사용하여 화려한 효과를 중시했었습니다. 제가 웹에 대해 아무 것도 모르던 시절(지금도 잘 모르지만)에 포트폴리오 홈페이지를 하나 만든 적이 있었습니다. 디자인에 대해서도, html에 대해서도 거의 아는 것이 없었기 때문에 ...

더 읽기

jQuery를 사용하여 DIV를 랜덤하게 표시하기

jQuery를 사용하여 DIV를 랜덤하게 표시하기 3

페이지를 로드할 때마다 여러 개의 DIV 항목 중 하나를 랜덤하게 표시하고 싶은 경우가 있습니다. 예를 들어, 페이지를 방문할 때마다 여러 개의 배너 이미지 중 하나가 무작위로 표시되도록 하는 경우에 여기에 해당됩니다. 이 경우 jQuery를 사용하여 ...

더 읽기

[jQuery] 동일 페이지 내에서 부드럽게 스크롤시키기

[jQuery] 동일 페이지 내에서 부드럽게 스크롤시키기 4

동일 페이지 내에서 링크를 클릭했을 때 부드럽게 스크롤되도록 하려면 다음 jQuery 스크립트를 사용할 수 있습니다. $(function() { $('a[href*="#"]:not([href="#"])').click(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ...

더 읽기

jQuery를 사용하여 링크를 새 창에서 열기

jQuery를 사용하여 링크를 새 창에서 열기 5

특정 링크(예: 단일 링크, 모든 외부 링크 등)를 클릭했을 때 새 창에서 열리도록 하고 싶은 경우가 있을 수 있습니다. 이런 경우 HTML 소스에서 를 삽입하면 쉽게 해결되겠지만 소스 코드를 수정할 수 없는 경우에는 어떻게 하면 ...

더 읽기