eunyo의 it이야기

안녕하세요 오늘은 스크롤내리면 나타나는 애니메이션 라이브러리인 wow.js의 사용법에 대해 알아보려고 합니다. 간단한 사용법과 다양한 애니메이션효과를 제공합니다. 공식사이트 https://wowjs.uk/ wow.js — Reveal Animations When Scrolling wowjs.uk 설치방법 https://github.com/graingert/wow GitHub - graingert/WOW: Reveal CSS animation as you scroll down a page Reveal CSS animation as you scroll down a page. Contribute to graingert/WOW development by creating an account on GitHub. g..

안녕하세요 오늘은 스크롤내리면 상단(fixed)고정, 스타일 변경되는 메뉴 예제입니다. HTML LOGO 메뉴1 메뉴2 메뉴3 메뉴4 visual CSS /* reset */ *{margin: 0;padding: 0;} ul li{list-style: none;} a {text-decoration: none;color: inherit;} #header{display: flex;justify-content: space-between;align-items: center;padding: 10px 0;transition: all 0.5s} #header .gnb ul{display: flex;} #header .gnb ul li{margin-right: 20px} #header .gnb ul li:last-ch..

[jquery] 레이어 팝업 스크롤 막기 & 배경 어둡게 처리하기 안녕하세요. 사용성을 위해서 팝업 뒤에 쉐도우효과랑, 팝업 스크롤을 막아주는 것을 원하는 경우가 더러 있습니다. 그래서 오늘은 레이어 팝업 스크롤막기, 배경 어둡게 처리하는 방법에 대해 알아보겠습니다. 팝업 가운데 정렬 css도 있으니 필요하신 분들은 함께 참고하세요! 본 예제에서는 버튼 클릭시, 레이어팝업이 보여지는 방식입니다~ 예제 화면 미리보기 html 팝업열기 X 팝업입니다. CSS /* 스크롤 효과 확인하기 위한 height 넣을 필요 X*/ body {height: 1500px} /* 팝업 기본디자인 */ .popup{border: 1px solid #dcdcdc;position: fixed;width: 500px;left: 5..

특정 위치에서 시작하는 스크롤 네비게이션 특정위치에서 시작하는 스크롤 네비게이션입니다. a링크로 해당 섹션에 이동가능하고, 스크롤이 위치한 섹션에 맞춰 네비게이션 메뉴도 active 됩니다. 원페이지 홈페이지나, 랜딩페이지 제작할 때 유용하게 사용할 수 있을 것 같습니다. 필요하시다면 아래 코드확인해보시고 수정해서 사용하세요 :) [html] main section1 section2 section3 section4 section01 section02 section03 section04 [CSS] /*퀵메뉴*/ .quick_menu {left:5%;position: absolute;} .quick_menu.fixed {position: fixed;top: 5px; z-index:100} .quick_men..

jQuery 요소의 표시와 숨김 jQuery의 show(), hide(), toggle() 함수를 사용해, 선택한 요소를 숨기고, 보여줍니다. 간단하게 이야기하면 요소의 상태값을 display:block, display:none 처리해주는 효과입니다. .show() 선택한 요소를 보여줍니다. 정의 .show()는 선택한 요소를 보여줍니다. .show("시간")은 선택한 요소를 해당하는 시간동안 보여줍니다. 시간은 초 단위로 설정합니다. (숫자로 표현) 시간은 문자(slow, fast)로도 표현 할 수 있습니다. 문법 $("선택자").show(); $("선택자").show("시간"); $("선택자").show("시간", 함수); 예제 $(".btn1").on("click", function(e){ $("...

display 여부에 따라 show, hide jquery를 통해 display block, none에 따라 보여질지 숨길지 여부를 결정하는 방법입니다. 방법 1 if ($("div").css("display") == "none") { $("div").show(); //display :none 일떄 } else { $("div").hide(); //display :block 일떄 } 방법 2 if ($('div').is(':visible') == false) { alert('안보이는 상태 '); } else { alert('보이는 상태 '); } 방법 3 (자바스크립트) var div = document.getElementById('div'); if (div.style.display === 'none')..

if문을 통한 class 존재 여부 확인 하는법 웹에서 jQuery를 통해 html의 객체를 제어하는 경우가 많습니다. 이때, 특정한 상황에서의 이벤트가 필요한 순간이 있는데요. 그때 바로 if, else 조건문을 통한 방법으로 처리해주어야 합니다. 다음은 class 존재 여부를 확인 하는 3가지 방법에 대해 알려드리겠습니다. 1. is 함수 if($("#div").hasClass("active") === true) { // class가 존재함. } else { // class가 존재하지 않음 } 2. hasClass 함수 if($("#div").hasClass("active") === true) { // class가 존재함 } else { // class가 존재하지않음 } 3 .legnth 속성 체크 ..

iframe 콘텐츠높이에 따라 height 조절하기 웹사이트를 만들다보면 iframe이 필요한 상황있습니다. 하지만 iframe으로 콘텐츠를 불러올 때, height 값을 다 불러오지 못하고 스크롤을 생성합니다. 그때 자바스크립트로 높이조절 스크립트를 적어줘야 올바르게 높이를 불러옵니다. 그럼 콘텐츠 높이에따라 iframe을 불러오는 방법을 알아보겠습니다. 기본 코드 html 결과 화면 일반적으로 아이프레임을 사용하면 위와 같은 화면으로 iframe이 불러와지게 됩니다. 그럼, 자동으로 높이 조절하는 방법과 스크롤제거하는 방법을 알아보겠습니다. 높이 조절, 스크롤 제거 방법 html frameborder="0" scorlling="no"로 아이프레임에 기본적으로 생성되는 스크롤과 border를 처리해줍니..

부트스트랩이란 ? 부트스트랩이란 웹 프론트개발에서의 구조를 미리 만들어준 프레임워크입니다. 부트스트랩이란 각종 버튼, 테이블, 입력창 등 여러가지의 css style과 레이아웃 정렬을 class만으로 제어할 수 있습니다. 보통 여러명의 개발자가 각자 맡은 영역을 개발하기 때문에 완성물이 제각각인 경우가 생겨서 이를 통일시키기 위해서 개발되었습다. 부트스트랩을 개발한 사람은 트위터의 직원이였던 'Mark Otto'와 'Jacob Thornton'가 프로젝트의 일관성을 위해 만들어졌습다. css와 Javascript로 만들어져 있으며 반응형도 지원하기 때문에 휴대폰, 태블릿, PC 모두 사용이 가능합니다. 부트스트랩 시작하기 부트스트랩 설치방법 1. 파일을 다운로드 받은 뒤 프로젝트에 삽입 부트스트랩 다운로..

jQuery ui를 사용하여 tooltip 구현하는 방법을 알아보겠습니다. jQuery ui를 다운로드하여 사용하시려면 아래 링크에서 버전 확인 후 다운로드하여주시면 됩니다. jqueryui.com/download/#! version=1.11.4 Download Builder | jQuery UI Download Builder jqueryui.com [사용 방법] jQuery-ui.css 파일과 jqurey.js, 그리고 jquery-ui.js를 추가해줍니다. 다음은 js영역에 선언해주시면 끝입니다 :) $( function() { $( '대상' ).tooltip(); } ); 그리고 css를 사용해서 커스텀하는 방법입니다. [결과 화면] 코드 Tooltips can be attached to any e..