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

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

과거 우리나라에서 웹사이트 제작이 비교적 초창기였을 때 사이트들은 전반적으로 플래시를 사용하여 화려한 효과를 중시했었습니다. 제가 웹에 대해 아무 것도 모르던 시절(지금도 잘 모르지만)에 포트폴리오 홈페이지를 하나 만든 적이 있었습니다. 디자인에 대해서도, html에 대해서도 거의 아는 것이 없었기 때문에 ‘모방은 창조의 어머니’라는 신념으로 모방을 할 사이트를 물색했습니다. 그러다가 심플하면서도 디자인이 괜찮은 유럽의 한 디자인 업체의 사이트를...
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 =...
[jQuery] 동일 페이지 내에서 부드럽게 스크롤시키기

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

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

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

특정 링크(예: 단일 링크, 모든 외부 링크 등)를 클릭했을 때 새 창에서 열리도록 하고 싶은 경우가 있을 수 있습니다. 이런 경우 HTML 소스에서 target=”_blank”를 삽입하면 쉽게 해결되겠지만 소스 코드를 수정할 수 없는 경우에는 어떻게 하면 좋을까요? 한 가지 방법으로 jQuery를 사용하여 target에 “_blank” 속성을 지정해줄 수 있습니다. $("a").attr("target", "_blank"); 위와...
[jQuery] 기존 DIV 바로 뒤에 새로운 DIV 추가하기

[jQuery] 기존 DIV 바로 뒤에 새로운 DIV 추가하기

특정 DIV 다음에 새로운 DIV를 추가하고 원하는 클래스를 부여하고 싶은 경우가 있을 수 있습니다.  이 경우 소스를 수정할 수 있다면 좋겠지만 그렇지 않은 경우 jQuery를 사용할 수 있습니다. 여러 가지 방법을 생각해볼 수 있습니다. 우선 다음과 같은 스크립트가 있습니다. var myClass = "thisIsMyClass"; var div = $("<div></div>").addClass(myClass); $(this).after(div); 예를...
[jQuery] 텍스트에 하이퍼링크(hyperlink) 적용하기

[jQuery] 텍스트에 하이퍼링크(hyperlink) 적용하기

jQuery로 텍스트에 하이퍼링크(hyperlink)를 적용하려면 wrap() 메소드를 사용합니다. 가령 다음과 같은 스크립트의 경우: $("button").click(function(){ $("p").wrap("<div></div>"); }); // Source: w3schools 각 <p> 요소 부분을 <div> 요소로 둘러싸게 됩니다. 이것을 응용하여 특정 요소 내 텍스트에 링크를 적용할 수 있습니다. 예를 들어 다음과 같은...