제인초의 개발 일기 제인초의 개발 일기

CSS

• 아이콘(Icon) 추천 사이트

  CSS 2023. 1. 6. 16:18

  1. https://heroicons.com/ Heroicons Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS. heroicons.com 2. https://fontawesome.com/start Font Awesome The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome. fontawesome.com

  Read More
• 애니메이션 사용할 때 유용한 사이트 @keyframes, animation

  CSS 2023. 1. 5. 17:24

  https://animista.net/ Animista - On-Demand CSS Animations Library Animista is a CSS animation library and a place where you can play with a collection of ready-made CSS animations and download only those you will use. animista.net

  Read More
• 휴대폰이 가로 화면인 경우에만 활성화를 하고 싶을 때 @media

  CSS 2023. 1. 5. 17:15

  @media screen and (orientation: landscape){ // 휴대폰이 가로 화면일 때 넣고싶은 기능 또는 빼고 싶은 기능 적용이 가능하다. }

  Read More
• sub.scss 에는 이렇게 @import가 되어야 합니다.

  CSS 2022. 12. 1. 17:35

  html 파일에는 이런 식으로 링크 걸기 / common과 sub 따로

  Read More
• scss 자동 컴파일러 사이트(테스트 가능)

  CSS 2022. 11. 29. 16:32

  https://www.sassmeister.com/

  Read More
• 배경 그라데이션(background gradient)

  CSS 2022. 11. 29. 16:25

  .main .contents{ background: -moz-linear-gradient(194deg, #308995 0%, #00B2AB 100%); background: -webkit-linear-gradient(194deg, #308995 0%, #00B2AB 100%); background: linear-gradient(194deg, #308995 0%, #00B2AB 100%); }

  Read More
• 텍스트(text) 중앙 정렬하기

  CSS 2022. 11. 29. 13:57

  Display: flex; Flex-direction: column; Justify-content: center;

  Read More
• active 했을 때 아이콘 or 이미지 교체하는법

  CSS 2022. 11. 29. 10:25

  리스트 앞에 아이콘 들어가는 경우 a 에 패딩, :after 써서 after 안에 백그라운드로 이미지 넣기 li에는 active 되서 아이콘이 달라지는 경우에 사용하기 예를들어 .active-grey { a { &:after { display: inline-block; clear: both; content: ''; width: 24px; height: 24px; position: absolute; top: 50%; left: 20px; transform: translateY(-50%); background: url(../../dist/images/classhome.png) no-repeat; ———> active 했을 때 얘 이미지만 다르게끔 } } } ============================..

  Read More