본문 바로가기

프론트엔드 공부

 (134)
css vertical flip animation css vertical flip animation 참고 소스입니다. codepen.io/fangmin/pen/OJpyxao?editors=1100
7가지 css 단위 em/ rem/ inch/ vw /vmin /vmax /ch **참고 : https://www.codingfactory.net/10748 1.em 상위요소 기준의 font-size 값 ex) dif{font-size:16px;} div{ font-size:1.5em /*24px*/; padding: 2em /*32px*/ } 2.rem(root em) html 기준으로 font-size를 정의 em과 헷갈리지 않도록 주의 rem은 그리드시스템이나 보다 정확한 사이즈나 크기 조정을 위해 사용 html { font-size: 16px; } body { font-size: 2em; } /*32px*/ div.container { font-size: 2em; } /*64px*/ div.content1 { font-size: 2rem; } /*32px*/ div.conte..
css 애니메이션 : 타이핑 텍스트효과(sprite animation,steps) codepen.io/fangmin/pen/gOmaxzw animation 의 steps 를 활용한 타이핑 텍스트 효과입니다. 하단 mozilla site 참고하였습니다. CSS TYPING ANIMATION ... codepen.io developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function animation-timing-function - CSS: Cascading Style Sheets | MDN The animation-timing-function CSS property sets how an animation progresses through the duration of each cycle. developer.mozilla.org
awsome screen shot 웹디자인 chrome.google.com/webstore/detail/awesome-screenshot-screen/nlipoenfbbikpbjkfpfillcgkoblgpmj?hl=ko Awesome Screenshot & Screen Recorder Full page screen capture and screen recorder 2 in 1. Share screencast video instantly. chrome.google.com 웹사이트 디자인시 레퍼런스를 캡처하기 좋은 어플입니다. 스크롤 캡처도 가능합니다 :)
제이쿼리 backtotop 버튼 만들기 클릭시 위로 이동하는 제이쿼리 구문입니다 ! 제이쿼리 animate 메서드 사용하여 간단하게 구현할수 있습니다. $('span').click(function(){ $('html,body').stop().animate({scrollTop:0},500); }) codepen.io/fangmin/pen/qBrdRJL
css animation fill-mode(애니메이션상태조정) none: 애니메이션이 끝난 후 상태를 설정하지x forwards: 애니메이션이 끝난 후 그 지점 그대로 backwards: 애니메이션 끝난 후 시작점으로 돌아옴. both: 애니메이션의 앞 뒤 결과를 조합 inherit: 애니메이션 상태를 상위 요소에서 상속
객체불러오기(펼침연산자사용>복사,추가,결합) { //객체불러오기(펼침연산자,복사) const ob18 = { a: 100, b: 200, c: "javascript" } const spread = { ...ob18 }; document.write(spread.a, " "); document.write(spread.b, " "); document.write(spread.c, " "); document.write( " "); } { //객체불러오기(펼침연산자,추가) const ob19 = { a: 100, b: 200, c: "javascript" }; const spread = { ...ob19, d: "react" }; document.write(spread.a, " "); document.write(spread.b, " "); document.w..
객체불러오기(변수,forin,map) //객체불러오기(변수로 불러오기) //이렇게 쓰는 경우가 많다 { const ob15 = { a: 100, b: 200, c: "javascript" } const name1 = ob15.a; const name2 = ob15.b; const name3 = ob15.c; document.write("*** 50. 객체 불러오기*** "); document.write(name1, " "); document.write(name2, " "); document.write(name3, " "); } //객체 불러오기(for in) //view에서는 이걸 많이쓰고react에서는 map 많이씀 { const ob16 = { a: 100, b: 200, c: "javascript" } document.write("**..

티스토리툴바