October 21, 2020
Web 개발 중 디자인 측면에서 유용한 사이트들을 정리해 보았습니다.
W3Schools.com
모두가 다 알고 있는 웹페이지를 구성하는 HTML, CSS, Javascript 기초를 Step by Step으로 학습할 수 있는 곳입니다. Python이나 PHP등 다른 언어도 학습할 수 있으나 우리들의 뇌리에는 HTML과 CSS가 깊이 각인되어 있지요.
//www.w3schools.com/
Boostrap
Bootsrap 웹을 쉽게, 그리고 반응형(Responsive)으로 디자인 할 수 있도록 하는 툴킷입니다. 무료 Bootstrap 템플릿은 여기에서 다운로드할 수 있습니다.
//getbootstrap.com/
Codepen.io
이곳도 모르는 사람이 없죠. 웹린이가 Bootstrap 템플릿에서 헤매다 codepen.io을 파헤치며 마침내 무림의 고수로 성장한다는 전설이 깃든 곳입니다.
//codepen.io/
Chrome DevTools
웹개발의 필수툴입니다. 크롬 개발자도구 없는 웹개발이 가능할까요?
생활코딩 크롬 개발자도구 강의
이 페이지에서 사용한 스크린샷도 크롬 개발자도구를 사용해 찍었습니다.
무료 사진 사이트
Unsplash.com
ISO Republic
Pexels.com
pixabay.com
무료 Icon
Ionicons
The noun project
색상조합
color.adobe.com
colorcombos.com
Font
Google Fonts
Dafont
Material Design
머티리얼 디자인은 통해 그들의 플랫폼과 서비스가 제공하는 모든 것들이 하나의 통일된 사용자 경험을 줄 수 있도록 함을써 일관적인 브랜딩(Branding)을 가능하게 합니다. 머티리얼 디자인이 왜 필요한가는 이 글을 읽어보시기 바랍니다.
Google Material Design
Microsoft Fluent 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
공유하기
게시글 관리
구독하기소크라톤의 개발 블로그저작자표시
'개발 도구' 카테고리의 다른 글
맥에서 작업한 웹앱을 윈도우 크롬에서 테스트하는 방법 (0)2022.06.22Visual Studio Code 연두색 테마 (4)2021.11.13비쥬얼 스튜디오 코드를 터미널에서 여는 명령어 (0)2020.09.29크롬 확장 프로그램 Color Picker - 웹 페이지에서 색 추출하기 (0)2020.03.13Visual Studio Code 유용한 단축키 (0)2020.03.06The 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 ...