프론트엔드 웹개발에서는 CSS의 이용은 필수이죠. 하지만 무궁무진하게 창의력을 발휘하도록 도와주는 이 CSS는 한가지의 디자인을 여러가지 방법으로 구사 할 수 있어 시간이 아주 많이 소비될 수 있습니다. 깊이 파고 들어가면 자바 스크립트 대신에 CSS로 구현하는 방법도 가능한 부분이 많이 있죠.
이 포스팅에서는 프론트엔드 개발 시간의 절약을 도와주는 15개의 CSS 웹사이트를 알아보겠습니다.
모두 영문 사이트이지만 이 정도가 어렵다고 생각되시면 다른 직군 알아보시는 것을 적극 추천합니다. 영어로 코드 쓰는데 한글만 안다고 하면 개발자가 직업이라고 말하면 안되죠. 한글로 코드 작성하는 날까지는 영어는 필수입니다. 개발직군에서는 나보다 영어 잘하는 사람이 있으면 언젠가는 반드시 뒤쳐집니다.
Neumorphism.io
뉴모피즘 (Neumorphism)은 요즘 유행하는 디자인 입니다. 이 디자인은 소프트한 플라스틱 소재같은 UI를 구현하죠. 바탕 색과 UI의 색을 동일화 하고 명암을 기존과 다르게 주면서 떠 있는 효과보다 위로 사출 되어있는 느낌을 줍니다.
Glassmorphism
서리낀 유리 (frosted glass)같은 효과를 내어주는 요즘에 유행하는 디자인 방식의 하나입니다. 글래스모피즘 (Glassmorphism)은 이 효과를 쉽게 만들어주는 사이트입니다.
Google Fonts
구글 폰트는 무료나 오픈 소스 폰트들이 다양하게 존재하는 사이트입니다. 게다가 수많은 매터리얼 디자인 (Material Design)의 아이콘들도 무료로 사용할 수 있습니다.
Can I Use
브라우저마다 호환되는 CSS 코드가 다를 수 있습니다. 이 사이트는 사용하고자 하는 CSS 코드의 브라우저 호환성을 알아볼 수 있는 유용한 사이트 입니다.
CSS Validator
CSS Validator는 현재 사용하는 CSS 코드가 웹 표준을 따르고 있는지 확인 할 수 있는 사이트입니다.
CSS Buttons
수많은 커스텀 버튼 디자인과 CSS 코드를 제공하는 사이트입니다.
CSS Grid Generator
CSS Grid Generator는 복잡한 grid 레이아웃을 쉽게 디자인하고 그 코드를 생성하게 도와 주는 사이트입니다.
ColorSpace
컬러 팔레트는 프론트엔드 디자인에 아주 중요하죠. 시각디자이너가 아니면 구현하기 힘든 컬러 팔레트를 하나의 메인 컬러만으로 쉽게 만들어주는 사이트입니다.
Get Waves
Get Waves는 구현하기 어려운 SVG 웨이브 패턴을 쉽게 만들어주는 사이트입니다.
Blobmaker
Blobmaker는 배경이나 일러스트레이션등에 사용 할 수 있는 SVG blob 엘리먼트를 쉽게 만들어 줍니다.
Clippy — CSS Clip-Path Maker
Clippy — CSS Clip-Path Maker는 clippath를 사용하여 복잡한 모양을 쉽게 만들 수 있는 사이트입니다.
CSS Strips Generator
CSS Strips Generator는 스트라이프 배경을 쉽게 만들 수 있게 도와 줍니다.
BEM Cheat Sheet
BEM (Block Element Modifier) 컨벤션을 따르는 네이밍을 쉽게 도와주는 사이트입니다. 참고로 BEM의 CSS 이름 형식은 Block__Element--Modifier--Name 형식입니다. 간단히 말하자면 BEM은 이런 모듈화 된 이름 형식으로 다른 사이트나 프로젝트에도 표준화된 코딩을 성취한다는 취지입니다. 표준화 모듈화 블록화가되면 코드 관리가 아주 쉬워지죠.
Animate.css
Animate.css는 다양한 애니메이션 효과의 CSS 코드를 쉽게 제작할 수 있는 사이트 입니다.
CSS Gradient Generator
CSS Gradient Generator는 복잡한 CSS 그라데이션을 쉽게 제작할 수 있는 사이트입니다.
참고:
