CSS 소스 사이트 - CSS soseu saiteu

프로그래밍하면 떠오르는 이미지가 무엇일까요? 다양한 느낌이 있겠지만 첫 번째로 '복잡'하고 '어렵다' 그리고 '재미'있고 '창의적'이다가 뒤따라 떠오르는 것 같습니다.

복잡하고 어려운 프로그래밍, 코딩을 쉽고 재미있게 도와줄 수 있는 개발 도구들을 모아봤습니다. 웹, 앱 개발 중심으로 정리를 했으며, 향후 편리하고 좋은 프로그래밍 도구가 있을 때마다 업데이트하도록 하겠습니다 :)

I 클라우드 기반 통합 개발환경 서비스

- 구름 IDE (https://www.goorm.io/)

: 개인 PC에 설치할 필요 없이 Docker 컨테이너 기반으로 다양한 SW 프로그램을 개발할 수 있는 '온라인 코딩 테스트 서비스'를 제공 (파이썬 프로그래밍 환경구축하기, 웹투앱 개발 환경 구축하기 등)

I 웹 페이지 프레임워크

- Bootstrap (https://getbootstrap.com/)

: 웹사이트를 쉽게 만들 수 있게 도와주는 HTML, CSS, JS 프레임워크. 반응형 CSS를 통해 스마트폰, 태블릿, 데스크톱까지 다양한 기기에서 웹페이지가 안 깨지고 보이도록 도와주는 도구.

- Materialize (https://materializecss.com/) 

: 반응형 CSS 프레임워크. 모던한 디자인을 지향.

- Semantic-Ui (https://semantic-ui.com/)

: 사용자 친화형의 반응형 웹페이지를 만들 수 있도록 도와주는 프레임워크

- Free CSS (https://www.free-css.com/)

: 다양한 무료 CSS 템플릿, 레이아웃을 모아둔 곳

I 모바일 어플리케이션 프레임 워크 (web to app)

- React Navtive (https://reactnative.dev/)

: Facebook 에서 만든 모바일 앱 제작 도구. 웹페이지를 Android, iOS 네이티브 앱에서 동작할 수 있도록 변환을 쉽게 해 준다.

I Design to Code 변환 도구

- Zeplin (https://zeplin.io/)

: 직관적인 디자인을 구성하면 웹 페이지 코드로 변환해 주는 도구.

I 웹 호스팅(클라우드 서버) 제공 업체

- Netlify  (https://www.netlify.com/)

: 웹 기반 응용 프로그램 및 웹 사이트를 위한 호스팅 및 서버리스 백엔드 서비스를 제공 (무료 및 일부 유료)

Amazon Web Service, Microsoft Azure, GoDaddy, Google Cloud, CAFE24, gabia 등도 사용 가능

I 코드 에디터

- VScode (https://code.visualstudio.com/)

: 마이크로소프트가 마이크로소프트 윈도우, macOS, 리눅스용으로 개발한 소스 코드 편집기. 디버깅 지원과 Git 제어, 구문 강조 기능 등이 포함되어 있으며, 사용자가 편집기의 테마와 단축키, 설정 등 수정 가능

- ATOM (https://atom.io/)

: 오픈 소스 형태의 OS X, 리눅스, 윈도용 문서 및 소스 코드 편집기. 대부분의 확장 패키지는 자유 소프트웨어 라이선스를 취하며 커뮤니티가 만들고 관리 중.

- Sublime Text (https://www.sublimetext.com/)

: 대표적인 소스 코드 편집기. 수많은 프로그래밍 언어와 마크업 언어를 네이티브로 지원하며 플러그인을 사용하여 사용자가 직접 기능을 확장 가능.

I AI 학습 도구

- Google Teachable Machine (https://teachablemachine.withgoogle.com/)

: 구글에서 제공하는 웹 기반 딥러닝 학습 도구. 학습시킨 인공지능 엔진 코드를 바로 다운로드할 수 있다. 현재 이미지 인식, 음성인식, 모션 인식 학습 서비스를 제공. 

I 음성 만들기 도구

- Kakao Sppech API (https://speech-api.kakao.com/)

: 모바일 기기에 장착되어 있는 마이크와 스피커를 이용해 사람의 음성을 인식하거나 합성할 수 있는 도구

I 무료 도메인 제공 페이지

- freenom (https://www.freenom.com/en/index.html?lang=en)

: 무료 도메인을 받을 수 있는 사이트

I 웹크롤링 도구/라이브러리

- Beautifulsoup (https://www.crummy.com/software/BeautifulSoup/bs4/doc/)

: phthon을 기반으로 웹 크롤링을 쉽게할 수 있는 라이브러리

- Google image downloasd (https://pypi.org/project/google_images_download/)

: phthon을 기반으로 웹 이미지를 쉽게 다운로드할 수 있는 라이브러리

I 게시판 등 웹 페이지 라이브러리

- DISQUS (https://disqus.com/)

: 웹사이트에 게시판 기능을 만들어주는 라이브러리

- Codepen (https://codepen.io/)

: 웹사이트에 다양한 기능을 만들어둔 라이브러리

I웹UI를 디자인하고 코드로 변형해주는 사이트

- Zeplin (https://disqus.com/https://app.zeplin.io/projects)

: 웹페이지에서 UI를 디자인하고, 디자인 된 모습을 html, css 코드로 다운로드 받을 수 있는 사이트

무료 웹 템플릿 사이트를 소개합니다.

아래의 사이트들은 웹 템플릿을 무료로 제공하지만

수정/재배포/판매에 대한 기준은 템플릿 마다 다릅니다.

사용하실 템플릿의 라이센스를 확인하시고 사용하시기 바랍니다.

1. start bootstrap

블로그 형식 / admin 형식 모두 다양한 곳입니다.

HTML 뿐 아니라, REACT / VUEJS / ANGULAR 템플릿도 제공하고 있습니다.

https://startbootstrap.com/

Free Bootstrap Themes, Templates, Snippets, and Guides

Start Bootstrap develops free to download, open source Bootstrap 4 themes, templates, and snippets and creates guides and tutorials to help you learn more about designing and developing with Bootstrap.

startbootstrap.com

2. bootstrap themes

세련된 디자인이 많은 사이트입니다.

bootstrap 기준으로 만들어진 템플릿이기 때문에 편하게 사용하실 수 있습니다.

https://bootstrapthemes.co/items/free-bootstrap-templates/

Html Free Bootstrap Templates and Free Bootstrap Themes

Download High-Quality Html free bootstrap themes, free bootstrap templates for your website. All are free for commercial use.

bootstrapthemes.co

3. 웹쟁이

한글 사이트로, 웹 템플릿 외에도 디자인 소스 /  애니메이션도 많이 제공합니다.

다양한 분위기의 템플릿이 많은 사이트입니다.

http://webjangi.com/design/freetemplate

웹쟁이 | 무료 웹소스 제공

무료디자인소스, 무료PSD 다운, 무료템플릿, 반응형웹 제작, html5, 제이쿼리, 무료 스크립트

www.webjangi.com

4. templated

깔끔한 블로그식 디자인이 많은 사이트입니다.

웹 포트폴리오에 어울리는 디자인이 많은 곳입니다.

https://templated.co/

TEMPLATED

A collection of 867 Creative Commons-licensed CSS, HTML5 and Responsive site templates created by Cherry, Doni, AJ, and co.

templated.co

5. html5up

깔끔하고 세련된 디자인 위주로 모아둔 사이트입니다.

100% 무료로 제공되고 있습니다.

https://html5up.net/

6. creative-tim

개인적으로 애용하는 곳입니다.

종류는 많지 않지만, 같은 디자인이어도 HTML / REACT / VUEJS / ANGULAR 로 제공한다는 장점이 있습니다.

https://www.creative-tim.com/templates

193+ Themes & Templates @ Creative Tim

Spring SALE is on! Get our amazing Front-end & Back-end Bundles with discounts up to 90%! 🔥

www.creative-tim.com