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

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

마우스를 올렸을 때 이미지가 바뀌는 기본적인 JQuery 기반의 이미지 롤오버(Rollover) 효과를 구현하는 방법입니다. 동일한 크기의 이미지 두 개를 준비합니다. 마우스를 올리면 원래 표시되던 이미지가 페이드 아웃(Fade out)되고 다른 이미지가 페이드 인(Fade in)되고, 마우스가 그림 영역을 벗어나면 본래 이미지가 다시 표시되도록 할려고 합니다. 다음과 같은 코드를 원하는 곳에 추가합니다. <img src="before.jpg"...
[jQuery] 모든 target=’_blank’ 제거하기

[jQuery] 모든 target=’_blank’ 제거하기

블로그 글을 작성하면서 링크는 내부 링크든 외부 링크든 모두 새로운 창에서 열리도록 target=”_blank” 속성을 추가한 상태입니다. 하지만 외부 링크는 새로운 창에서 열리도록 하면서 내부 링크의 경우 새로운 창에서 열리는 것보다 같은 창에서 열리도록 하는 것이 더 좋을 것 같다는 생각이 들었습니다. 그러나 이때까지 작성한 글을 모두 수정하는 것은 거의 불가능에 가깝습니다. 글이 몇 개 없으면 수동으로 일일이 수정하면 되겠지만 현재 글이 1600개...
[CSS] 텍스트를 클릭하면 div가 팝업으로 표시되도록 하는 방법

[CSS] 텍스트를 클릭하면 div가 팝업으로 표시되도록 하는 방법

CSS를 사용하여 텍스트 클릭 시 div를 팝업으로 띄우는 방법 가령 “Contact Us”를 클릭하면 문의 폼이 팝업으로 표시되는 등 텍스트 링크를 클릭했을 때 특정 div 영역이 팝업으로 표시되는 효과를 원하는 경우가 종종 있습니다. 이 경우에 사용할 수 있는 스크립트로 다음 stackoverflow에 나와 있는 소스를 소개해드렸습니다. Click text-link image opens up in a box HTML / CSS Popup div on text click...
Medium처럼 위아래 스크롤에 따라 헤더 숨기기/표시하기

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

과거 우리나라에서 웹사이트 제작이 비교적 초창기였을 때 사이트들은 전반적으로 플래시를 사용하여 화려한 효과를 중시했었습니다. 제가 웹에 대해 아무 것도 모르던 시절(지금도 잘 모르지만)에 포트폴리오 홈페이지를 하나 만든 적이 있었습니다. 디자인에 대해서도, html에 대해서도 거의 아는 것이 없었기 때문에 ‘모방은 창조의 어머니’라는 신념으로 모방을 할 사이트를 물색했습니다. 그러다가 심플하면서도 디자인이 괜찮은 유럽의 한 디자인 업체의 사이트를...
javascript를 사용한 간단한 날짜 카운트다운

javascript를 사용한 간단한 날짜 카운트다운

자바스크립트를 사용한 날짜 카운트다운 스크립트입니다(예: 2017년 새해까지 남은 일 수 등). 간단하게 활용할 수 있을 것 같습니다. CountDownTimer('01/01/2017', 'countdown'); // 2017년 1월 1일까지 CountDownTimer('01/01/2018 00:00 AM', 'newcountdown'); // 2018년 1월 1일까지, 시간을 표시하려면 01:00 AM과 같은 형식을 사용합니다. function...
jQuery를 사용하여 DIV를 랜덤하게 표시하기

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

예를 들어, 다음과 같은 HTML 코드가 있을 경우 jQuery를 사용하여 DIV 요소를 랜덤하게 표시할 수 있습니다. <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> 간단하게는 다음과 같은 스크립트를 사용할 수 있습니다. var random =...