본문 바로가기
디자인 개발/CSS

무료 웹 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.)