한빛출판네트워크

스토리가 있는 HTML과 CSS 학습서

“『Head First HTML and CSS』는 웹 페이지 마크업과 프레젠테이션에 관한 진보적이고 현대적인 내용을 배울 수 있도록 구성되어 있어 독자들이 겪을 수 있는 어려움을 해소해 줍니다. 풍부한 볼거리와 사소한 변경사항을 브라우저로 곧바로 확인해 새로운 개념을 이해하게 하는 점진적 학습기법을 통해 체계적으로 내용을 파악할 수 있도록 도와줍니다.”
- 대니 굿맨, 『Dynamic HTML: The Definitive Guide』저자

『Head First HTML with CSS & XHTML: 웹2.0 시대의 웹 표준 학습법』의 개정판. 전체를 관통하는 이야기가 있어 아주 쉬운 기초 HTML을 만드는 일부터 구조와 디자인을 분리하고 각종 효과를 주는 방법까지 소설을 읽듯 술술 읽을 수 있습니다. 책 속의 그림과 표와 짤막한 코드를 보며 즐기다 보면 어느새 HTML 기본을 배울 겁니다. 

다음의 질문에 모두 “예”라고 대답하는 독자를 위한 책입니다.

• 웹 브라우저와 텍스트 에디터를 사용해 보았습니까?
• 최고의 기술과 가장 최신의 표준을 사용하여 웹 페이지를 만드는 방법을 배우고 이해하고, 기억하기를 원하십니까?
• 재미없고 따분하고 학구적인 강의보다는 활기 넘치는 대화식 커뮤니케이션을 더 좋아하나요?

[정오표 다운로드]

Head First HTML and CSS(개정판) 1쇄 정오표 다운로드(2013년 6월 5일 업데이트)

서문

__ HTML과 CSS에 빠져봅시다. 여러분은 뭔가를 배우기 위해 이 책을 보고 있을 거예요. 하지만 여러분의 머리에서는 배운 내용을 잘 받아들이려고 하지 않습니다. 아마 ‘어떤 야생동물을 주의해야 할까? 왜 안전장비를 잘 갖추고 스노우보드를 타야 하는 걸까?와 같은 더 중요한 내용을 기억해야 하니까 두뇌의 자리를 좀 남겨 둬야 돼’라고 생각하고 있을지도 모르죠. 이제 여러분의 두뇌를 교란시켜서 HTML과 CSS가 목숨이 달린 중요한 사안이라고 생각하게끔 만들어 봅시다.

1장 웹 언어

__ 여러분의 웹 진출을 막고 있는 유일한 방해물은 바로 전문 용어를 배우는 것입니다. 자, 언어 수업 시간이 되었군요, 바로 HTML(HyperText Markup Language, 하이퍼텍스트 마크업 언어)을 배울 준비를 합시다. 이 장을 끝내면 여러분은 몇 가지 기초적인 HTML 요소를 이해할 수 있을 뿐 아니라, 간단한 스타일을 갖춘 HTML을 작성할 수 있을 거예요. 그리고 이 책이 끝날 때쯤이면 여러분은 웹 마을에서 자란 사람처럼 HTML을 말할 수 있을 거예요.

2장 하이퍼텍스트와 함께 하는 심층학습

__ 하이퍼텍스트(HyperText)라고 들어봤나요? 그게 대체 무엇일까요? 하이퍼텍스트는 유일하게 웹 전체의 기초가 되는 것입니다. 우리는 1장에서 HTML을 사전 점검해서 마크업 언어(HTML에서 ‘ML’)가 웹 페이지의 구조를 설명한다는 사실을 알아보았습니다. 이제부터는 단일 페이지에서 벗어나 다른 페이지들과 연결(link)할 수 있게 해주는 HTML의 ‘HT’인 하이퍼텍스트(HyperText)를 살펴보겠습니다. 더불어 아주 강력한 새로운 요소인 를 만나보고, ‘상대적인(relative)’ 존재가 된다는 것이 얼마나 매력적인지 배울 것입니다. 자, 안전벨트를 단단히 매시고 이제 하이퍼텍스트를 배우러 떠나겠습니다.

3장 블록 만들기

