코딩 공부에 유용한 사이트들

안녕하세요. 키다리디자이너입니다.

오늘은 HTML, CSS를 공부하려는 분들을 위해 도움이 되는 사이트 몇가지를 소개해 드리겠습니다.

많은 분들이 IT관련 공부를 위해서 무턱대고 책부터 구매하거나 학원을 등록하곤 하는데요 저는 이것이 좋지 않다고 생각합니다. 어떤 기술이든 책으로 공부할 수 있는 내용은 한계가 있기 때문이죠.

그것은 학원도 마찬가지입니다. 학원의 커리큘럼이라는 것이 적당한 서적을 하나 지정하여 교과서처럼 진도를 나가는 수준을 벗어나지 못하기 때문입니다. (다만 완전히 초급이며 처음 시작하는 분들은 학원도 좋을거라 생각합니다.)

책이나 학원이 조건 안좋은 것은 아니지만 서점등에서 추천수를 많이 받은 서적이라 하더라도 그 내용은 기본적이고 초급수준의 내용을 다루고 있거나 다소 난해한 번역서, 사전처럼 두꺼워서 펼쳐놓고 공부하기에 다소 무리인 책이 대부분입니다.

특히나 HTML5와 웹표준을 다루고 있는 서적들을 보면 그것이 웹표준에 어긋나 있거나 틀린 내용임에도 그 내용이 그대로 책에 실려있는 경우가 많습니다.

웹표준이란 것이 아직도 정책이 완벽하게 수립되어 있지 않은 까닭도 있고 저자들도 웹표준 에 대한 이해가 뚜렷하지 않아서일 것이라 생각합니다.

모든 분야가 그렇지만 초급수준 이상의 지식을 쌓으려면 그것을 직접 찾아다니면서 연구해야 합니다.
특히나 웹 관련 기술들은 트렌드의 변화 속도가 아주 빠르기 때문에 게을러지면 그만큼 뒤쳐질 수밖에 없으니까요.

 

아래는 키다리디자이너가 추천하는 코딩 독학을 위한 사이트들입니다.

 

1. HTML5 Open Reference

 

 

http://html5ref.clearboth.org/

 

사실 웹표준 공부에 도움이 될만한 사이트는 거의 해외사이트가 대부분입니다.
하지만 이 사이트는 고맙게도 HTML5의 레퍼런스를 한글로 제공하고 있구요, 사전처럼 필요할 때 찾아 쓰기 좋습니다.
사이트 설명 : HTML5 오픈 레퍼런스는 HTML5 명세를 좀 더 쉽게 이해하고, 웹 제작자들이 빠르게 요소와 속성을 찾아볼 수 있도록 하기 위해 클리어보스 HTML5 그룹에서 만들었습니다

 2010년 11월에 시작하여 2011년 11월 1일 베타 버전을 공개하였고, 2012년 HTML5 명세가 표준 권고안으로 확정되면 변경된 내용을 반영하여 베타를 떼어낼 계획입니다.

 

2. The Code Player

 

 

http://thecodeplayer.com/

 

The Code Player는 동영상강좌를 보는 것처럼 코딩과정과 그 결과를 실시간으로 보여줍니다.
좌측이 코드에디터 영역이고 우측이 그 결과를 보여주는 브라우저와같은 역할을 합니다.
영상을 진행하는 도중 왼쪽 에디터에 코딩을 직접 작성하게 되면 우측에 바로 반영되어 보여주기도 합니다. 마치 누군가 코딩하는 과정을 처음부터 끝까지 지켜보는 느낌이 들기 때문에 감각을 익히는데 많은 도움이 됩니다.

3. codrops

 

 

http://tympanus.net/codrops/all-articles

 

codrops에서는 다양한 코딩 결과물들을 공유하고 그 소스를 다운받을 수 있는 사이트입니다.

 

4. codepen

 

 

http://codepen.io/

 

codepen 또한 코딩 결과물을 공유합니다.

주로 CANVAS태그나 미디어쿼리, 웹킷 등을 이용한 동적인 결과물들로 HTML로 이런 것까지 만들수 있다는 사실에 놀라게 됩니다.
The Code Player처럼 에디터에서 직접 코드를 수정해볼 수 있습니다.

 

5. Codeacademy

 

 

http://www.codecademy.com/

Codeacademy는 자바스크립트, HTML, PHP 등 여러 코딩 기술들을 배울 수 있는 사이트입니다.
스터디 방식은 웹사이트가 지시하는 순서대로 직접 코딩을 입력해야 하고 틀린 부분은 그 이유를 설명해 줍니다. 각 과정을 통과하면 기념 배지를 선물로 주기도 합니다.

 

코딩 공부를 위한 사이트는 제가 추천해드린 사이트들 외에도 유용한 사이트들이 얼마든지 있습니다. 하지만 이것들은 거의 해외사이트들이며 당연히 영문으로 만들어져 있습니다.
이렇게 남보다 한발 앞서 나가기 위해서는 국내에서 해외로 눈을 돌려야만 합니다.
아쉽지만 국내 사이트들에서 얻을 수 있는 정보는 그만큼 부족하고 뒤쳐진 것이 현실이기 때문이죠.