퍼블리싱/HTML&CSS
-
[CSS3] Animate.css css로 애니메이션 효과를 매우 간편하게 사용하기퍼블리싱/HTML&CSS 2025. 1. 6. 15:14
웹 제작에 바로 사용가능한 크로스브라우징 라이브러리Animate.css 를 이용하여 css 클래스로만 간단하게 효과를 줄 수 있다. https://animate.style/ Animate.css | A cross-browser library of CSS animations.Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-guiding hints.animate.style 1. Animate.css 불러오기 2. 원하는 요소에 클래스 명으로 효과주기 2-2. 딜레이 클래스 추가하..
-
CSS 단위 em과 rem퍼블리싱/HTML&CSS 2018. 6. 11. 09:50
px값은 브라우저에서 절대값으로 인식해 1px은 항상 정확히 1px로 표시되는 반면 em과 rem은 가변 단위로서, 디자인에 설정된 폰트 크기에 따라 브라우저에 의해 픽셀값으로 변환된다. ex) .emClass{font-size: 16px; padding-top: 1em;} -> .emClass{font-size: 16px; padding-top: 16px} 1. rem페이지 최상위(root)요소, 즉 html 요소의 폰트 크기가 기준이 되어, 최상위 요소의 폰트 크기에다 rem 단위로 지정한 숫자를 곱한 값이 px로 변환된 값이다. 변환된 픽셀 크기는 페이지 최상위(root)요소, html 요소이 폰트 크기가 기준이 된다. 최상위 요소의 폰트 크기에다 rem 단위로 지정한 숫자를 곱한 값이 변환된 값이..
-
페이스북 공유하기퍼블리싱/HTML&CSS 2018. 5. 24. 13:57
*페이스북 공유하기 a링크에 ( http://www.facebook.com/sharer/sharer.php?u=공유할링크 ) 넣어주면 됨. 공유시 들어갈 요약정보는 메타 태그에서 설정할수 있음. ex)-html facebook -scriptfunction shareFB(){ window.open('http://www.facebook.com/sharer/sharer.php?u=사이트 url');} *** 메타태그에 설정한 내용이 잘못되어 수정하여도 수정된 내용이 페이스북 공유 기능에서 바로 적용되지 않을 수 있다.이때 공유 디버거 (https://developers.facebook.com/tools/debug/) 에 접속하여 해당 페이지를 다시 디버깅하면 바로 적용이 된다.