HTML과 CSS 자료가 있는 사이트, MDN Web Docs

오늘은 HTML과 CSS를 공부할 때

가장 많이 참고하는 사이트를 소개해보려 한다.

 

MDNWebDos라는 사이트인데

입문자라면 튜토리얼부터 단계별로

html, css, javascript를 공부할 수 있다.

 

원하는 개념을 

검색해서 바로 찾아볼 수 있다.

 

https://developer.mozilla.org/en-US/docs/Web/HTML

HTML: HyperText Markup Language | MDN

나같은 경우 주로 코드를 분석하다가

모르는 개념이 나오면 여기 검색해본다.

Technologies 카테고리에

HTML을 클릭해보자.

MDNwebDos에서 inherit이라는 개념을 찾아봤다.

 

설명이 먼저 적혀있고

친절하게도 코딩 예시가 있다.

그래서 이해가 쉬운 편이다.

 

크롬에서는 한국어 번역 기능이 제공된다.

영어로 보기가 어렵다면,

마우스 오른쪽 클릭해서 

이 기능을 사용해보자.

스크롤을 아래로 쭉 내리면 이런 카테고리가 나온다.

맨 위 상단 GNB부분에

tutorials 를 누르면,

단계별로 학습을 할 수 있다.

 

인터넷 익스플로러에서는 스크롤을

쭉 내려서 모든 내용을 확인 가능하다.

 

크롬으로 보면, 훨씬 더 깔끔한 UI를 볼 수 있다.

MDNwebDos는 크롬에 브라우저 최적화가 되어 있는 것 같다.

기본적으로 HTML, CSS자료 뿐만 아니라

WEB제작에 필요한 모든 지식이 정리되어 있다.

javascript, Graphics, HTPP 등

프론트엔드 개발에 필요한

웹 지식의 아카이브다.

튜토리얼 파트로 들어가면 

입문 단계부터 숙련자 단계까지 학습할 수 있다.

역시나 크롬브라우저에서 보면 더 깔끔하다.

CSS학습과정을 잠깐 훑어보았다.

백과사전을 그대로 읽는 느낌이라 확실히 지루하긴 하다.

 

다른 걸로 공부하다가,

MDNwebDos는 검색하는 용도로 쓰기가 딱 좋다.

 

이걸로만 처음부터 끝까지 프론트엔드를

공부한다고 하면 금방 질릴 것 같다.

Reference나 Error 관련한 정리도 있다.

에러 종류 정의해놓은 건 상당히 유용할 것 같다.

자바스크립트를 구동하기 위해 어떤 툴들을

쓸 수 있는지도 정리해놓았다.

 

나는 선생님의 권유에 따라 

vscode를 쓴다.

 

그리고 가끔 간단한 코드 연습하고 싶을때

JSbin이나 Codepen같은

웹에디터를 쓰는 편이다.

Tutorial부터 차근차근 배울 수 있는

학습단계과정이다.

온통 영어로 되어 있는 MDNwebDos지만

HTML이랑 CSS자료를 계속 찾다보면 적응된다.

총 3단계 레벨로 나뉘어져 있다.

Introductory → Intermediate → HTML forms 

이런 식으로 진행이 된다.

 

순차적으로 진행하는 것보다,

필요할 때마다 자료를 찾아서 보는

학습법이 더 좋을 것 같다.

 

이런 건 오히려 생활코딩이나 Do it 책 시리즈가

훨씬 더 잘되어 있다.

 

이상 HTML과 CSS자료를 볼 수 있는

MDNwebDos를 알아보았다 :)