외국 의 어느 웹 개발자 가 밝히 는 HTML 5 & 웹 개발자 로써 의 로드맵 ( 번역 자료 ) 
 스텍 오버 플로어 의 여러 글 들 을 보 다가 괜찮 은 글 이 있 어서 미흡 하 지만 번역 해 봤 습니다 . 
 중학생 이 웹 개발자 의 길 을 꿈꾸 며 , html 5 와 css 3 를 어떻게 공부 해 나가 야 하 는지 에 대해 올린 질문 에 
 Manuel Strehl 이 라는 독일 레겐 스 브로크 에서 웹 개발자 로 활동 하 는 분 의 답글 입니다 . 
 개인 적 으로 이 글 을 읽 으면서 , 확실히 뭔가 관심 을 가지 고 접근 한다는 그런 방향 성 이 우리 나라 의 IT 주입식 교육 과 는 많이 다르 다는 것 을 느끼 네요 . 
 물론 , 이 사이트 를 방문 하 는 대부분 의 분 들 이 웹 을 정말 사랑 하 고 관심 있 어 해서 여기 까지 온 것 이 아닌가 싶 지만 말 입니다 . ^^ 
 특히 Manuel 이 추천 하 는 사이트 중 몇몇 개 는 꽤 나 쓸 만 한 것 같 습니다 . 물론 죄다 영어 이 지만 . . 그리고 솔직히 말 해 HTML 5 의 로드맵 이 라기 보단 웹 개발 의 전반 적 인 부분 에 대한 내용 입니다 . 특히 개발 자 라고 디자이너 의 영역 을 무시 하 거나 , 디자이너 라고 개발자 의 영역 을 무시 하 는 것 을 반대 하 는 그 의 태도 는 참으로 공감 할 만 한 것 같 습니다 . 
 오역 이 많 은데 , 양해 하 고 봐 주 시 기 바랍니다 . 
 원문 : http : / / stackoverflow . com / questions / 4744906 / would - you - recommend - starting - from - html 5 - css 3 - for - beginners 
 번역 : Mattew , Chang ( http : / / izect . kr ) 
 쉬운 것 을 먼저 배워라 
 HTML 5 공부 를 시작 하 기 이전 에 , HTML 4 는 HTML 5 중 의 하나 이 고 , 또한 CSS 2 도 CSS 3 의 일부분 이 라는 것 을 알 아야 합니다 . 이 에 제 가 제안 하 는 HTML 5 공부 를 시작 하 는 법 은 이전 의 기술 을 먼저 배우 는 것 입니다 . 특히 나 HTML 4 는 HTML 5 와 CSS 3 의 새로운 면 을 배우 는 데 자극 이 될 것 입니다 . 
 HTML 5 튜토리얼 들 의 문제점 은 그것 들 은 따뜻 한 봄날 아침 의 데이지 꽃 이 생기 는 것 과 도 같 습니다 . 무슨 말 이 냐 , 이러 한 튜토리얼 은 대부분 좋 은 것 만 가르칩니다 . 그러나 초보 자 인 당신 은 차별 성 을 갖 기 위해 초심자 를 위해 쓰여진 문서 나 ( X ) HTML 을 경험 한 사람 들 의 더 실무 적 인 내용 등 을 습득 하 는 등 의 어려운 결심 을 해야 합니다 . 바로 HTML 5 를 시작 하 는 것 이 HTML 4 의 튜토리얼 보다 더 많 은 혼란 을 가져오 는 것 처럼 말 입니다 . 
 ‘ 나 의 경험 ’ 
 공부 를 하 기 위해 다양 한 사람 들 이 서로 다른 행동 을 하 겠 지만 , 저 의 웹 개발 공부 의 길 을 요약 하 면 아래 와 같 습니다 . 
 물리학 과 대학원 생 이 던 시절 , 웹 개발 에 대한 어떠 한 생각 도 없 었 습니다 . 그리고 전 생각 했 죠 . “ 그래 , 내 브라우저 의 시작 페이지 를 내 맘 대로 설정 하 면 멋질 것 같 아 . ” 그 때 가 2004 년 이 었 고 , iGoogle 은 만들 어 지 기 전 이 었 습니다 . 이 처럼 여러분 도 작 은 프로젝트 로 시작 하 고 작업 해 보 세요 . 
 운 좋 게 도 저 는 독일어 를 할 줄 알 았 고 , 독일어 로 된 괜찮 은 HTML 을 시작 하 는 자원 ( SelfHHTML ) 을 찾 을 수 있 었 습니다 . 하지만 이 사이트 는 그 이후 로 업데이트 가 자주 되 지 않 습니다 . 그리고 솔직히 이 사이트 의 영문 으로 된 자료 의 퀄리티 가 좋 은지 는 모르 겠 습니다 . 이 사이트 를 W 3 Schools 의 대용 으로 사용 하 지 말 기 바랍니다 . 그러나 , 아래 와 같 은 이유 로 제 가 특별히 어떤 튜토리얼 의 어떤 부분 이 좋 은지 지적 해 주 기 는 힘들 것 같 습니다 . 
 제 가 브라우저 의 시작 페이지 제작 을 끝내 고 , 저 는 저 의 RPG ( Role Playing Game ) 모임 홈페이지 를 만들 었 습니다 . 이 사이트 는 몇몇 의 HTML 페이지 로 구성 되 엇 고 , 이 를 통해 저 는 빠르 게 CSS 에 대해서 알 수 있 었 습니다 . HTML 페이지 당 하나 의 스타일 시트 를 가지 게 하 엿 는데 , 이 는 제 가 처음 으로 생각 한 많 은 파일 들 을 축적 하 기 위한 구조 입니다 . ( ‘ 폴더 by 파일 ’ 의 측면 에서 ) 
 이러 한 부분 에서 여러분 은 배워야 할 많 은 기술 들 을 알 게 될 것 입니다 . 
 저 는 저희 모임 의 사생활 을 보호 하 기 를 원했 고 , 이 를 위해 HTTP 인증 ( Authentication ) 을 배웠 습니다 . 
 페이지 마다 디렉 토리 를 만들 고 그 안 에 HTML 파일 을 각각 두 는 것 은 URL 과 절대 경로 에 대해 빠르 게 배울 수 있 습니다 . 
 RPG 모임 의 FAQ 섹션 을 위해 저 는 질문 을 선택 하 면 미리 숨겨 놨던 답변 이 나오 도록 하 였 습니다 . 이것 이 저 의 자바 스크립트 로써 입문 이 었 습니다 . 이 경험 에서 얻 은 것 은 진짜 ( Real ) 자바 스크립트 였 습니다 . 단순히 구글링 해서 jQuery 코드 따위 를 카피 하 는 것 이 아니 였 습니다 . ( jQuery 이전 엔 그게 prototype 이 었 죠 . 
 다음 으로 정적 HTML 파일 을 서버 로 옮겼 습니다 . 저 는 PHP 와 MySQL 이 매우 좋 은 초보 자 를 위한 시작 코스 라고 생각 합니다 . ( 제 소견 으로 는 php 는 간단히 서버 측 의 기술 을 사용 하 기 에 좋 다 생각 합니다 . ) 그리고 전 php 가 가능 한 작 은 웹 공간 을 확보 했 습니다 . 가장 좋 은 웹 서버 에서 의 ‘ Hello World ’ 프로젝트 는 저 의 모임 웹 사이트 의 방명록 이 었 습니다 . ( 물론 요즘 은 Disqus 의 링크 가 방명록 보다 더 좋 지만 요 . ) 
 그리고 튜토리얼 들 과 레퍼런스 를 찾 아 봤 습니다 . 처음 에 는 가장 최초 의 스 팩 정의 서인 PHP 메뉴 얼 과 HTML 4 명세서 를 잠깐 보 았 습니다 . 또한 W 3 C 의 CSS 2 중 독립 적 으로 정의 된 CSS 의 속성 들 도 보 았 습니다 . 그리고 늦 게 나마 이런 걸 느꼈 습니다 . “ 가능 하 면 스펙 명세서 를 읽 어라 . 거기 엔 아직 네 가 이해 하 지 못한 부분 이 있 겠 지만 그것 보다 더 좋 은 소스 는 없 다 . ” 
 이런 기술 을 볼 때 에 도 웹 에선 많 은 신 기술 이 계속 나오 고 요구 되 고 있 었 습니다 . 그러나 가끔 은 기초 가 중요 합니다 . DOM , CGI , SVG , XML , XHTML 과 HTML 의 차이점 , 정규식 표현 , 파이썬 , mod _ rewrite , nginx , XSLT , PDF , RSS , RDF , Bash , SSH , Git , SVN , XSS , 유니코드 , 웹 폰트 , Dublin Core , JSON , SQLite 등등 . . 이 모든 게 기초 를 요하 고 있 습니다 . 
 결국 저 정도 의 단계 까지 오 게 된다면 여러분 은 보다 더 전문 적 인 것 을 요하 게 될 것 입니다 . 허나 위험 한 생각 은 “ 나 는 디자이너 야 . 불쾌 한 코드 따위 는 건들 지 않 아 . ” “ B 2 B JSON 이 JBoss 와 Hibernate 에서 는 최고 라 생각 해 . 좋 아 . 나 는 포토샵 따위 는 필요 없 어 . ” 그러나 제 가 추측 하 건데 , 아직 도 가능 한 많 은 영역 에서 순진 하 게 다가가 는 것 이 좋 다 생각 합니다 . 역 자주 : 내 가 왜 그런 디자인 을 이해 하 는지 , 프로그래밍 적 으로 는 어떻게 돌아가 는지 등등 . . 이런 생각 을 가지 고서 는 오래 가 지 못합니다 . 최소한 지금 으로부터 5 년 내 로 우리 는 면접 관 에게 ‘ canvas 개발자 ’ , ‘ 멀티미디어 마크업 전략가 ’ , ‘ 크로스 플렛 폼 UX 전문가 ’ , ‘ 플래시 코드 와 테이블 에 기초 한 HTML 이메일 템플 릿 전문가 ’ , ’ 오프라인 캐시 보안 그룹 ’ , ‘ 웹 스토리지 데이터베이스 엔지니어 ’ 이런 생소 한 용어 들 을 어필 할 것 입니다 . 이 보다 더 당신 이 주된 관심 을 가지 고 최소한 으로 이해 해야 할 것 은 새로운 아이디어 를 얼마나 유연 하 게 만들 고 접근 해 가 는데 도움 을 주 느냐는 것 입니다 . ( 더 중요 한 것 은 오래 된 아이디어 와 접근성 을 새롭 게 재 창출 하 는 문제 일 껍니다 . ) 
 전 여러분 을 기죽 게 하 기 는 싫 습니다 . 제 가 말 하 는 때 에 도 더 많 은 HTML 과 CSS 의 배울 거리 가 생겨나 고 있 습니다 . 그래도 이러 한 제 경험 과 생각 은 더 멋지 고 쿨 한 개발자 / 디자이너 가 되 기 위한 조언 입니다 . 이 를 잘 배우 고 난다면 , 당신 의 프로젝트 들 이 분명 더 강력 해 질 것 입니다 . 
 잘못 된 자료 를 가지 고 공부 하 는 것 은 잘못 된 것 입니다 . 제 가 제안 컨데 , 만약 모른 게 생 긱 면 아마 여기 ( StackOverflow ) 에서 의견 을 듣 거나 , chat . stackoverflow . com 에 물 어 보 는 게 더 나 을 수 있 습니다 . 이 사이트 에 질문 할 때 에 는 기본 적 으로 소스 를 함께 첨부 하 는 게 좋 습니다 . 
 개인 적 으로 는 드림 위버 같 은 위지 윅 에디터 를 최대한 멀리 하 셨 으면 좋 겠 습니다 . 아마 IDE 나 이클립스 같 은 추가 기능 이 있 는 에디터 를 사용 할 것 입니다 . 저 같 은 경우 는 GoLive 에서 Notepad ++ 로 바꿨 고 , 결국 Vim 에디터 를 사용 하 게 되 었 습니다 . 이 는 취향 의 문제 이 긴 하 지만 , IDE 소프트웨어 가 우리 도 모르 게 뭔가 를 숨기 고 있 거나 자동 으로 생성 하 는 게 있 다면 용량 만 무거워 지 고 , 우리 가 예측 하 기 힘든 코드 가 나올 껍니다 . 
 추천 하 는 읽을거리 들 
 다시 한 번 말 하 지만 , 저 는 여러분 의 기 를 죽이 는 것 이 아닙니다 . 만약 여러분 이 어떤 자료 를 가지 고 공부 해야 하 는지 헷갈린 다면 , 제 가 몇 개 의 링크 들 을 제안 해 드리 겠 습니다 . 이 링크 들 은 종종 전문 적 인 레퍼런스 로 많이 사용 됩니다 . 
 W 3 . org – HTML 과 CSS 를 표준 화 하 는 기관 
 developer . mozilla . org – 파이어폭스 조직 . 여기 에 는 좋 은 HTML , CSS 그리고 cutting - edge 웹 개발 등 의 튜토리얼 이 있 습니다 . 그리고 개인 적 소견 으로 는 자바 스크립트 레퍼런스 가 온라인 에 현존 하 는 최고 의 레퍼런스 라고 생각 합니다 . 
 msdn . microsoft . com – 마이크 로 소프트 사 의 HTML / CSS 문서 입니다 . 
 Safari Reference Library - 매우 애플 과 사파리 에 초점 을 맞춰진 곳 입니다 . 그러나 몇몇 개 는 꽤 읽 을 만 합니다 . 
 Opera Web Curriculum – 오페라 의 웹 커리큘럼 은 좋 은 중요 한 기술 들 의 요약 입니다 . 
 Validator – 당신 의 코드 가 에러 가 없 는지 유효 성 을 체크 합니다 . W 3 C 에서 왔으며 몇몇 의 중요 한 웹 개발자 의 툴 을 제공 합니다 . 
 튜토리얼 들 
 HTML 5 Boilerplate – 이 프로젝트 는 HTML 5 , jQuery 에 기초 한 웹 어플리케이션 과 웹 사이트 를 빠르 게 개발 하 는 데 목적 을 둔 프로젝트 입니다 . 코드 마다 모범 사례 가 많이 있 기 때문 에 읽 을 가치 가 있 습니다 . 
 A List Apart – 이 발행 물 은 웹 개발자 와 사람 들 을 목적 으로 하 고 있 습니다 . HTML 과 CSS 를 활용 한 많 은 유용 하 고 중요 한 방법 과 사례 가 이곳 에 발행 되 어 있 습니다 . 
 Dive into HTML 5 – 책 이름 과 가 은 이 사이트 는 특히 나 HTML 5 에 중점 을 두 고 있 어 아마 초보 자 들 이 접하 기 에 는 힘들 수 도 있 습니다 . 하지만 이 사이트 는 정확 하 고 잘 쓰여졌 습니다 . 
 CSS Zen Garden – “ CSS 기반 의 디자인 을 통해 시각 적 인 효과 를 낼 수 있 습니다 . ” 이 사이트 는 HTML 4 와 CSS 2 로 할 수 있 는 놀라운 것 들 을 보여 줍니다 . 
 24 Ways – 개발자 들 의 캘린더 로 , 잘 알려진 웹 개발자 들 의 흥미 로운 글 들 을 모아서 보여 줍니다 . 
 quirksmode . org – 브라우저 와 호환 성 을 위한 사이트 입니다 만약 여러분 의 페이지 가 IE , 파폭 오페라 등 에서 차이점 을 보 고 싶 다면 이곳 을 방문 해 보 세요 . 
 History of the WWW – 1995 년 부터 웹 의 역사 에 대해 W 3 C 의 괜찮 은 소개 글 을 보여 줍니다 . 
 zvon . org – 만약 ‘ 레퍼런스 ’ 와 ‘ 튜토리얼 ’ 을 찾 고 있 다면 이곳 을 들러 보 세요 . 따라 하 기 쉽 지 는 않 지만 , 이곳 의 자료 는 꽤 나 정확 합니다 . 
 Jacob Nielsen ’ s Alertbox – 꽤 비판 적 인 시각 에 도 불구 하 고 이 제이콥 닐슨 의 개인 페이지 는 웹 과 관련 된 괜찮 은 연구 결과 를 모아서 보여 줍니다 . 
 Periodic Table of HTML Elements – HTML 5 의 모든 요소 에 대해 직관 적 이 고 훌륭 하 게 보여 주 는 사이트 입니다 . 
 CSSPlay – 많 은 최신 CSS 의 트릭 을 다루 는 스튜 니콜 의 공간 입니다 . 
 w 3 . org / TR – W 3 C 의 모든 규격 의 명세서 가 있 습니다 . ( 최신 의 XML , HTML 그리고 CSS 에 관련 된 명세 ) 
 w 3 . org / TR / html 4 – HTML 4 의 모든 엘리먼트 와 속성 에 대해 설명 해 놓 은 공식 명세서 입니다 . 
 추가 로 whatWG . org 은 W 3 C 의 XHTML 2 에 반대 하 고 HTML 5 를 응 호 하 는 다른 집단 입니다 . 이 들 의 맴 버 는 대부분 브라우저 의 밴 더 들 입니다 . 
 w 3 . org / TR / CSS 2 – 공식 CSS 2 . 0 명세서 입니다 . 
 RFC 1738 – URL 이 어떻게 구성 되 어 있 는지 를 알려 줍니다 . 
 RFC 1945 – HTTP 1 . 0 을 정의 하 는 인터넷 을 통한 프로토콜 의 전송 을 설명 해 줍니다 . RFC 2616 는 HTTP 1 . 0 의 후임 격 인 HTTP 1 . 1 의 정의 입니다 . 
 ECMAScript Specification – ECMAScript 는 자바 스크립트 의 표주 노하 된 버전 입니다 . 솔직히 저 는 이 를 거의 본 적 은 없 습니다 . 대부분 저 는 the reference on mozilla . org 를 이용 했 지요 . 
 Likewise for the DOM . 이러 한 돔 의 공식 사양 은 W 3 C 에 흩어져 정의 되 어 있 지만 오래 전 에 네츠 케이프 와 인터넷 익스플로러 는 DOM 의 자신 들 의 버전 을 구현 했 습니다 . 
 php . net – PHP 의 공식 홈페이지 이 며 공식 문서 들 이 있 습니다 . 
 Unicode Consortium – 만약 여러분 이 아스키 의 세계 를 떠나 다국적 입력 을 하 게 된다면 , 반드시 UTF - 8 과 유니코드 를 잘 숙지 해야 할 것 입니다 . 최대한 빨리 그 들 과 친구 가 되 세요 . 
 Smashing Magazine – 저 는 종종 웹 디자인 과 프론트 - 엔드 개발 에 대한 흥미 로운 기사 를 이곳 에서 찾 곤 합니다 . 
 JSFiddle – 이 사이트 는 HTML , CSS 그리고 자바 스크립트 를 혼합 하 여 즉시 보여 줍니다 . 간단 한 코드 조각 으로 테스트 하 기 에 는 충분 합니다 . ( 예 를 들 어 스텍 오버 플로우 닷컴 의 몇몇 코드 들 같이 ) 
 XAMPP – 윈도우 나 맥 의 환경 에서 APM ( Apache , Php , Mysql ) 을 간단히 설치 할 수 있 습니다 . 
 Microformats . org – 이 사이트 는 중상 급 유저 를 위한 사이트 로 , 마이크 로 포 멧 은 HTML 안 에서 기계 와 인간 이 읽 을 수 있 는 데이터 를 표현 하 려 합니다 . 게다가 이러 한 방법 으로 어떻 게 HTML 요소 들 과 속성 들 이 함께 사용 되 는지 를 충분히 배울 수 있 습니다 . 
 CSS Resetr – CSS 리셋 은 브라우저 의 기본 속성 들 이 표현 할 수 있 는 스타일 시트 부분 을 점선 으로 보이 게 합니다 . 이 를 통해 각각 의 브라우저 의 차이점 을 알 수 있 습니다 . 
 FontSquirrel @ font - face generator – 여기 는 CSS 2 . 1 의 @ font - face 속성 을 테스트 할 수 있 는 좋 은 공간 입니다 . 소스 를 보 면 좋 은 영감 을 얻 을 수 있 을 겁니다 . 이 와 비슷 하 게 Google WebFonts Directory 를 웹 사이트 에 응용 할 수 도 있 습니다 . 
 When can I use … – 이곳 은 CSS 3 와 최신 의 다른 속성 들 이 어떤 브라우저 에서 얼마나 지원 되 는지 를 차트 로 보여 줍니다 . 
 FireBug – 만약 여러분 이 파이어폭스 개발자 라면 , 이 애드온 이 없이 는 어디 웹 서핑 할 생각 마십쇼 . 저 만 믿 으세요 . ( 그리고 대부분 의 사람 들 이 그렇 게 합니다 . ) ( 번역 주 : 전 파폭 을 안 써서 잘 . . 모르 겠 지만 파이 어 버그 가 짱 인 듯 합니다 . ) 
 The Elements of Typographic Style Applied To The Web – 이 웹 사이트 는 “ 타이포 그라피 스타일 의 요소 ” 에 대해 CSS 와 웹 기술 을 적용 한 현명 한 방법 과 힌트 를 제공 합니다 . ( 로버트 브링 허스트 가 가볍 게 이 를 읽 으라고 제안 했 습니다 . ) 
 StackOverflow 닷컴 의 괜찮 은 Q & A 
 사실 , 저 는 HTML 이나 CSS 를 책 을 통해 배운 적 은 없 습니다 . 그래도 HTML 4 나 CSS 2 는 새로운 기술 에 꽤 나 유연 하 게 대처 해야 합니다 . 저 는 맹목 적 으로 오레일리 사 에서 출판 한 책 을 추천 하 고 싶 습니다 . 꽤 많 은 책 들 이 모두 잘 쓰여져 있 고 기술 적 으로 도 정확 합니다 . 
 다른 몇 명 의 유저 들 이 추천 하 는 책 들 : 
 Smashing CSS by Eric A . Meyer 
 The Web Designer ’ s Idea Book Vol . 2 by Patrick McNeil 
 하지만 계속 배우 고 , ‘ 소스 보 기 ’ 메뉴 를 자주 활용 하 고 , 계속 질문 하 세요 ( 여기 , 스텍 오버플로 어 닷컴 에 , 그리고 많 은 흥미 있 는 코멘트 들 이 달릴 것 이 며 , 구글 에 물 어 보 면 흥미 로운 포스팅 을 볼 수 있 을 껍니다 . ) 여러분 은 이러 한 세상 에서 사용 자 경험 과 정보 를 만들 어 가 는 최고 의 사람 입니다 . 웹 개발 은 재밌 습니다 ! 
 팁 & 강의 / 
 내 홈페이지 에 HTML 5 뱃지 ( badge ) 를 달아보 자 . 
 드림 위버 로 HTML 5 개발 하 기 . 
 HTML 5 브라우저 별 호환 비교 & 샘플 사이트 
 ‹ PhoneGap 의 플렛 폼 별 지원 현황 	 › HTML 5 Rocks