본문 바로가기
화면을 아래로 스크롤할 때 상단 메뉴를 고정하는 방법 (자바스크립트) 화면을 스크롤할 때 상단 메뉴를 고정하고 싶은 경우가 있습니다. 이 경우 구글을 검색하면 다양한 자료를 찾을 수 있습니다. 이 티스토리 블로그에는 최근 공개된 Book Club (북 클럽) 이라는 스킨이 적용되어 있습니다. 북 클럽 스킨에서는 화면을 아래로 스크롤할 때 메뉴가 상단에 고정되지 않습니다. 현재 이 블로그에서는 w3schools.com에서 제공하는 코드를 사용하여 화면을 아래로 스크롤할 때 메뉴를 고정하도록 만들었습니다. 스킨의 제약 때문에 조금 엉성하지만 개인용 블로그이기 때문에 그냥 사용해도 무방할 것 같습니다. 소스는 다음 문서에 나와 있습니다. How TO - Sticky/Affix Navbar (W3Schools) 다음 jsfiddle에서 작동을 확인할 수 있습니다. https://.. 2019. 9. 16.
자바스크립트를 사용하여 DIV 위치 순서 변경하기 [자체 정리용] jQuery를 사용하면 쉽게 DIV의 위치를 변경할 수 있습니다. jQuery 대신 자바스크립트를 사용하고 싶은 경우 다음 Statckoverflow 글을 참고할 수 있습니다. Change div order in CSS or javascript 예시:var content = document.getElementById('FeaturedContent'); var parent = content.parentNode; parent.insertBefore(content, parent.firstChild); DIV에 ID가 지정된 경우 위와 같이 document.getElementById를 사용하면 됩니다. 클래스(class)가 지정된 경우에는 다음과 같이 응용할 수 있을 것입니다.var content = docum.. 2019. 7. 11.
CSS/Javascript/jQuery 팝업 플러그인 홈페이지에 팝업을 표시하려는 경우 CSS나 자바스크립트/jQuery를 이용한 다양한 팝업 플러그인을 구글에서 검색할 수 있습니다. 간단한 모달 팝업의 경우 다음 W3Schoools 문서에서 제시하는 방법을 이용할 수 있습니다. How To Create a Modal Box (모달 박스 만드는 방법) 제시된 코드를 사용하면 다음과 같은 모달 팝업을 띄울 수 있습니다. CSS로만 팝업을 띄우고 싶다면 다음 글을 참고해보시기 바랍니다. [CSS] 텍스트를 클릭하면 div가 팝업으로 표시되도록 하는 방법 이외에 구글을 검색해보면 다양한 무료 팝업 플러그인을 찾을 수 있습니다. 무료 팝업으로 디자인적인 측면이나 기능적인 측면의 완성도를 높이는 데 어려움을 겪는 경우 Codecanyon에서 판매하는 플러그인을 활용.. 2019. 6. 28.
자바스크립트/jQuery를 사용하여 div 콘텐츠 인쇄하기 웹페이지 내의 특정 div 내의 콘텐츠만을 인쇄하고 싶은 경우가 있습니다. 그런 경우 stackoverflow에 나와 있는 코드를 참고할 수 있습니다. 예시) HTML This is a sample text for printing purpose. Do not print. JavaScriptfunction printDiv() { var divToPrint=document.getElementById('DivIdToPrint'); var newWin=window.open('','Print-Window'); newWin.document.open(); newWin.document.write(''+divToPrint.innerHTML+''); newWin.document.close(); setTimeout(func.. 2019. 6. 25.
메가 메뉴 내비게이션 플러그인(CSS/HTML/jQuery) 인터넷을 돌아다니다 보면 위의 그림과 같이 메뉴를 클릭했을 때 특수한 형식으로 표시되는 메뉴를 만나곤 합니다. 이런 형식의 메뉴를 메가 메뉴(Mega Menu)라고 합니다. 워드프레스의 경우 아바다, 뉴스페이퍼 같은 일부 테마에서 메가 메뉴 기능을 제공하고 있습니다. 워드프레스 아바다 테마에서 메가 메뉴 사용하기 Elegant Themes의 Divi에서 메가 메뉴 만들기 HTML에서 메가 메뉴를 구현하고 싶은 경우 다음 W3Schools 자료를 참고할 수 있습니다. How TO - Mega Menu (메가 메뉴를 만드는 방법) 반응형까지 고려하여 제대로 만들려면 제법 시간이 걸릴 것 같습니다. 직접 만들기에는 시간이 너무 소요되고 결과물도 시원찮은 경우 코드캐년 마켓에서 판매하는 스크립트를 활용해볼 수 .. 2019. 6. 12.
페이지 로드 시 마우스 커서를 텍스트 입력란(input box)에 위치시키는 방법 (자바스크립트) 페이지가 로드될 때 텍스트 입력란에 마우스 커서가 위치시키고 싶을 때가 있습니다. 예를 들어, 페이지 로드 시 마우스 커서가 검색 필드에 위치하게 되면 사용자들이 곧바로 텍스트를 입력하여 검색할 수 있어 사용자 경험(UX)를 향상시킬 수 있을 것입니다. 이 경우 여러 가지 방법을 이용할 수 있습니다. 먼저 input 필드에 autofocus를 추가하면 간편합니다. 하지만 일부 브라우저에서는 이 기능을 지원하지 않을 수 있습니다. 다음과 같은 자바스크립트(Javascript)를 사용할 수 있습니다.window.onload = function() { var input = document.getElementById("myinputbox").focus(); } 바람직하지 않을 수 있지만 jQuery를 원하는 경.. 2019. 5. 4.
인사이드 자바스크립트 - 기본적인 원리 설명에 중점 언젠가 자바스크립트(Javascript)를 제대로 배워보겠다는 생각을 가지고 있지만 실천을 하지 못하고 있습니다. 필요한 내용만 그때그때 검색으로 해결하다 보니 기본적인 원리를 제대로 이해하지 못하고 있습니다. 오래 전에 구입한 책이 책장에 그대로 있네요. (동영상 강의도 하나 구입했는데... 언제 볼 수 있을지 모르겠습니다.) 하코사 카페를 보니 많은 분들이 '인사이드 자바스크립트'라는 책을 추천하고 보고 있네요. 2019년 새해를 맞이하여 자바스크립트를 제대로 시작해보자라는 생각을 가지고 이 책을 쿠팡에서 주문하여 어제 받았습니다. 인사이드 자바스크립트 Inside JavaScript : 핵심 개념과 원리를 정확하게. jQuery Node.js 클로저의 개념까지 (쿠팡) 별로 두껍지 않은 책이지만 '.. 2019. 1. 4.
자바스크립트를 사용하여 Canonical URL을 설정하는 방법 Javascript를 사용하여 Canonical URL을 설정하려는 경우 다음가 같은 스크립트를 사용해볼 수 있습니다. // 출처: Set Canonical URL via Javascript 다른 방법으로 HtmlGenericControl 클래스를 사용할 수 있습니다.HtmlGenericControl linkFile = new HtmlGenericControl("link"); linkFile.Attributes.Add("rel", "canonical"); linkFile.Attributes.Add("href", "testPath"); Page.Header.Controls.Add(linkFile); // 출처: add a 2018. 11. 10.
자바스크립트와 제이쿼리 (Javascript vs. jQuery) 가끔 방문하는 네이버 카페에서 어떤 분이 올린 댓글인데요. 자바스크립트와 제이쿼리를 비유로 비교적 잘 설명한 것 같아서 갈무리해보았습니다. 책 제목에 '제이쿼리'가 들어간 책은 '자바스크립트'를 공부하는데 별 도움이 되지 않습니다. 책 제목에 '여행 회화' 같은게 붙은 책으로 '영어'를 공부 하려고 하는거랑 비슷한거라고 생각하시면 됩니다. [출처] 자바스크립트 다들 어떻게 공부하셨나요? //책 추천 해주시면 감사하겠습니다 (하드코딩하는사람들) |작성자 박긍정11 jQuery는 사이트 속도에도 부정적인 영향을 미치기 때문에 가급적 javascript를 배워서 사용해보려고 3개월 전에 유데미(Udemy)에서 자바스크립트 강의를 하나 구입했지만 아직 제대로 시작도 못하고 있습니다. 급한 일이 끝나면 하루에 3.. 2018. 10. 2.
자바스크립트를 사용하여 새 창에서 열도록 target 속성에 _blank 추가하기 [자체 정리용] jQuery를 사용하면 target="_blank"를 추가하는 것이 매우 간단하다. 가령 다음 스크립트를 사용하면 내부 링크(내 사이트 링크)를 제외한 외부 링크에 target="_blank"를 추가할 수 있다.$('a[href^="http://"]').not('a[href*=gusdecool]').attr('target','_blank'); 또는$('a[href^=http]:not([href^=http://www.gusdecool.com],[href^=http://gusdecool.com])') .add('a[href^=www]:not([href^=www.gusdecool.com])') .attr('target','_blank'); // 출처: https://stackoverflow.com/questi.. 2018. 9. 19.
유데미(Udemy)에서 자바스크립트 강의 수강 온라인 강의를 제공하는 유데미(Udemy)에서 자바스크립트 강좌(The Complete JavaScript Course 2018)를 하나 등록했습니다. 비용은 22000원이네요. 페이팔로 20불 결제했습니다. 며칠 전에 워드프레스 강좌 하나를 11000원에 등록했지만, 오늘 살펴보니 거의 대부분 강좌의 비용이 22000원으로 표시되어 있네요. 아마 할인을 하는 기간이 있는가 봅니다. 자바스크립트는 코드를 조합하여 이용하는 수준이라서 시간이 될 때 체계적으로 살펴보고 싶어서 관련 강좌를 구입했습니다. 얼마 전에 구입한 워드프레스 강의의 경우 영어 자막이 자동 생성되어서 틀린 부분이 많이 발견되었지만 이번에 구입한 자스 강의는 영어 자막을 직접 입힌 것 같습니다. (미리보기 영상에서만 그럴 수도 있고요.) .. 2018. 5. 29.
워드프레스 레볼루션 슬라이더 오류: 'Revolution Slider Error: You have some jquery.js library...' 어제 워드프레스 인기 플러그인 중 하나인 레볼루션 슬라이더(Revolution Slider)가 업데이트되었습니다. 이번 업데이트에는 다음 문제가 해결되었다고 하네요. 크롬 브라우저에서 비디오 재생 문제 수정 새로운 인스타그램(Instagram) 요구 사항에 맞게 수정 저는 보통 보안을 위해 새 업데이트가 나오면 곧바로 업데이트를 실행합니다. 하지만 레볼루션 슬라이더를 업데이트하니 다음과 같은 오류가 발생하네요. 오류 메시지를 살펴보면: Revolution Slider Error: You have some jquery.js library include that comes after the revolution files js include. This includes make eliminates the rev.. 2018. 4. 27.