김코드의 웹디자인 세상

안녕하세요! 오늘은 페이지 구현 시 제이쿼리를 사용하여, 페이지를 스크롤할 때마다 숨겨진 요소가 나타나게 하는 효과에 대해서 알아보겠습니다! 먼저 html로 간단한 구조를 만듭니다. ✎html 1 2 3 4 5 ✎css section div{ width: 100%; height: 100vh; } section #container1{ background: orange; } section #container2{ background: green; } section #container3{ background: salmon; } section #container4{ background: black; } section #container5{ background: greenyellow; } 하나의 섹션 안에 cont..

안녕하세요! 오늘은 제이쿼리 효과메서드 중 fadeIn()과 fadeOut()으로 이미지 슬라이드를 만들어 보겠습니다~ 먼저 효과메서드는 선택한 요소를 역동적으로 숨겼다가 보이게 만드는 기능을 가진 메서드입니다! 여러 종류가 있지만 오늘 포스팅에서는 fadeIn()과 fadeOut()를 알아보겠습니다. ✎ fadeIn()과 fadeOut() fadeIn()은 노출처리를 하는 효과메서드로 숨겨진 요소가 점점 선명해지는 효과를 가지고 있습니다. fadeOut()은 숨김처리를 하는 효과메서드로 요소가 점점 투명해지며 사라지는 효과를 가지고 있습니다. ✎ 효과메서드의 기본형 효과메서드는 효과 소요시간, 가속도, 콜백 함수를 인지값으로 전달받을 수 있습니다. $("요소선택").효과메서드(효과소요시간,가속도,콜백함..

안녕하세요! 오늘은 제이쿼리의 이벤트 등록 메서드에 대해서 알아보겠습니다. 이벤트 등록 메서드란? 사용자가 사이트에서 지정된 요소에서 어떠한 특정 동작이 일어났을때 저장된 코드를 실행시키는 것을 말합니다. ✎ 기본구조 버튼 $('.btn').click(function(){ //자바스크립트 코드; }); 이런 기본 구조에서 구조를 나누어본다면 아래와 같습니다. ➊ 이벤트 대상 : $('.btn') ➋ 이벤트 등록 메서드 : click() ➌ 이벤드 핸들러: function(){...} ✎ 이벤트 등록 메서드의 종류 이벤트 등록 메서드는 5가지의 종류로 나눌 수 있으며 자세한 설명은 아래의 표를 확인해보세요! ✎ 이벤트 등록 방식 알아보기 지정한 요소에 시벤트를 등록하는 방법에는 단독 이벤트 등록 방식과 그..

안녕하세요! 벌써 올해 22년도 내일이면 마지막이네요! 다들 행복한 연말을 보내시고 계신지요? 저는 포트폴리오를 만들면서 22년도의 마지막 분기를 보냈습니다, 포트폴리오에 사용했던 스크롤 업 버튼을 한번 가지고 왔는데요. 제이쿼리로 작성이 된 코드이니 쉽게 사용하실 수 있으실 겁니다! 오늘 만들어 볼 친구는 이 친구입니다! 여하튼 바로 만나보러 가시죠! ✎ html html은 크게 작성할 것이 없습니다! 원하시면 이미지 파일로 아예 넣으셔도 되시고 아니면 저처럼 아이콘을 넣으셔도 됩니다. UP 저는 이렇게 작성한 코드를 footer가 시작되는 부분에 넣어주었습니다. 보통 스크롤 버튼이 footer밑에 있으면 아닌 것 같아서요! (개인적인 의견입니다.) 여하튼 작성해주시면 됩니다. ✎ css #toTop ..