박지연의 코딩이야기

See the Pen Untitled by allis (@qwer273) on CodePen." data-ke-type="html">HTML 삽입미리보기할 수 없는 소스

https://codepen.io/qwer273/pen/bGNOJBY fixed header on Scroll...codepen.io스크롤시 내릴 때에는 헤더가 사라지고 올릴 때는 생기는 헤더입니다.

https://codepen.io/qwer273/pen/gOxpWaj 로딩페이지...codepen.io로딩이 늦어질 때 미리 뜨는 로딩페이지입니다 :)

홈페이지 HTML a태그로 링크 삽입 시 보통 링크가 없을 때는사이트1 #을 통해서 많이 나타냅니다.이러한 경우 a태그 클릭 시 자동으로 맨위로 이동하게 됩니다. 이것을 방지하기 위해서는 아래 제이쿼리 코드를 넣어주게 되면클릭 시 위로 올라가는 것을 방지할 수 있습니다.  //첫번째방법 // $("a").click(function() { //     if ($(this).attr("href") == "#") { //         return false; //     } // }); //두번째방법 $("a").click(function(e){     e.preventDefault(); }); https://codepen.io/qwer273/pen/GRMrNZj href= # 클릭시 위로 이동 방지...c..

오늘은 팝업창에 대해서 배워보겠습니다. 팝업창은 광고용으로 많이 쓰이기때문에 알아두면 좋아요 먼저 팝업창을 만들기 위해서 필요한 것은 html , css , js 입니다. 저는 버튼을 누르면 튀어나오는 팝업창을 만들어볼거예요 만드는 순서 1. 먼저 누르는 버튼을 만들어준다.2. 튀어나오는 팝업창과 뒤에 어두운 검정배경을 만들어준다.3. 튀어나와야하는 팝업창과 검정배경을 display: none;하여 안보이도록 한다.4. js를 활용하여 버튼을 누르면 팝업창이 뜨도록 설정한다.  ** 자바스크립트 코드(괄호안에 요소만 바꾸어서 사용하시면 됩니다.) //버튼을 클릭하면 팝업창과 검정배경이 dispaly:block이 되어나타난다.$('button').click(function(){     $('.popup-1..

안녕하세요 오늘은 애니메이션에 대해서 배워보겠습니다. 오늘은 오른쪽에서 갑자기 글자가 밀고들어오는 움직이는 애니메이션을 만들어볼게요 먼저 animation 속성에 대해서 알아보겠습니다. 애니메이션을 적용하는 방법은 먼저[ @keyframes: 지정한 이름] 를 활용해서 효과를 먼저 만들어주면 됩니다.저는 옆에서 밀고 들어오는 애니메이션을 적용하기 위해서  animation을 이름으로 해서 magin-left 와 width로 설정해보겠습니다. @keyframes animation{     0%{         margin-left:100%;         width:300%;     }     100%{         font-size: 300%;         margin-left:0;         w..