__ 이 책에서 실제로 웹 페이지를 만든다고 들었는데요? 태그, 요소, 링크, 경로 등등… 여러분은 이미 많은 것을 배웠습니다. 하지만 실제로 멋진 웹 페이지를 만들지 않는다면 아무런 소용이 없을 거예요. 이번 장에서는 웹 페이지를 만드는 데 뛰어들어 볼 것입니다. 웹 페이지를 가지고 개념을 잡으며 설계를 하고, 기초를 다지며, 웹 페이지를 건설하고 마무리 손질까지 할 것입니다. 단단한 모자와 도구 상자만 있으면 됩니다. 새로운 도구들을 추가하고 웹 페이지에 숨겨진 지식을 알게 되면서 ‘툴 맨(The Toolman)’의 팀 테일러가 된다는 자부심도 느껴볼 수 있을 거예요.

4장 인터넷에 연결하기

__ 웹 페이지들은 인터넷에서 제공되는 최상의 요리입니다. 지금까지는 여러분의 컴퓨터에 HTML 페이지를 만들었습니다. 그런데 여러분 컴퓨터에 있는 페이지들과만 링크를 만들었지요? 이제 이 모든 것을 바꾸려고 합니다. 이번 장에서는 여러분의 친구들, 팬, 고객들이 실제로 볼 수 있도록 웹 페이지를 인터넷에 올려볼 거예요. 또한 h, t, t, p, :, /, /, w, w ,w.란 코드를 해킹하여 다른 페이지와 어떤 식으로 연결되는지 그 미스테리를 밝힐 것입니다. 자, 짐을 챙기세요. 우리의 다음 종착역은 웹 마을입니다. 경고: 일단 웹 마을에 들어서면 절대 돌아올 수 없으니, 도착하면 엽서라도 한 장 보내주세요.

5장 웹 페이지에 이미지 추가하기

__ 활짝 웃으며 ‘김치’라고 해 보세요. 실제로 웃으면서 ‘gif’, ‘jpg’ 혹은 ‘png’라고 해보세요. 위에서 말한 것은 웹에서 ‘사진 현상’을 할 때 선택할 수 있는 것입니다. 이번 장에서는 웹 페이지에 여러분의 첫 번째 미디어, 바로 이미지를 추가하는 것에 관한 모든 것을 배울 것입니다. 온라인에 올리는 데 필요한 디지털 카메라 사진을 가지고 있나요? 문제 없습니다. 여러분의 페이지에 올릴 로고가 있나요? 그것도 처리할 수 있습니다. 하지만 이 모든 것을 하기 전에, 아직  요소를 정식으로 소개받지 못했나요? 정말 미안합니다. 무례하게 대하려고 했던 것은 아닙니다. 다만 ‘정식 소개’란 것을 경험해 보지 못했을 뿐이죠. 저희 잘못에 대한 보상으로, 이 장 모두를  요소에 헌납하겠습니다. 이 장이 끝날 때쯤에는  요소와 속성을 어떻게 사용하는지에 대한 모든 내용을 알게 될 것입니다. 또한 브라우저가 이미지를 회수하고 보여주기 위해 이 작은 요소가 추가적인 작업을 어떤 식으로 하는지에 대해서도 정확히 알게 될 거예요.

6장 표준, 신뢰성, 기타 등등

__ HTML에 관하여 더 알아야 할 것이 있나요? 지금까지 HTML 마스터 과정을 잘 마쳤습니다. 이제 CSS로 옮겨가서 이 재미없는 마크업을 멋지게 보이도록 만드는 방법을 배워야 할 때가 되지 않았을까요? 그러기 전에 먼저 여러분이 작성한 HTML이 세상에 나가도 손색이 없는지 확실히 점검할 필요가 있습니다. 그렇다고 오해는 하지 마세요. 지금까지 여러분은 최고급 HTML을 작성해왔습니다. 하지만 소위 ‘산업 표준’에 맞게 단장하려면 몇 가지 더 필요합니다. 그리고 최신의, 가장 훌륭한 HTML 표준, 소위 HTML5를 사용하고 있는지도 확인해 볼 필요가 있죠. 이렇게 하면 여러 종류의 브라우저에서 좀 더 일관성 있게 보이는지는 말할 것도 없고, 최신 모바일 기기에서 제대로 동작하는지 확인할 수 있습니다. 또한 페이지가 더 빠른 속도로 열리며 CSS와 궁합이 잘 맞는다는 보장을 받고, 표준의 변화에 따라 미래에도 같이 발맞춰 나가는 페이지를 만들 수 있을 것입니다. 준비하세요. 이번 장에서 여러분은 웹 떠돌이에서 웹 전문가로 발돋움할 수 있을 것입니다.

7장 CSS 시작하기

