본문 바로가기

아카이브/ETC

웹디자인 입문자를 위한 유용한 웹사이트 모음

안녕하세요 메인플레이입니다. 오늘은 제가 처음 웹공부를 시작했을때 주로 사용했던 웹사이트를 추천해볼까 합니다. 이번테마는 저와같은 입문자들을 위한 사이트로 클라이언트쪽 언어에 대한 공부를 할 수 있는 사이트와 디자인과 및 UI를 참고할 수 있는 사이트 위주로 소개하고 있습니다. 그밖에알고계시면 유용할만한 사이트도 몇개 올려놨으니 공부하시는데 도움이 되었으면 좋겠네요.

이번포스팅이 올해 마지막 포스팅이 되겠네요.. 그동안 너무 게을리 했던 제자신을 반성하면서 2016년에는 좀 더 좋은 내용으로 찾아뵙도록 하겠습니다. 모두 새해복 많이 받으시고 올한해 정말 수고 많으셨습니다!!





1. https://opentutorials.org (생활코딩)

언어를 공부하시는 분이라면 한번쯤을 들어 봤으리라 생각됩니다. 클라이언트 언어와 서버언어등 다양한 강좌를 유투브와 텍스트를 통해 무료로 제공하고 있습니다. 맨처음 생활코딩을 통해서 웹공부를 시작하게된 저에게는 바이블 같은 존재이기도합니다.

또한 생활코딩 이외에 개발자 영어, 효도코딩, 생활표현등 다양한 코스를 제공하고 있습니다. 컴퓨터가 낯선 부모님 세대에겐 효도코딩이 안성맞춤이겠네요.




2. http://www.w3schools.com/ (W3school)

세계에서 가장 큰 웹개발 사이트라고 소개하고 있는 영문사이트입니다. 생활코딩 영어버전이라고 봐도 되겠네요 데이터의 양은 W3school이 더 많지 않나 싶네요. 생활코딩은 텍스트와 동영상을 이용한 개론적인 강좌라면 W3school은 간략한 설명과 예제를 통해 이해를 쉽게 할 수 있게 도와줍니다. 영어를 잘 몰라도 코드와 예제만 봐도 충분히 이해가 되니 거부감 없이 사용하실 수 있으실 겁니다. 








3. http://codepen.io/ (코드펜)

앞서 두 사이트가 정보를 제공하는 사이트라면 코드펜은 웹상에서 실습을 할 수 있는 환경을 제공해 줍니다. html, css, javascript와 같이 3영역으로 나누어져 있어 간단한 코드를 짜보거나 구상한 디자인을 스케치하고 싶을때 주로 사용하는 사이트입니다. 회원가입을 통해서 결과물을 저장 관리가 가능하고 공유 및 외부로 보내는 기능까지 제공합니다. 





4. http://tympanus.net/codrops/ (코드롭스)

디자인중심의 다양한 튜토리얼을 만날 수 있는 웹사이트 입니다. 웹사이트를 제작하기전 참조할만한 재미있는 예제들이 가득 있습니다. 또한 CSS에 대한 자세한 설명도 제공합니다.





5. http://market.envato.com/ (인베토마켓)

웹, 동영상, 음악과 같은 다양한 템플릿을 구매할 수 있는 사이트입니다. 저는 주로 디자인과 UI를 참고하기 위해서 이용합니다. 





6. http://www.html-cleaner.com/ (html 클리너)

코드를 정렬하거나 불필요한 코드제거, 특정코드 제거 등 html편집에 대한 다양한 기능을 제공하는 웹사이트 입니다. 자주 쓸 일은 없지만 언젠가 한번은 유용하게 쓰일 일이 있을겁니다. 한번들어가서 내용을 둘러보시길 추천합니다.





7. http://readme.skplanet.com/?p=9739 (반응형웹에 대해서)

SK플래닛에서 운영하는 기술 블로그입니다. 반응형웹에 대한 간략한 설명과 예제를 활용하여 이해를 돕기 때문에 처음 반응형웹을 공부하시는 분들에게 적극 추천하는 사이트입니다.  http://readme.skplanet.com에서는 웹뿐만아니라 개발과 관련한 다양한 주제를 다루고 있습니다.





9. http://ko.learnlayout.com/ (css 레이아웃에 대해서)

웹사이트의 레이아웃에 대한 css를 설명하는 사이트입니다. 영문사이트를 한국어로 번역하였기 때문에 표현등이 약간 다르게 느껴 질 수 있지만 내용을 이해하는데는 아무런 문제가 없습니다. 디자인도 심플하게 되어있어니 참고하시기 편안하실 겁니다.