프론트엔드 작업 시 유용한 사이트 모음
1. MDN
MDN Web Docs
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
MDN 사이트는 Mozilla Developer Network의 줄임말로,
HTML, CSS, Javascript 등 다양한 주제의 웹 개발 자료를 담고 있습니다.
HTML 태그가 무엇이 있는지, 역할은 무엇인지 등 웹 개발할 때 필요한 정보가 많기 때문에
프론트엔드 개발자라면 자주 사용하시는 것이 좋습니다.
2. JS Bin
JS Bin
Sample of the bin:
jsbin.com
현재 사용하고 있는 툴이 없다면 JS Bin을 사용하는 것도 좋습니다.
별도의 설치 없이 사이트에서 웹 개발 동작을 간편하게 알아볼 수 있습니다.
3. JSFiddle - Code Playground
JSFiddle - Code Playground
jsfiddle.net
이 사이트 역시 별도의 설치 없이 웹 개발 동작을 간편하게 알아볼 수 있습니다.
4. CodeSandbox
CodeSandbox: Online Code Editor and IDE for Rapid Web Development
Optimized for frameworks Custom environments built specifically for React, Vue, Angular, and many more.
codesandbox.io
이 사이트 역시 별도의 설치 없이 웹 개발 동작을 간편하게 알아볼 수 있습니다.
5. Font Awesome
Font Awesome
The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.
fontawesome.com
웹사이트를 만들 때 필요한 아이콘들을 사용할 수 있게 도와주는 사이트입니다.
간단한 가입을 거치고 코드에 링크만 넣어주면 어떤 아이콘이든 사용할 수 있습니다.
6. Google Fonts
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
다양한 글씨체 즉, 폰트를 사용할 수 있도록 도와주는 사이트입니다.
구글 폰트 역시 코드에 링크만 넣어주면 다양한 폰트를 사용할 수 있습니다.
7. The W3C Markup Validation Service
The W3C Markup Validation Service
Validate by File Upload Note: file upload may not work with Internet Explorer on some versions of Windows XP Service Pack 2, see our information page on the W3C QA Website.
validator.w3.org
다양한 곳에서 같은 환경을 제공하기 위해 웹 표준을 따라서 웹 사이트를 구축해야 하는데
자신의 웹 사이트가 이러한 웹 표준을 준수하고 있는지 검사할 수 있게 도와주는 사이트입니다.
자신의 소스파일이나 코드를 넣으면 검사가 진행되고 어느 부분이 웹 표준에 어긋나는지,
어떻게 수정해야 하는지 알려줍니다.
8. Color Tool - Material Design
Color Tool - Material Design
Create and share color palettes for your UI, and measure the accessibility of any color combination.
material.io
웹 사이트 만들 때 색깔을 적절하게 넣는 것이 정말 중요한데
이 사이트를 이용하면 적절하게 색깔을 배치할 수 있습니다.