728x90 반응형 분류 전체보기298 [CSS3]로딩 애니메이션 구현하기 css 애니메이션을 다양하게 이용한 로딩 애니메이션 효과입니다. 디자인을 적용한다면 유용하게 쓸수 있을거같습니다. See the Pen clock, loading animation css-로딩관련 css by gahyun (@gahyun) on CodePen. 2019. 4. 12. [JAVASCRIPT/JQUERY]스크롤 이벤트를 이용한 header 만들기 스크롤을 감지해서 스크롤을 내리면 header가 상단으로 고정되고 형식이 바뀝니다. 다시 스크롤을 올리면 원래되로 되돌아옵니다. mousewheel 이벤트를 이용해서 스크롤을 감지합니다. e.originalEvent.wheelDelta; 값을 이용해 스크롤을 올리고있는지 내리고 있는지 감지합니다. $(window).scrollTop(); 현재 스크롤의 위치를 가져옵니다. addClass와 removeClass를 이용해 다른 css를 적용해줍니다. See the Pen main > nav by gahyun (@gahyun) on CodePen. 2019. 4. 11. [CSS3]input radio 토글버튼 만들기 input radio의 label을 이용해 토글버튼을 만들어줍니다. input radio는 같은 name을 갖는것끼리 묶음이 됩니다. (같은 묶음 중 1개만 선택 가능합니다.) input과 label은 id와 for의 값으로 묶입니다. (이렇게 묶이면 label 을 클릭해도 input radio가 선택됩니다.) See the Pen input radio css by gahyun (@gahyun) on CodePen. 스크립트를 쓰지 않는 더 쉬운방법! [CSS/CSS 응용] - input[type='checkbox'] 로 toggle 버튼 switch 버튼 만들기 2019. 4. 11. [JAVASCRIPT/JQUERY]플러그인 쓰지않고 이미지 슬라이드 만들기 ul li를 이용해 이미지 리스트를 만들고, g_item으로 이미지 슬라이드의 이미지의 현재위치를 알려주고 이미지간의 이동이 가능한 컨트롤러를 만듭니다. float : left 를 써서 리스트를 가로로 정렬합니다. .gallery ul li {float: left; width: 300px;} ul는 li의 갯수만큼 width값이 커지지만 , .gallery ul{width: 300%;} ul을 감싸고 있는 .gallery는 이미지를 3개만 보여줄 크기로 제한합니다. .gallery{width: 900px} 이미지의 흐름이 자연스러워 보이기 위해서는 양쪽 끝에 처음시작에는 마지막 이미지를 추가하고, 맨 마지막에는 첫번째 이미지를 추가해야합니다. 양쪽에 이미지가 없을경우 현재 다음이미지가 왼쪽에서 오른쪽으로.. 2019. 4. 11. 이전 1 ··· 66 67 68 69 70 71 72 ··· 75 다음 728x90 반응형
