무료 웹 CSS 코드 제네레이터 모음

*본 포스트는 "Envato'에 게재된 " Jake Rocheleau"가 쓴 "Best Free CSS Code Generator Webapps"이라는 포스트를 국문으로 번역하여 더 많은 사람들에게 정보를 알리고자 하는 목적으로 저작된 포스트임을 밝힙니다.

좀 더 빠른 작업 효율을 위해서 코드 제네레이터를 쓰는 것은 매우 좋은 전략입니다. 특히 좋은 CSS 코드 제네레이터들은 웹에서 쉽게 구할 수 있습니다.

Flexy Boxes

flexbox는 CSS의 미래라고 볼 수 있습니다. GUI를 통해서 쉽게 flexbox 레이아웃이 구성한 웹앱사이트입니다. 이 웹앱을 사용하시기 이전에 flexbox에 대한 이해도를 높이시는 것을 추천합니다. Scoch.io에 게재된 flexbox에 대한 소개 내용을 참고하시기 바랍니다.

- flexbox에 대한 소개 내용 : https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties 

- 웹앱 URL : http://the-echoplex.net/flexyboxes/ 

Grid Generator

그리드 시스템을 쉽게 만들어주는 웹앱입니다. 반응형에 대응하는 그리드 시스템 구축이 가능한 것이 특징입니다.

- 웹앱 URL : http://www.responsivegridsystem.com/calculator/

CSS3 Generator

CSS3에 추가된 코드들에 대해서 코드 제네레이팅을 해주는 웹앱입니다.

• Box shadows
• CSS transforms
• rgba() of color codes
• Flexbox layouts
• CSS3 gradients

와 같은 속성들에 대한 코드 제네레이팅이 가능합니다.

- 웹앱 URL : http://css3generator.com/

CSS Button Generator

다양한 스타일의 버튼을 제작할 수 있게 해주는 Button 제네레이터입니다.

- 웹앱 URL : http://www.bestcssbuttongenerator.com/

Base64 Encode

어떠한 이미지든 간에 base64 code로 인코딩을 해주는 웹앱입니다. base64에 대해서 잘 모른다면, 여기를 클릭해서 내용을 확인하시기 바랍니다. base64는 백그라운드 반복 이미지용이나 작은 아이콘 등등 CSS 스타일링 할 때 응용되는 최적화된 이미지 형태를 제공합니다. 특히 용량 상 최적화된 형태를 지니기 때문에 HTTP 통신 상에 최적화를 이룰 수 있습니다.

- base64에 대해서 알아보기 : http://stackoverflow.com/q/201479/477958

- 웹앱 URL : https://www.base64-image.de/

CSS Animate

CSS 애니메이션을 웹앱 상에서 쉽게 GUI를 통해서 구현할 수 있게 도와줍니다.

- 웹앱 URL : http://cssanimate.com/

Stylie

CSS 애니메이션용 또 다른 웹앱입니다. CSS Animate 보다 심플한 GUI를 제공합니다.

- 웹앱 URL : https://jeremyckahn.github.io/stylie/

CSSmatic

4가지 핵심적인 CSS 코딩 기능만을 제공합니다. rounded box, box shadows, gradient, custom noise 기능을 제공합니다.

- 웹앱 URL : http://www.cssmatic.com/

SpriteGen

이미지를 최적화된 형태로 웹에서 제공할 수 있게 해주는 sprite 형태의 이미지 제네레이팅을 가능하게 해주는 웹앱입니다.

- 웹앱 URL : http://css.spritegen.com/

CSS Center

HTML에서 Centering은 매우 힘든 트릭입니다. 횡/종으로 가운데 정렬을 가능하게 하는 박스 레이아웃을 웹 상에서 쉽게 GUI를 통해 만들 수 있게 해주는 웹앱입니다.

- 웹앱 URL : http://howtocenterincss.com/

더 많은 CSS 스킬 향상을 원하신다면 Envato에서 작성한 다른 포스트를 확인해 보시기 바랍니다.

- 다른 CSS 웹앱 관련 포스트 : https://envato.com/blog/free-web-based-apps-tools-css/

원 저자

Jake Rocheleau

- 트위터 : https://twitter.com/jakerocheleau

- 포트폴리오 : http://jakerocheleau.com/

저작권 관련 정보 (License Info.)

원 저작 게시물 제목(Original Post Title) : Best Free CSS Code Generator Webapps 원 저작 게시물 주소(Original Post URL) : URL Link 원 저작 게시물 제공(Original Post Provider) : Envato 본 콘텐츠는 유용한 정보를 널리 알리려는 취지에서 해외 기사를 국문으로 번역하여 제공하는 포스트입니다. (This post is a translated content to Korean in purpose to spread good information more broadly over the globe.) 번역된 내용 상의 문제가 있거나, 저작권 침해 요소가 있다고 저작권자가 판단할 경우, 요청에 따라 언제든지 지워질 수 있습니다. (If the translated content has some problems itself or the original content provider/creator think posting the translated content here inappropriate, this can be removed immediately upon request.) 번역된 콘텐츠는 CC 4.0 기준을 따르며, 정보 공유 시 최초 저작자(원 저작 관련 내용)를 콘텐츠 내에 표기해 주어야 합니다. (The translated content follows CC 4.0 policy. When it's shared, the original content provider/creator has to be attributed in the content.)