내마음대로만들어보자326 헤더 아이콘 SNS공유하기 1. FaceBook , Twitter 공유하기 미리 공유했을때 어떻게 공유가 되고 누락된 정보는 없는지 확인해볼 수 있다. https://developers.facebook.com/tools/debug 공유 디버거 - Facebook for Developers 공유 디버거를 사용하면 Facebook에 공유될 때 콘텐츠가 표시되는 모습을 미리 보거나 오픈 그래프 태그를 사용하여 문제를 디버깅할 수 있습니다. 이 도구를 사용하려면 Facebook에 로그인하세요. developers.facebook.com https://cards-dev.twitter.com/validator 트위터에 로그인 닫기 이전 다음 twitter.com 아이콘 공유를 사용하기 위한 메타태그를 사전에 적용 해주자. SNS공유하기 동작.. 2022. 4. 10. transform 1. transform 속성 컨텐츠 요소를 이동(translate), 회전(rotate), 확대(scale), 기울기(skew) 등의 효과를 줄 수 있다. 애니메이션 작업 시 가장 많이 쓰는 오쇼이며, 요소를 이동시키거나 회전 시킬 수 있고 원근점(perspective)를 사용하여 3D까지 구현 할 수 있다. 즉, 요소의 움직임을 표현한다. 2. 기본문법 transform : none | matrix() | translate() | translateX() | translateY() | scale() | scaleX() | scaleY() | rotate() | skew() | skewX() | skewY() | matrix3d() | translate3d() | translateZ() | scale3d(.. 2022. 4. 10. fontawesome - icon FontAwesome을 통해 이미지 파일을 대신하여 아이콘을 넣는 방법에 대해 정리해두자 https://fontawesome.com/ Font Awesome The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options. fontawesome.com 우선은 동작하는 원리를 익히기 위해 하위 버전으로 해보자. 1. Font Awesome 4 (Latest Version: 4.7.0) FontAwsesome 사용을 위한 CSS,Font 파일은 미리 다운로드를 받아두자. 이제 FontAwesome을 통해 icon을 사용할 준비를 해보자. 1. CSS 연동을 통한 사전 준비 .. 2022. 4. 10. box-shadow 1. 예제 코드 .header .header_tit h1 { font-size: 30px;color: #fff;background: #51b0dc;display: inline-block;padding: 5px 30px 5px 30px; font-weight: 900;transition: box-shadow 0.25s ease-in-out;} .header .header_tit h1:hover { box-shadow: inset -9em 0 0 0 #257fac, inset 9em 0 0 0 #257fac;} .header .header_tit a { font-size: 16px;color: #fff;background: #4a9abf; display: inline-block;padding: 10px 20.. 2022. 4. 9. 이전 1 2 3 4 5 6 ··· 82 다음
