HTML과 CSS의 기초를 배운 것을 축하합니다! 이제 인터넷에서 볼 수 있는 웹 페이지가 어떻게 짜여 있는지 이해하고 이런 웹 페이지들을 보면 어떤 HTML 태그와 CSS 속성이 쓰였는지 알아볼 수 있을 것입니다.
그러나 아직 HTML과 CSS을 기반으로 구축하기 위해 할 수 있는 것들이 아직 많이 남아있습니다. 계속해서 읽으세요!

HTML 태그 더 알아보기

  • 폼 태그(Form tags): <button><input>과 같은 웹 형태를 생성하기 위해 사용되는 일부 태그들이 있습니다. 폼 태그는 일반적으로 서버로 데이터를 다시 전송하는 데 사용됩니다. 이런 태그들은 칸 아카데미에서 활성화시키지 않습니다. 또한 폼 태그는 게임을 만들기 위해 JS와 함께 사용될 수 있습니다. 이 부분은 HTML/JS 과정에서 학습할 수 있습니다.  폼 태그에 대해 더 많은 사항은 본 슬라이드를 통해 더 배울 수 있습니다. PHP, Python, Ruby와 같은 서버쪽 언어는 Codecademy에서 배울 수 있습니다.
  • Iframe: <iframe> 태그는 웹 페이지 안의 또 다른 웹 페이지의 틀을 잡아주기 위해 사용되고 유튜브 동영상, 구글 맵스 등을 끼어 넣을 때 유용합니다. 이 태그는 현재 보안과 조정을 위해 Khan 아카데미에서는 비활성화되어 있으나 어디에서나 실험해볼 수 있습니다. 본 슬라이드를 통해 좀 더 배울 수 있습니다.
  • 멀티미디어 태그(Multimedia tags): <audio><video> 태그는 웹 페이지에서 오디오와 비디오 파일을 재생하는 방법으로 현재의 브라우저에서 지원됩니다. <iframe> 태그와 마찬가지로 멀티미디어 태그는 Khan 아카데미에서는 비활성화되어 있으나 어디에서나 이용될 수 있습니다. 본 슬라이드를 통해 좀 더 배울 수 있습니다.
  • 새로운 시맨틱 태그(New semantic tags): 지난 몇년 동안 브라우저에 개발자들을 위한 "HTML5" 기능의 일부로 <article>, <aside>, <nav> 등과 같이 <div> 대신에 사용할 수 있는 새로운 시맨틱 태그가 추가 되었습니다. 시맨틱 태그를 이용할 때 언제 써야하는지 도와주는 유용한 플로우 차트를 포함하는 여러 가지 새로운 시맨틱 태그와 관련된 내용을 링크에서 찾아볼 수 있습니다.

그 외 CSS 선택자(selectors) 와 속성(properties)

칸아카데미에서 아래 나와있는 모든 것을 실험해 볼 수 있습니다:
  • CSS3: 수년 동안 브라우저에서 지원되어 온 CSS는 칸아카데미에서 배울 수 있습니다. 하지만 "CSS3"의 영역에 속하는 수많은 새로운 CSS 속성과 선택자가 많이 있습니다. 새로운 브라우저 버전이 나올 때마다 이에 대한 추가적인 지원을 합니다. 이 슬라이드에서 새로운 내용을 배울 수 있으며 브라우저마다 지원하는 것은 caniuse.com에서 찾아볼 수 있습니다.
  • 미디어 쿼리(Media queries): 웹페이지를 작은 크기로 보거나 인쇄할 때처럼, 미디어 쿼리는 어떤 다른 상황마다 별도의 CSS를 할당하고 싶을 때 사용하는 기법입니다. 이 슬라이드를 통해 더 배워보세요.
  • CSS 프레임워크(CSS frameworks): 프레임워크란 CSS 규칙과 클래스의 집합이며 많은 개발자들은 CSS를 빠르게 짜기 위해 CSS 프레임워크를 이용합니다. 가장 많이 사용되는 프레임워크는 Twitter Bootstrap입니다. 그러나, ZURB foundation, Pure CSS, Topcoat 등이 더 있습니다.

