[HTML/CSS/JAVASCRIPT] 프론트엔드 개발 및 웹 디자인에 도움되는 사이트 10가지

codepen.io/

CodePen

1. CodePen

아주아주 유명한 사이트라서 모르는 사람이 없을 정도지만,

예쁜 웹디자인을 위해서 아주 도움되는 사이트이기 때문에 넣었습니다.

CodePen에선 다양한 예시들을 프로 개발자들이 만들고 공유하는 사이트입니다.

웹 디자인을 할 때, 예쁜 체크박스, 토글, 드롭다운 등을 추가하고 싶다면 여기 CodePen에 들어가세요.

각 프레임워크나 패턴에 따른 필요한 예시들이 잔뜩 있습니다.

사용하고 있는 프레임워크에 따른 예시들과 다양한 UI 패턴 예시가 있어서, 다양하게 참고할 수 있습니다.

저작권 라이센스

만약에 사용하고 싶은 예시가 있다면 코드를 무작정 복사해서 가져가기 전에 아래의 라이선스에 대한 글을 확인하세요. CodePen에 올라온 코드들은 대부분 오픈소스지만 해당 코드가 포함된 프로그램을 배포할 경우 출처를 포함해야 한답니다.

---

htmlcolorcodes.com/

HTML Color Codes

2. HTML Color Codes

웹디자인을 하다보면 어떤 색을 쓰고 어떤 색으로 구성을 할지 막막할때가 많습니다.

HTML Color Codes는 색 배치를 도와주고 CSS 네임드 색들을 리스트로 보여주며, 다양한 팔레트를 제공하여 색조합에 엄청난 도움을 줍니다.

그리고 만약 css에 아직 익숙하지 않은 사람들을 위해서 색 변경을 위한 튜토리얼까지 제공하고 있답니다.

CSS 네임드컬러의 이름과 HEX, RGB 코드를 정리한 페이지 일부분

---

fontawesome.com/

Font Awesome

3. Font Awesome

예쁜 웹 디자인을 위해서라면, 절대 빠질 수 없는 감초와 같은 사이트중 하나입니다.

Font Awesome에서 제공하는 코드로 html 문서에

태그 없이 태그를 이용하여 픽토그램을 그릴 수 있습니다.

Font Awesome에서 제공하는 픽토그램들

위의 사진에서 다양한 픽토그램을 제공하고 있지만, 모두 무료는 아닙니다.

회색의 아이콘들은 모두 유료로 Font Awesome에서 제공하는 플랜을 구독해야 사용이 가능합니다.

Font Awesome에는 도큐먼트도 잘 나와있고 튜토리얼도 잘 되어있지만,

다음에 Font Awesome을 사용하는 방법을 포스팅 해보도록 하겠습니다.

---

devdocs.io/

DevDocs

4. devdocs.io

프론트엔드 개발을 하다보면 다양한 프레임워크와 다양한 언어를 사용하게 됩니다.

가끔 프레임워크나 언어에 모르는부분이 생길 경우, 구글에 열심히 찾아보며 자바스크립트는 MDN으로 가고 제이쿼리 경우는 제이쿼리 공식사이트에 찾아가고 하다보면 어느새 브라우저의 탭창은 무수히 많이 쌓입니다.

이럴때 이 DevDocs는 각 언어와 프레임워크 문서를 빠르게 참고할 수 있습니다.

DevDocs

왼쪽 리스트에서 알고싶은 내용을 찾을 수 있고, 검색도 가능하며 오른쪽에서 내용을 볼 수 있습니다.

왼쪽 리스트에선 자신이 쓰는 언어는 Enable 하여 문서를 찾을 수 있고, 참조하지 않는 언어는 Disable 하여 제거 할 수 있습니다.

---

uigradients.com/

uiGradients - Beautiful colored gradients

5. uiGradients

웹 디자인을 하다보면 예쁜 그라디언트 효과가 필요한 경우가 있습니다.

uiGradients 사이트는 예쁜 그라디언트를 다양하게 추천받을 수 있으며, 선택한 그라디언트의 코드를 쉽게 구할 수 있습니다.

엄청나게 다양한 예시의 그라디언트

오른쪽 상단의 괄호모양 버튼을 클릭하세요.

오른쪽 상단의 괄호모양 버튼을 클릭하면 다음과 같은 CSS 코드가 나타납니다.

해당 코드를 복사하여 사용하면 예쁜 그라디언트를 쉽게 만들 수 있습니다.

---

screensiz.es/

Screen Sizes | Viewport Sizes and Pixel Densities for Popular Devices

6. screensiz.es

반응형 웹을 개발하다보면 각 디바이스마다 해상도와 화면비가 어느정도인지 감을 잡을 수 없습니다.

그럴때 구글에 하나하나 검색하기엔 너무나 개발에 필요한 시간이 낭비됩니다.

screensiz에서는 다양한 디바이스들의 화면비, 해상도 등을 다양한 단위로 볼 수 있습니다.

엄청 잘 정리되어 있으니 반응형 웹 뿐만 아니라 앱개발에서도 아주 도움이 많이 될 것 같네요.

---

noonnu.cc/

눈누

7. 눈누

noonnu.cc

상업용으로 사용할 수 있는 한글폰트 눈누입니다.

각 폰트들의 저작권과 사용범위가 정해져 있으니 사이트에서 확인하고 사용하는것을 추천드립니다.

눈누 폰트 리스트

눈누에서는 웹 폰트도 사용할 수 있습니다.

눈누에서 폰트를 다운받아 사용할 수 있지만, 다운로드 버튼 아래에 웹폰트로 사용할 수 있는 css코드가 있습니다.

이 웹폰트를 이용하면 서버로 쉽게 배포하고 사용할 수 있습니다.

---

www.palettable.io/

Palettable

8. palettable.io

palettable.io는 html color codes와 다르게 랜덤으로 색을 추천해줍니다.

만약 추천해준 색이 마음에들면 like 마음에 안들면 dislike 할 수 있는데, like한 색이 있다면 그 색을 위주로 어울리는 다른 색을 추천해줍니다. 그렇게 마음에 드는 색을 5가지 골라 색 조합을 만들 수 있습니다.

엄청 신박하고 재미있게 나만의 색 테마를 만들 수 있습니다.

웹 디자인에 색 테마를 정하고 싶으면 위의 사이트 추천!

palettable 첫 화면

5가지 색을 고른 모습

---

loremipsum.io/

Lorem Ipsum – Generator, Origins and Meaning

hangul.thefron.me/

한글입숨 - 무의미한 한글 텍스트 생성기

9. 로렘 입숨, 한글 입숨

이번엔 다른 사이트지만 같은 역할해서 1개로 묶었습니다.

웹 개발을 하다보면 컨텐츠가 있을때 어떻게 보여지는지 테스트를 할 필요가 있습니다.

그럴때 아무의미 없는 텍스트를 넣곤 하죠. 이럴때 쓰는 무의미한 텍스트가 Lorem ipsum(로렘입숨) 입니다.

하지만 로렘입숨은 모든 글이 알파벳으로 되어있어 한글이 필요할 경우 로렘입숨은 무의미합니다.

그래서 한글입숨 생성 사이트도 함께 추천드립니다.

---

caniuse.com/

Can I use... Support tables for HTML5, CSS3, etc

10. caniuse

마지막으로 사용하는 HTML와 CSS코드가 브라우저에서 지원하는지 여부를 확인할 수 있는 사이트입니다.

CSS Display:flex 가 어느 브라우저에서 지원하는지 알려준다.