내마음대로만들어보자/CSS25 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. CSS Animation - hover Effect4 Mouse Hover Effect05 마우스 오버 효과입니다. Mouse Hover Effect05 마우스 오버 효과입니다. Mouse Hover Effect06 마우스 오버 효과입니다. Mouse Hover Effect06 마우스 오버 효과입니다. body { font-family: 'BMJUA'; height: 100vh; background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } .hover_wrap { display: flex; align-items: center; justify-content: center; height: 100vh; perspective: 1000px; } .hover_wrap .effect { position.. 2021. 12. 18. CSS Animation - hoverEffect2 @font-face { font-family: 'BMJUA'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/BMJUA.woff') format('woff'); font-weight: normal; font-style: normal; } body { font-family: 'BMJUA'; height: 100vh; background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } .hover_wrap { display: flex; align-items: center; justify-content: center; height: 100vh; } .hover_wrap > .. 2021. 12. 18. 이전 1 2 3 4 5 6 7 다음
