19.12.04 개발기록 - Jquery를 이용한 선택자 및 CSS 추가 방법

JavaScript로 홈페이지 제작 중 페이지 슬라이드 기능을 넣어야 하는 경우가 있다.

슬라이드 기능을 넣기를 구글링 하던 도중 transition 이라는 CSS 옵션(?)을 발견 했다 !

하여 Jquery로 해당 background 사진을 변경하며, transition 기능을 이용하여 자연스럽게 페이지가 넘어가도록 만들어 봤다 !

(슬라이드 기능은 다음에 꼭 해보도록 한다!)

 $("#one").css({
            "background": "url(\"/subhtml/main/images/Rectangle.jpg\")",
            "background-size": "cover",
            "background-attachment": "fixed",
            "background-position": "bottom center",
            "background-repeat": "no-repeat",
            "-moz-transition": "all 1.75s ease",
            "-o-transition": "all 1.75s ease",
            "-webkit-transition": "all 1.75s ease",
            "-ms-transition": "all 1.75s ease",
            "transition": "all 1.75s ease",
            "transform": "rotate(0deg)"
        });

위와 같이 Jquery를 이용하여 해당 CSS를 변경해줄 수 있다.

 

아래는 iframe 안에 있는 부모를 _parent 로 정의 해주고, 그안의 아이디와 태그를 이용하여

내가 바꾸고 싶은 녀석들을 선택해주는 Jquery Syntax 이다 !

  var _parent = window.frameElement.parentNode;
        $(_parent).find('#nav').find('li > a').each(function () {
 
            $(this).css({
                "-moz-transition": "background-color .075s ease-in-out, color .075s ease-in-out",
                "-webkit-transition": "background-color .075s ease-in-out, color .075s ease-in-out",
                "-ms-transition": "background-color .075s ease-in-out, color .075s ease-in-out",
                "transition": "background-color .075s ease-in-out, color .075s ease-in-out",
                "position": "relative",
                "display": "block",
                "text-decoration": "none",
                "color": "rgba(249, 249, 249, 1.0)",
                "top": "-6px",
                "padding": "6px 0.8em 1.25em 0.8em",
                "border-bottom-left-radius": "6px",
                "border-bottom-right-radius": "6px",
                "outline": "0",
                "text-shadow": "1px 1px 3px black"
            });
        });

$(부모).find('#id').find('tag > tag')  -----> 부모 안의 '요 아이디'를 가진 녀석 안의 '태그' 안의 '태그'를 선택해준다.

$ .each -----> 선택해준 녀석들의 숫자만큼 function 을 반복해준다.

 

하나의 문제에 도달할 때마다 하나씩 배우게 되는 게 프로그래밍의 가장 재미있는 부분이다.

내일은 CSS transition에 대하여 포스팅하도록 하겠다 !

 

이 포스팅을 보시는 분 중 제가 틀린 부분, 잘못 이해한 부분이 있어 알려주실만한 내용이 있다면 언제든 편하게 댓글 남겨주세요 :) 감사합니다 !