__ 이 책에 CSS가 있다고 들었습니다. 지금까지 웹 페이지의 구조를 생성하기 위해 HTML을 배우는 데 집중했습니다만, 여러분도 알다시피 브라우저 스타일에 대해서는 유감스러운 점이 좀 많습니다. 물론, 복장 단속 경찰관을 부를 수도 있겠지만 그렇게까지 할 필요는 없습니다. CSS를 사용하면 HTML을 변경하지 않고도 웹 페이지의 프레젠테이션을 완벽하게 제어할 수 있습니다. 정말 그렇게 쉽게 할 수 있을까요? 이제 여러분은 새로운 언어를 배워야만 할 것입니다. 결국 웹 마을은 2개 국어를 사용하는 마을이 되겠죠. CSS를 배우기 위해 이 장의 지침을 읽고 나면, 여러분은 CSS에 대해 전문가와 대화를 할 수 있을 정도의 실력을 갖추게 될 것입니다.

8장 폰트와 색으로 장식하기

__ 여러분은 CSS 수업을 훌륭히 잘 받고 있습니다. 여러분은 이미 CSS에 대한 기본기를 다졌고, CSS 규칙을 만들어 요소의 스타일을 명시하고 선택하는 방법도 알고 있습니다. 이제 어휘력을 향상시킬 때가 되었습니다. 즉, 몇 가지 새로운 속성을 골라 어떤 동작을 하는지 알아본다는 의미입니다. 이번 장에서는 텍스트를 표현하는 데 영향을 미치는 가장 일반적인 속성 중 일부를 알아볼 것입니다. 이를 위해 여러분은 폰트와 색에 관한 몇 가지를 배워야 합니다. 다른 사람들이 사용하는 폰트, 혹은 문단과 제목에 대해 브라우저가 기본값으로 사용하는 스타일과 투박한 크기에 얽매일 필요가 없다는 것을 알게 될 것입니다. 또한 눈을 만족시키는 것 이상으로 색에 대해 많은 것을 배울 거예요.

9장 박스 모델

__ 더 향상된 웹을 건축하려면 건축 자재에 대해 알아야 할 필요가 있습니다. 이번 장에서는 건축 자재인 HTML 요소에 대해 좀 더 자세히 살펴볼 것입니다. 블록과 인라인 요소를 현미경에 가져다 놓고 이것들이 무엇으로 이루어졌는지 자세히 조사할 것입니다. 또한 CSS로 요소를 만드는 방법에 대한 모든 측면을 어떻게 제어할 수 있는지 알게 될 것입니다. 하지만 여기서 멈추지는 않을 거예요. 여러분은 또한 요소에 유일한 식별자를 주는 방법도 배울 것이며, 스타일시트 여러 개를 언제, 왜 사용하는지도 배울 것입니다. 자, 이제 페이지를 넘겨 요소와 친해져 봅시다.

10장 div와 span 요소

__ 큰 공사를 준비할 시간이 되었습니다. 이번 장에서는 와 이라는 두 가지 새로운 HTML 요소를 공개하겠습니다. 이들은 단순한 2×4인치짜리 나무라기보다는 완전히 달궈진 강철 기둥이라 할 수 있죠.

와 을 이용해 몇 가지 중요한 구조물을 제작할 것입니다. 일단 이 구조물이 자리를 잡으면 여러분은 이 구조물을 새롭고 강력한 방법으로 꾸밀 수 있을 거예요. 이제 여러분의 CSS 도구상자가 채워지기 시작할 테니 모든 속성을 훨씬 쉽게 명시할 수 있는 몇 가지 지름길을 선보일 때가 되었습니다. 또한 이 장에서 의사클래스(pseudo-classes)라는 특별 손님을 초대했습니다. 의사클래스를 이용해 여러분은 아주 흥미로운 선택자를 생성할 수 있을 거예요(만약 ‘의사클래스’를 여러분의 다음 밴드 이름으로 쓰려고 생각하고 있다면, 너무 늦었군요. 우리가 좀 더 빨랐습니다).

11장 레이아웃과 포지셔닝

__ 새로운 기법으로 HTML 요소를 가르칠 시간이 되었습니다. 이젠 HTML 요소를 가만히 쉬고 있도록 내버려 두지 않을 것입니다. 이제 일어나서 실제 레이아웃이 있는 페이지를 생성하는 것을 도와야 할 때가 되었습니다. 어떻게 도울까요? 여러분은 와 의 구조적인 요소에 대한 직관력이 좋아졌으며, 박스 모델이 어떻게 동작하는지 모든 것을 알고 있습니다. 그렇죠? 그럼, 이제 실질적으로 정교한 디자인을 하기 위해 이 모든 지식을 활용할 때가 되었습니다. 지금 단지 배경과 폰트 색깔에 관해 더 얘기하려는 것이 아니라 여러 개의 칸(컬럼)으로 구성된 레이아웃을 사용하는 완전히 전문적인 디자인에 관해 얘기하고 있는 것입니다. 이 장에서 지금까지 여러분이 배웠던 내용을 모두 활용할 수 있을 거예요.

