css 꿀팁 웹서비스 5가지

👏 css 꿀팁 웹서비스 5가지

안녕하세요 TriplexLab 입니다.
오늘은 css 작업할때 유용하게 사용되는 꿀팁 3가지를 정리해보겠습니다.

프로젝트 할 때는 이런 도구를 잘 활용하는 면 이득을 보는 것 같네요ㅎㅎ
하지만 개인 공부를 하는 차원에서는 이런 도구를 활용하면 오히려 독이 될 수 있습니다.
(개인 공부할 때는 바닥부터 만들어 보는 것이 기억에 오래 남습니다 👍👍)

📌  CSS Grid Generator

CSS 그리드를 간편하게 만들 수 있도록 도와주는 온라인 서비스입니다. 
그리드 행과 열, 사이 여백 등을 설정하면 HTML 코드와 CSS 코드를 생성해줍니다.

CSS Grid Generator

 

행과 열 개수가 많은 그리드를 만들 때 깔끔한 그리드 코드를 얻을 수 있습니다.

Grid Generator

---

📌 animista

다양한 CSS 애니메이션을 테스트해볼수 있는 사이트입니다.
특히 CSS코드로 바로 지원을 해주기 때문에 난이도 높은 애니메이션을 실행시키기 너무 좋은 사이트죠. 
그리고 animation속성 중 이해가 어려운 animation-timing-function까지도 잘 표현해주기 때문에 너무 활용하기 좋은 사이트입니다.

Animista - CSS Animations on Demand

기능도 뛰어나지만, 무료이고, 웹 브라우저 호환성을 갖춘 코드를 생성할 수 있는 옵션까지 제공합니다.

animista

---

📌 Smooth Shadows

그림자 효과를 만들어주는 서비스입니다. 

Smooth Shadow

화면에 표시되는 그림자 효과 미리보기를 실시간으로 확인해가면서 고급스러운 그림자 효과를 만들 수 있습니다. 

Smooth Shadows

---

📌 CSS clip-path maker

요소의 다양한  클리핑 범위를 지정할수 있는 사이트 입니다.
이것을 이용해서 특정 이미지를 원하는 모양대로 노출시킬수도 있습니다.

Clippy — CSS clip-path maker

CSS clip-path maker

---

📌 css gradient

그라데이션을 쉽게 만들고, css 코드를 자동으로 만들어 줍니다.

CSS Gradient — Generator, Maker, and Background

css gradient