CSS 모음 사이트 - CSS mo-eum saiteu

October 21, 2020

Web 개발 중 디자인 측면에서 유용한 사이트들을 정리해 보았습니다.

W3Schools.com

모두가 다 알고 있는 웹페이지를 구성하는 HTML, CSS, Javascript 기초를 Step by Step으로 학습할 수 있는 곳입니다. Python이나 PHP등 다른 언어도 학습할 수 있으나 우리들의 뇌리에는 HTML과 CSS가 깊이 각인되어 있지요.

https://www.w3schools.com/

Boostrap

Bootsrap 웹을 쉽게, 그리고 반응형(Responsive)으로 디자인 할 수 있도록 하는 툴킷입니다. 무료 Bootstrap 템플릿은 여기에서 다운로드할 수 있습니다.


https://getbootstrap.com/

Codepen.io

이곳도 모르는 사람이 없죠. 웹린이가 Bootstrap 템플릿에서 헤매다 codepen.io을 파헤치며 마침내 무림의 고수로 성장한다는 전설이 깃든 곳입니다.

https://codepen.io/

Chrome DevTools

웹개발의 필수툴입니다. 크롬 개발자도구 없는 웹개발이 가능할까요?

생활코딩 크롬 개발자도구 강의


이 페이지에서 사용한 스크린샷도 크롬 개발자도구를 사용해 찍었습니다.

무료 사진 사이트

Unsplash.com

무료 Icon

Ionicons

색상조합

color.adobe.com

Font

Google Fonts

Material Design

머티리얼 디자인은 통해 그들의 플랫폼과 서비스가 제공하는 모든 것들이 하나의 통일된 사용자 경험을 줄 수 있도록 함을써 일관적인 브랜딩(Branding)을 가능하게 합니다. 머티리얼 디자인이 왜 필요한가는 이 글을 읽어보시기 바랍니다.

Google Material Design

ETC

마이크로소프트의 웹기반 솔루션으로, 유저 인터페이스를 그린 종이를 사진을 찍어 업로드 하면 딥러닝이 자동으로 디자인 패턴을 탐지하여 해당 HTML 컴퍼넌트로 변환하며, 사용자는 HTML코드를 다운로드할 수 있습니다.

Sketch2Code

마지막으로 웹디자이너가 참고할 사이트는 이곳에 잘 정리되어 있습니다.

Image

이미지 다운로드

unsplash.com

svgbackgrounds.com

아이콘 다운로드

flaticon.com

iconmonstr.com

랜덤 이미지

picsum.photos

CSS Sprites

cssspritestool.com

SVG Sprites

svgsprit.es

Video

동영상 다운로드

pexels.com

CSS 예제

CSS 다양한 도형 예제

css-tricks.com/the-shapes-of-css/

box-shadow 예제

getcssscan.com/css-box-shadow-examples

gradient 예제

colorzilla.com/gradient-editor

Color

색 조합

color.adobe.com/ko/create/color-wheel

Animation

CSS 애니메이션 프리셋

animate.style

CSS 애니메이션 cubic-bezier

cubic-bezier.com

Validator

HTML Validator

validator.w3.org

CSS Validator

jigsaw.w3.org/css-validator

Trend

State of JS

2020.stateofjs.com/en-US/technologies/front-end-frameworks/

State Of CSS

2020.stateofcss.com/en-US/technologies/css-frameworks/

ETC

favicon 생성

realfavicongenerator.net

특수 문자 코드

dev.w3.org/html5/html-author/charref

공유하기

게시글 관리

저작자표시

'개발 도구' 카테고리의 다른 글

The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.

developer.mozilla.org

일단 나한테 필요한

html/css 안써본 코드

설명을 찾아보기 좋은 것 같다

​

영어로 되어있지만..

​

그것은 어차피 넘어야 하는 산

​

튜토리얼도 있다

왜 무료지

​

제대로 써봐야겠다

​

​

​

​

​

​

​

​

​

​

2. 코딩팩토리

CODING FACTORY

코딩 공부 블로그

www.codingfactory.net

여기는 한국어여서 좋다

백과사전 느낌

​

​

​

​

​

​

​

​

​

3. 넥스트리

넥스트리

Nextree, 소프트웨어 개발, IT 시스템 구축, 교육 컨설팅, MSA, DDD, 넥스트리(주)

www.nextree.io

회사인가 블로그인가

회사블로그인가

​

아직 제대로 안봤지만

블로그 느낌의

친절한 글들

​

한국어다

​

​

​

​

​

​

​

​

​

​

​

4. W3Schools

​

​

​

W3Schools Online Web Tutorials

HTML The language for building web pages Learn HTML HTML Reference HTML Example: < !DOCTYPE html > < html > < title > HTML Tutorial < /title > < body > < h1 > This is a heading < /h1 > < p > This is a paragraph. < /p > < /body > < /html > Try it Yourself CSS The language for styling web pages Learn ...