HTML+SCSS(CSS3) - 2021. 7. 31. css 꿀팁 웹서비스 5가지 - 👏 css 꿀팁 웹서비스 5가지 안녕하세요 TriplexLab 입니다. 오늘은 css 작업할때 유용하게 사용되는 꿀팁 3가지를 정리해보겠습니다. 프로젝트 할 때는 이런 도구를 잘 활용하는 면 이득을 보는 것 같네요ㅎㅎ하지만 개인 공부를 하는 차원에서는 이런 도구를 활용하면 오히려 독이 될 수 있습니다.(개인 공부할 때는 바닥부터 만들어 보는 것이 기억에 오래 남습니다 👍👍) 📌 CSS Grid Generator CSS 그리드를 간편하게 만들 수 있도록 도와주는 온라인 서비스입니다. 그리드 행과 열, 사이 여백 등을 설정하면 HTML 코드와 CSS 코드를 생성해줍니다. CSS Grid Generator cssgrid-generator.netlify.app 행과 열 개수가 많은 그리드를 만들 때 깔끔한 그리드 코드를 얻을 수 있습니다. Grid Generator 📌 animista 다양한 CSS 애니메이션을 테스트해볼수 있는 사이트입니다.특히 CSS코드로 바로 지원을 해주기 때문에 난이도 높은 애니메이션을 실행시키기 너무 좋은 사이트죠. 그리고 animation속성 중 이해가 어려운 animation-timing-function까지도 잘 표현해주기 때문에 너무 활용하기 좋은 사이트입니다. Animista - CSS Animations on Demand 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 기능도 뛰어나지만, 무료이고, 웹 브라우저 호환성을 갖춘 코드를 생성할 수 있는 옵션까지 제공합니다. animista 📌 Smooth Shadows 그림자 효과를 만들어주는 서비스입니다. Smooth Shadow shadows.brumm.af 화면에 표시되는 그림자 효과 미리보기를 실시간으로 확인해가면서 고급스러운 그림자 효과를 만들 수 있습니다. Smooth Shadows 📌 CSS clip-path maker 요소의 다양한 클리핑 범위를 지정할수 있는 사이트 입니다.이것을 이용해서 특정 이미지를 원하는 모양대로 노출시킬수도 있습니다. Clippy — CSS clip-path maker About Clip Paths The clip-path property allows you to make complex shapes in CSS by clipping an element to a basic shape (circle, ellipse, polygon, or inset), or to an SVG source. CSS Animations and transitions are possible with two or more clip-path shape bennettfeely.com CSS clip-path maker 📌 css gradient 그라데이션을 쉽게 만들고, css 코드를 자동으로 만들어 줍니다. CSS Gradient — Generator, Maker, and Background As a free css gradient generator tool, this website lets you create a colorful gradient background for your website, blog, or social media profile. cssgradient.io css gradient 공유하기 게시글 관리 트리플랩 | TriplexLab 저작자표시 Contents 커피 한 잔 선물하기 당신이 좋아할만한 콘텐츠 wave keyframes로 만들기 2021.08.12 데이터 속성 사용하기 2021.08.05 CSS 선택자 :nth-child 2021.07.22 미디어 쿼리 (Media Query) 와 Viewport 2021.05.23 댓글 4 + 이전 댓글 더보기