HTML&CSS 등 초보 개발자를 위한 무료 사이트 9개 추천

 

 

 

 

 

 

 

웹표준문서를 작성하는 것을 독학하면서 가장 궁금했던 것이 있다.

'나 같은 신생아가 대체 이 많은 태그들을 어디서 어떻게 유용하게 가져와서 배우고 쓸 수 있는걸까?' 

 

웹사이트를 하나 구축하려면 코딩을 잘 하는 것도 중요하지만, 웹사이트에서 필요한 글씨체(font), 이미지 (vector icons, images), 그리고 코딩을 연습할 수 있도록 환경이 조성되어야 한다. 

그러나 보통 코딩을 배우면서 모든 어플리케이션을 다 컴퓨터에 깔기 힘들 수도 있고, 이 것을 하다가 저것을 하러 다른 앱을 켜고 왔다갔다 하면 굉장히 피곤하기도 하다 ... 정말로... 

그리고 강의를 하나 듣는다고 해도 거기에서 배우는 elements가 전부가 아니기 때문에 계속 새로운 것들을 공부해야 한다. 책에 나오는 것들보다 실무에서 더욱 유용하게 쓰이는 것들을 먼저 배워놓는 것도 좋은 방법이지 않을까? 

 

그럴 때 한 유튜버가 속성 강의를 하면서 알려준 사이트들이 있다. 이 사이트들에서 이해가 되지 않는 문법이나 태그 사용법을 참고하니 너무 빠르게 이해되었다. 또 사이트 내에서 쉽게 설명이 되고 있기 때문에 굉장히 유용하다.

 

 

---

태그 참고서 사이트 

모질라닷컴에서 운영하는 사이트로서, HTML뿐만 아니라 개발자들을 위한 태그 사용법, 문법, 예제 등을 확인할 수 있다. input처럼 한 가지 태그로 여러 위젯들을 사용할 경우 이 사이트가 많은 도움이 된다. 

 

developer.mozilla.org/ko/docs/web/html/element

HTML 요소 참고서

 

 

---

 

 

Tag 유효성 검사 사이트 

validator.w3.org/

The W3C Markup Validation Service

내가 만든 html에서 태그가 안 먹는다던지, 어떠한 태그들을 작성하다가 내가 잘 하고 있는지 확인하고 싶을 때 사용하면 된다. 이 사이트에 작성한 문서를 붙여넣고 확인하면 틀린 부분을 보여주고 어떤 태그로 바꿔야 하는지도 추천해 준다. 나같은 초보자들에겐 정말 구세주같은 사이트이다. 

 

 

 

---

 

무료 백터 아이콘 사이트 

fontawesome.com/

Font Awesome

 

프로젝트를 진행하거나 포트폴리오를 만들 때 가장 중요한 것은 무료로 아이콘을 가져올 수 있는 능력이다. 이 사이트는 코드를 바로 복사해서 a태그로 html파일에 붙여넣기 하면 되기 때문에 사용하기 너무 편리하다. 

 

 

이름 밑에 <i class="" ></i>이렇게 주소가 있어서, 클릭 한 번에 복사가 된다. 

 

 

---

 

 

#색상이름 사이트 Color Tool 

 

material.io/resources/color/#!/?view.left=0&view.right=0

Color Tool - Material Design

디자인이 굉장히 직관적이어서 원하는 색상과 #색상ID를 찾아내기 너무 쉬운 사이트!! 

 

 

---

무료 코딩 연습 사이트 1 : Repl 

 

repl.it/~

Log In

이 사이트는 너무나도 유명한! 무료로 코딩을 연습할 수 있게 해 주는 사이트이다. 생활코딩에서 알려준 사이트인데 너무 유용하게 사용하고 있다. 물론 Visual Studio Code를 주로 사용하긴 하지만, 새로운 태그를 연습할 때 많이 사용한다. 

 

특히 개발자 환경을 세팅하는 것이 컴퓨터 환경에 따라 매우 다르고 예민하기 때문에 어플리케이션을 사용하기 힘든 환경이거나 급하게 해야할 경우, 또는 나처럼 입문자에게는 코딩연습을 하기 매우 좋은 사이트이다. 

 

 

---

 

무료 코딩 연습 사이트 2 : JS Fiddle

jsfiddle.net/

JSFiddle - Code Playground

이 사이트도 위의 사이트와 마찬가지로 개발환경을 조성해서 코딩할 수 있게 해 주는 사이트이다. 역시나 어플리케이션을 활용할 수 없는 환경에서는 정말 유용하게 코딩할 수 있는 사이트!! 정말 좋당 >.<

 

 

---

 

무료 코딩 연습 사이트 3 : JS Bin

 

jsbin.com/?html,output

JS Bin

상동! 

 

 

---

 

무료 폰트 및 태그지원 사이트 : Google Fonts

 

fonts.google.com/

Google Fonts

 

수만가지 폰트들이 있기도 하지만, 태그 안에 넣을 수 있도록 링크 주소를 지원하는 것이 가장 큰 장점이다.

개인 컴퓨터에 쓰고 싶을 때는 다운로드 받아서 설치하지만, 웹표준 개발하거나 디자인 할 때는 이 링크 주소를 지원 하느냐 안 하느냐로 사이트가 많이 갈리는 것 같다.  

 

Embed로 가면 link주소를 복사해서 붙여넣기 하면 된다. 넘나 간편한 것!! 

 

---

CSS 코드를 찾아내고 연습할 수 있는 게임사이트!! CSS Diner!  

 

flukeout.github.io/

CSS Diner

상 위에 접시들이 놓여져 있고, "Type in a CSS selector"에다가 정답을 넣으면 된다!!

타이쿤 게임처럼 너무나 단순한 게임이지만, 나는 재미있어서 1시간 넘게 했다 ㅎㅎ 

CSS 초보자에게 이해를 돕고 재미있게 연습할 수 있는 사이트! 어떤 이쁜 유튜버분이 알려주셨다 ㅎㅎ

 

 

 

끝!