Learn HTML & CSSHTML 소개
HTML 안내서에 오신 것을 환영합니다! 저는 주노예요. 여기 와주셔서 정말 기뻐요. 사람들이 처음으로 웹 페이지를 작성하는 걸 돕는 일이 제가 가장 좋아하는 일이고, HTML이 꺾쇠괄호로 가득한 벽처럼 보이던 것에서 이해가 되는 무언가로 바뀌는 순간을 지켜보는 건 아무리 봐도 질리지 않아요.
웹 페이지가 정말로 무엇인지부터 차근차근 시작해서, 아주 작은 조각들을 하나씩 쌓아 올려볼 거예요. 경험은 전혀 필요하지 않아요.
여기서는 아무리 기본적인 질문이라도 물어봐도 괜찮으니, 여러분만의 속도로 나아가면 돼요. 함께 끝까지 가봅시다!
이 안내서는 웹 개발을 처음 시작하는 모든 분을 위한 것입니다. HTML은 웹의 첫 번째 언어입니다. 페이지에 무엇이 있는지, 제목과 문단부터 이미지, 링크, 버튼까지를 설명하는 순수한 텍스트입니다. 페이지를 꾸미거나 상호작용을 넣기 전에 먼저 그 페이지에 무엇이 담겨 있는지를 기술해야 하는데, 그 기술이 바로 HTML입니다. 앞으로 계속 등장할 두 용어에 대해 잠깐 짚어두겠습니다. 브라우저는 Chrome이나 Safari처럼 HTML을 읽어서 페이지를 그려주는 프로그램이고, 엘리먼트는 제목이나 문단처럼 페이지를 이루는 하나의 이름 붙은 조각을 말합니다. 여기서 다루는 모든 개념은 깊이 있게 온전히 설명되며, 예제와 함께 나중에 빠르게 답을 찾아볼 수 있는 검색 자료로도 쓸 수 있습니다.
시작하는 데 코딩 경험이 전혀 필요하지 않습니다. 파일에 텍스트를 입력할 수 있다면 첫 챕터들을 따라가는 데 필요한 건 이미 다 갖춘 셈이고, 그 외의 것들은 필요할 때마다 하나씩 소개됩니다. HTML은 거의 모든 웹 개발자가 출발하는 지점입니다. 세상의 모든 웹사이트는, 아무리 복잡해 보여도 결국 HTML 위에 지어져 있기 때문입니다.
이 안내서는 기초부터 차근차근 쌓아 올라갑니다. 페이지를 구조화하고 텍스트를 마크업하는 방법, 링크와 미디어를 추가하는 방법, 시맨틱으로 마크업에 진짜 의미를 부여하는 방법, 방문자로부터 입력을 받는 폼을 만드는 방법, 그리고 누구나 접근할 수 있고 검색 엔진도 쉽게 이해할 수 있는 페이지를 만드는 방법을 배우게 됩니다. 각각의 개념은 그 자체로는 작지만, 이것들이 쌓이면 실제로 배포할 수 있는 페이지가 됩니다.
이 안내서의 방식은 HTML의 각 요소가 무엇을 하는지뿐 아니라 왜 그렇게 하는지를 설명하는 것입니다. 예제에서 태그를 그대로 복사해서 화면에 뭔가 나타나게 하는 건 누구나 할 수 있습니다. 그것과 읽기 쉽고 접근성 있고 수정하기 쉬운 페이지를 만드는 것 사이의 거리를 좁혀주는 건, 그 마크업이 브라우저에게, 스크린 리더에게, 그리고 나중에 이걸 수정할 다음 사람에게 어떤 의미인지를 이해하는 일입니다. 그 이해야말로 어떤 프로젝트보다 오래 남습니다.
안내자를 만나보세요
이 안내서는 세 명의 안내자가 함께 진행하며, 여러분이 누구와 함께할지 직접 선택합니다. 내용 자체는 모두에게 동일하고, 안내자에 따라 설명하는 어투가 달라지며, 내용이 달라지는 페이지에서는 각 섹션을 얼마나 깊이 다룰지도 달라집니다.
어느 페이지에서든 상단의 선택 메뉴에서 언제든 안내자를 바꿀 수 있고, 우측 하단의 Preferences를 열면 안내자, 언어, 글꼴 크기를 바꿀 수 있습니다.
준비가 되었다면, 이제 안내서가 본격적으로 시작됩니다. 다음 챕터인 HTML이란 무엇인가에서는 HTML이 실제로 무엇인지, 그리고 앞으로 전체 과정의 기반이 되는 태그, 엘리먼트, 속성이라는 작은 용어들을 다룹니다.
직접 만들면서 배우고 싶으신가요?Scrimba의 무료 HTML/CSS 강좌는 5개의 프로젝트와 75개 이상의 인터랙티브 챌린지를 통해 같은 내용을 다룹니다.