If you're seeing this message, it means we're having trouble loading external resources on our website.

웹 필터가 올바르게 작동하지 않으면 도메인 *. kastatic.org*.kasandbox.org이 차단되어 있는지 확인하세요.

주요 내용

다음으로 배울 것

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

HTML 태그 더 알아보기

  • 폼 태그: <button>이나 <input>은 웹에서 폼을 만드는데 사용하는 수많은 태그 중 하나입니다. 폼 태그는 보통 서버에 데이터를 전달할 때 사용하는데, 칸아카데미에서는 이를 허용하지 않습니다. 하지만 칸아카데미 HTML/JS 과정에서는 JS로 게임을 만들 때 폼 태그를 사용해 볼 수 있습니다. 이 슬라이드로 폼 태그에 대해 더 알아보세요. Codecademy에서 PHP, Python, Ruby 등의 서버 사이드 언어를 배워 보세요.
  • Iframes: <iframe>태그는 웹 페이지에 다른 웹 페이지를 프레임에 넣을 때 사용합니다. 구글 맵스나 유튜브 동영상 등을 임베딩 할 때 유용합니다. 이 태그는 보안상의 이유로 칸아카데미에서는 사용할 수 없고, 다른 곳에서 사용해 볼 수 있습니다. 이 슬라이드로 더 알아보세요.
  • Multimedia tags: The <audio><video> 태그는 최신 브라우저들만 지원하고, 웹 페이지에서 오디오나 비디오 파일을 재생할 때 사용합니다. 이 태그는 <iframe> 태그처럼 칸아카데미에서는 사용할 수 없고, 다른 곳에서 사용해 볼 수 있습니다. 이 슬라이드로 더 알아보세요.
  • 새로운 시맨틱 태그: 최근 몇 년 동안 브라우저들은 "HTML5" 규격에 맞춰 특정 상황에서<div> 대신 사용할 수 있는 <article>, <aside>, <nav>등의 시맨틱 태그를 추가했습니다. 여기서 관련 자료를 확인해 보세요. 또한 이 플로차트는 언제 무엇을 사용해야 하는지 알려 줍니다.

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

칸아카데미에서 아래 나와있는 모든 것을 실험해 볼 수 있습니다:
  • CSS3: 오랫동안 브라우저에서 지원되어 온 CSS는 칸아카데미에서 배울 수 있지만, "CSS3" 규격에 속하는 수많은 새로운 CSS 속성과 선택자가 많이 있습니다. 새로운 브라우저 버전이 나올 때마다 이에 대한 지원을 추가합니다. 이 슬라이드에서 CSS 선택자에 대해 알아볼 수 있으며 이 슬라이드에서는 CSS 속성에 대해 알아볼 수 있습니다. 브라우저 지원 여부는 caniuse.com에서 찾아볼 수 있습니다.
  • 미디어 쿼리(Media queries): 웹 페이지를 작은 크기로 보거나 인쇄할 때처럼, 미디어 쿼리는 각 상황마다 별도의 CSS를 할당하고 싶을 때 사용하는 기법입니다. W3C에서 더 배워보세요.
  • 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는 계속 변하고 있습니다. 최신의 정보를 알기 위한 좋은 방법은 기사와 시험용 프로그램들로 링크되는 Frontend Focus와 같은 뉴스레터에 가입하는 것입니다. 물론 새로운 것을 배울 때마다 어떻게 동작하는지 잘 이해하기 위해 테스트해봐야 합니다.
연습하고 연습하고 또 연습하세요!

대화에 참여하고 싶으신가요?

영어를 잘 하시나요? 그렇다면, 이곳을 클릭하여 미국 칸아카데미에서 어떠한 토론이 진행되고 있는지 둘러 보세요.