웹 페이지에서 JS 이용하기

웹 개발자는 JavaScript를 이용하여 사용자의 이벤트에 반응해서 서버로부터 역동적으로 데이터를 가져오는 인터랙티브한 웹 페이지를 만들 수 있습니다. 이런 페이지는 HTML 안에 <script> 태그를 내장시키고 태그 안에 JavaScript를 넣어서 구현합니다. 이후 JS 코드는 브라우저가 모든 웹 페이지에서 "DOM API"를 사용합니다. DOM API는 브라우저가 개발자가 쿼리를 하고 페이지를 조작할 수 있도록 모든 웹페이지에 존재하는 함수의 집합체입니다.
즉, 인터랙티브한 웹 페이지를 만들고 싶다면 JavaScript(칸아카데미에서 배울 수 있습니다.) 와 DOM API의 기본을 모두 알아야 합니다. (여기 있는 과정에서 배워보세요).

칸아카데미 외부에서 웹 페이지 만들기

칸아카데미에서 멋진 웹 페이지를 만들고, 배운 것을 커뮤니티와 공유하는 것도 좋지만, 여기를 벗어나 다른 코드 에디팅 환경을 경험하고 여기서는 쓰지 못하는 기능을 경험하는 것도 멋진 일입니다. 계속해서 브라우저에서 코딩을 하고자 한다면 (특히 크롬북(ChromeBook)을 이용한다면) JSBin.com, JSFiddle.net, Cloud9 IDE 또는 Mozilla Thimble을 사용해 보세요.
브라우저 외부에서 코딩을 하고자 한다면 IDE를 다운로드한 후 웹 페이지를 ".html" 파일로 저장하면 됩니다. 많이 사용하는 IDE로 Notepad++ (Windows only), SublimeText, Adobe Brackets, Coda, TextWrangler가 있습니다.

서버에 웹 페이지 호스팅하기

여기에서 여러분이 만든 웹 페이지는 칸아카데미의 자체 서버에서 호스팅합니다. 하지만 자신만의 웹 페이지를 구축하고 싶다면 이렇게 해보세요.
먼저 여러분의 사이트를 호스트 해줄 업체를 찾아야 합니다. 호스팅 업체는 매우 다양해서 각자 다른 호스팅 조건과 비용을 내걸고 있습니다.
그 후 "mycoolname.com"와 같은 도메인(domain) 이름을 만들어서 사이트가 여러분처럼 정체성을 갖도록 해야 합니다. 이것도 호스팅 제공자에게 맡길 수 있지만 보통은 별도의 도메인 네임 등록 대행 서비스를 활용합니다. 이 슬라이드에서 보다 많이 배울 수 있습니다.
일단 웹 호스팅이 되면 여러분은 FileZilla와 같은 FTP 클라이언트를 이용하여 파일을 서버에 전송할 수 있습니다. 이것은 서버에 직접 연결된 후 서버로부터 파일을 탐색, 다운로드, 업로드할 수 있도록 하는 프로그램입니다. 또한 SSH를 이용하여 서버에 접속한 후 그 서버에 있는 파일을 직접 편집할 수도 있습니다.

계속 배워나가세요

HTML과 CSS는 계속 변하고 있습니다. 브라우저가 자주 업데이트 되고있기도 하고 웹 개발 분야는 활발한 세계이기 때문입니다. 최신 소식을 제때 접할 수 있는 좋은 방법은 HTML5 weekly와 같은 뉴스레터를 구독해서 관련 기사와 데모 프로그램을 받아보는 겁니다. 물론 새로운 것을 배울 때마다 어떻게 동작하는지 잘 이해하기 위해 테스트해보는 것이 좋습니다.
연습하고 연습하고 또 연습하세요!
로딩 중