12장 HTML5 마크업

__ 여러분도 HTML5에 대한 소문을 들어봤을 거예요. 지금까지 이 책과 함께 기나긴 시간을 보내면서, 정말 이 책을 잘 산 것인지 의문이 들었을 거예요. 한 가지 확실한 점은, 여러분이 이 책에서 배운 모든 내용은 HTML이고, 좀 더 명확하게는 HTML5 표준도 만났습니다. 하지만 아직 이 책에서 다루지 않은 HTML5 표준에 추가된 HTML 마크업의 새로운 측면이 몇 가지 있습니다. 그래서 이 장에서 그 내용을 다루어보려 합니다. 새로 추가된 기능 대부분은 지금도 진화하고 있고, 여러분이 이 책에서 했던 모든 어려운 작업을 새 기능을 이용하면 쉽게 처리할 수 있을 거예요. 혁명적인 기능(video 같은)도 일부 있는데, 이 역시 이 장에서 다룰 것입니다. 그럼 새로 추가된 내용을 살펴보도록 하죠!

13장 테이블과 더 많은 리스트

__ 테이블처럼 걷고 테이블처럼 말한다면... 살다 보면 한 번쯤은 테이블 데이터를 다뤄야 할 때가 옵니다. 회사의 지난해 재고나 바이늘메이션 카탈로그(걱정 마세요, 인형을 모으고 있다고 말하지 않을게요)를 보여주는 페이지를 생성해야 한다면, HTML로 이를 보여줘야 할 것입니다. 그런데 어떻게 해야 할까요? 마침 좋은 물건이 나왔습니다. 지금 주문하세요. 이 장에서 HTML 테이블 안으로 여러분의 데이터를 어떻게 넣는지 그 비밀을 밝혀 드리죠. 이것만이 아닙니다. HTML 테이블을 꾸밀 수 있는 귀중한 팁도 드리겠습니다. 지금 주문하시면, 특별 보너스로 HTML 리스트를 꾸미는 지침서도 얹혀 드리죠. 주저하지 마시고 지금 전화하세요.

14장 HTML 폼

__ 지금까지 여러분의 모든 웹 통신은 페이지에서 방문자로 향하는 단방향 통신이었습니다. 어머나, 여러분이 만든 사이트를 방문하는 방문자의 피드백을 받을 수 있다면 근사하지 않겠어요? 그래서 바로 HTML 폼(form)이 등장하게 되었습니다. 일단 폼이 있는 페이지가 활성화되면(웹 서버의 도움을 약간 받아), 여러분의 페이지는 고객들의 피드백을 수집해서 온라인 주문을 받고, 다음 단계로 온라인 게임으로 이동하거나 ‘hot or not’(역주, 미국에서 얼굴을 평가해 주는 사이트) 콘테스트에서 투표 결과를 수집할 수 있습니다. 이 장에서 여러분은 웹 폼을 생성하기 위해 협력하고 있는 HTML 요소로 이루어진 전체 팀을 만나게 될 것입니다. 또한 폼을 지원하기 위해 서버의 무대 뒤에서 무슨 일이 일어나고 있는지도 배우고, 이 폼을 멋지게 유지하는 법도 다루도록 하죠.

15장 부록: 아직 못다한 이야기

__ 지금까지 많은 내용을 다루었고, 이 책도 거의 막바지에 이르렀군요. 아, 여러분이 그리울 거예요. 하지만 여러분을 떠나 보내기 전에, 좀 더 여러분을 준비시키고 세상 밖으로 내보내야 할 것 같습니다. 부록 분량이 많지 않아 여러분이 필요한 모든 것을 다 맞춰드릴 수는 없을 거예요. 애초에는 폰트 크기를 0.00004까지 줄여 HTML과 CSS에 관해 알아야 할 모든 것(앞에서 다루지 않은 것)을 준비해 놨었습니다. 모든 내용이 들어가긴 했지만, 글자가 너무 작아서 도저히 읽을 수가 없더군요. 그래서 많은 내용을 버리고 딱 10가지 주제만 담았습니다.