Head First HTML with CSS & XHTML - 웹2.0 시대의 웹 표준 학습법

Head First HTML with CSS & XHTML - 웹2.0 시대의 웹 표준 학습법

• 저자: 엘리자베스 프리먼, 에릭 프리먼
• 번역: 홍형경 역
• 출판사: 한빛미디어
• 출판일: 2006.05.31
• ISBN : 8979144105

 

 

책소개

모든 브라우저와 운영체제에서 통하는 웹 표준의 세계로 빠져 봅시다
전문가적 수준이 되어야 이해할 수 있는 웹 표준 관련 HTML 책을 읽는데 지쳤습니까?
그 렇다면 『Head First HTML with CSS & XHTML』을 집어 들고 실제로 HTML을 배울 때가 되었습니다. 이 책은 산업 표준에 맞는 웹 페이지들을 만들기 위해 필요로한 완벽한 학습 경험을 제공합니다. 하지만 여러분들은 단지 읽기만 하지는 않을 것입니다.

이 책에서 때로는 게임을 하고, 퍼즐을 풀며, 미스터리에 빠져들면서 지금까지 전혀 상상해오지 못했던 웹 페이지들을 만들게 될 것입니다. 또한 CSS와 함께 HTML이 동작하는 방법을 배우게 됩니다. 만약 CSS에 대해 들어보지 못했더라도 괜찮습니다(여러분들이 아직도 20세기에 살고 있다는 건 비밀로 해드리죠). 하지만 21세기형 웹 페이지를 만들고 싶다면 여러분은 CSS를 이해하고 알기를 원할 것입니다.

『Head First HTML with CSS & XHTML』는 웹 안전색(web safe color)이 여전히 문제가 될 것이라는 생각의 당혹감과 웹 페이지에서 태그를 빠뜨리는 어리석은 행동에서 벗어나게 해줄 것입니다. 무엇보다도, 여러분들은 절대 졸음에 빠지지 않고 HTML, XHTML 그리고 CSS를 배우게 될 것입니다. 헤드 퍼스트 시리즈를 한 권이라도 읽어본 독자라면, 이 책이 어떤 책일지도 쉽게 짐작할 수 있을 것입니다. 볼 거리가 많고, 머리 속에 쏙쏙 들어오는 방식으로 구성되어 있습니다. 최근의 신경생물학, 인지과학, 학습이론 연구를 바탕으로 만든 이 책을 읽다 보면 HTML과 CSS가 머리 속에 깊이 박혀서 쉽게 빠져나가지 않을 것입니다.

웹 페이지 제작에 숨겨진 진짜 비밀들을 알아보고, HTML 테이블에 관하여 여러분의 상사가 말하는 모든 것이 대부분 왜 잘못됐는지를 알아봅시다. 가장 중요한 것은, 무심코 여러분의 동료가 자신이 만든 HTML 코드를 보여주며 웹 표준이나 CSS를 외부 스타일 시트 파일과 연결한 방법에 대해 얘기할 때, 주눅들지 말고 자신의 의견을 말할 수 있어야 합니다.

 

목차

서문
누구를 위한 책일까요?
무슨 생각을 하고 있는지 다 압니다.
초인지
두뇌를 정복하는 방법
테크니컬 리뷰어
감사의 글

1장 웹 언어
비디오가 아닌 웹이 라디오를 삼켰습니다
웹 서버는 무슨 일을 할까요?
HTML 작성하기
브라우저가 생성하는 것들
스타버즈에서의 전성시대
스타버즈 웹 페이지 만들기
매킨토시에서 HTML 파일 만들기
윈도우즈에서 HTML 파일 만들기
한편 스타버즈 커피샵에서는…
브라우저에서 웹 페이지를 열어봅니다
작성한 웹 페이지 시운전
태그 해부
스타일 엘리먼트와의 만남
스타버즈에 스타일 추가하기
누가 무엇을 했을까요?
안방 토크
핵심 정리
연습 문제 정답

2. HTML에서 'HT' 알아보기
새롭게 향상된 헤드 퍼스트 라운지
새로운 라운지 만들기
지금까지 우리는 무엇을 했나요?
브라우저는 무슨 일을 할까요?
속성 이해하기
기술적인 난관
경로 탐색 계획
깨진 이미지 파일 복구하기
연습 문제 정답

3장 웹 페이지 만들기
시속 12마일의 속도로 일기를 웹 사이트로 변환하기
개략적인 디자인 스케치
스케치로부터 개요 잡기
개요를 웹 페이지로 변환
토니의 웹 페이지 시운전
[q]엘리먼트 알아보기
기다란 인용구
[blockquote] 추가하기
[q]와 [blockquote] 미스터리 뒤에 감춰진 진실
리스트를 만들기 위해 [p] 엘리먼트 사용하기
HTML 리스트를 만들기 위한 간단한 두 가지 단계
다른 엘리먼트 안에 하나의 엘리먼트를 넣는 것을 "중첩(nesting)"이라 부릅니다.
중첩 관계를 이해하려면, 그림을 그려라
중첩을 사용하여 태그들 일치시키기
인라인 혹은 블록?
연습 문제 정답

4장 웹 마을로의 여행
스타버즈(혹은 여러분 사이트)를 웹으로 가져가기
호스팅 회사 찾기
어떻게 하면 도메인 명을 얻을 수 있을까요?
이사하기
파일들을 루트 폴더로 가져가기
두 페이지에 걸쳐 FTP 설정하기
본업으로 돌아와서…
URL 중심가
HTTP 프로토콜이란 무엇인가?
절대 경로란 무엇일까요?
디폴트 페이지가 작동하는 방법
어떻게 다른 웹 사이트와 연결할까요?
카페인 버즈에 연결하기
꼼꼼하게 웹 페이지 마무리하기
페이지로 링크 걸기
목적지를 생성하기 위해 [a] 엘리먼트를 사용하자
목적지 앵커와 연결하는 방법
새 윈도우로 링크 걸기
타겟을 사용한 새 윈도우 열기
연습 문제 정답

5장 미디어와의 만남
브라우저가 이미지들을 다루는 방법
이미지는 어떻게 보여질까요?
이제 정식으로 소개하겠습니다: [img] 엘리먼트를 만나봅시다
항상 대체 수단을 제공하는군요
팬 사이트 만들기: myPod
와! 이미지가 너무 크군요
myPod HTML 수리하기
섬네일들을 사용한 사이트 재구축
섬네일을 링크로 변환하기
그러면, 이미지들 밖으로 어떻게 링크를 만들까요?
무슨 형식을 사용해야 할까요?
투명해지느냐, 불투명해지느냐? 이것이 문제로다…
잠깐만, 웹 페이지 배경의 색은 무슨 색인가요?
matte를 가진 로고 체크하기
myPod 웹 페이지에 로고 추가하기
연습 문제 정답

6장 진지해진 HTML
열람실 대화
HTML의 간단한 역사
웹 페이지가 브라우저를 쿼크 모드로 밀어 넣게는 할 수 없습니다
문서 타입 정의 추가하기
W3C 유효성 검사기(Validator) 알아보기
헤드 퍼스트 라운지 유효성 검사
휴스턴, 문제가 생겼다…
컨텐트 타입을 명시하기 위해 [meta] 태그 추가하기
유효성 검사기(그리고 보다 많은 종류의 브라우저)와 더불어 [meta] 컨텐트 태그와 행복하게 살기
과연 세 번째에는 행운이 올까요?
DOCTYPE을 strict로 변환하기
이제 유효성을 갖게 되었나요?
중첩 문제를 고칩시다
strict가 되기 위한 또 한 번의 기회
Strict HTML 4.01 안내서
안방 토크
HTML 고고학
연습 문제 정답

7장 HTML에 'X' 끼워 넣기
XML은 무엇인가?
HTML과 무슨 관련이 있을까요?
여러분은 왜 XHTML을 사용하기를 원하나요?
XHTML 1.0 체크 리스트
strict HTML에서 XHTML 1.0으로 가기
구식의 HTML 4.01 Strict
새롭게 개선된 XHTML 1.0
유효성 검증: HTML을 위한 것이 아닙니다
안방 토크
HTML 혹은 XHTML? 선택은 여러분의 몫입니다…
연습 문제 정답

8장 스타일 추가하기
여러분은 더 이상 캔자스에 있지 않습니다
웹 마을의 "시장" 엿듣기
XHTML과 함께 CSS 사용하기
환영 메시지에 밑줄을 추가해 봅시다
[h1]만을 위한 두 번째 규칙 만들기
건강 음료(elixirs)와 찾아오는 길(directions) 페이지에 라운지 스타일 추가하기
외부 스타일 시트와 연결하기
상속에 관해 이야기할 때가 되었군요…
가계도(family tree)에서 폰트를 위로 옮기면 어떻게 될까요?
상속 재정의
클래스를 위한 선택자 만들기
클래스 심층 학습
스타일들이 적용되는 방법에 대한 세상에서 가장 작고, 빠른 지침서
누가 상속을 받을까요?
라운지 CSS 유효성 확인하기
연습 문제 정답

9장 어휘력 향상시키기
30,000 피트 높이에서 바라 본 텍스트와 폰트
폰트 패밀리란 무엇일까요?
CSS를 사용하여 폰트 패밀리 명시하기
토니의 일기에 쌓인 먼지를 털어냅시다
다른 폰트를 가진 여러 사용자들을 다루려면 어떻게 해야 할까요?
그렇다면, 폰트 사이즈를 어떻게 정의해야 할까요?
토니의 웹 페이지에 있는 폰트 크기를 변경해 봅시다
폰트 굵기 변경하기
폰트에 스타일 추가하기
토니의 인용구에 이탤릭 추가하기
웹 컬러는 어떻게 동작될까요?
어떻게 하면 웹 컬러를 명시할 수 있나요? 몇 가지 방법이 있는지 세어봅시다
hex 코드에 대한 2분 지침서
웹 컬러를 찾는 방법
토니의 페이지로 돌아가서
text-decoration에 관해 여러분이 알기 원하는 모든 것
밑줄 제거하기
연습 문제 정답

10장 엘리먼트들과 친숙해지기
라운지 등급 올리기
몇 가지 간단한 갱신 작업부터 시작해 봅시다
새로운 줄 간격을 체크해 봅시다
몇 가지 주요 혁신을 위한 준비
박스 모델 자세히 살펴보기
박스에서 할 수 있는 것들
보증서 스타일 생성하기
보증서를 위한 패딩, 테두리 그리고 마진
약간의 패딩 추가하기
이제 약간의 마진을 추가해 봅시다
배경 이미지 추가하기
배경 이미지 고치기
왼쪽에만 패딩을 추가하는 것은 어떻게 할까요?
오른쪽에 마진을 증가시키는 것은 어떻게 할까요?
테두리에 대한 2분 지침서
테두리 끝손질하기
HTML 클래스와의 인터뷰
id 속성
라운지에서 id 사용하기
스타일 시트 리믹싱
여러 개의 스타일 시트 사용하기
연습 문제 정답

11장 진보된 웹 페이지 만들기
건강 음료 XHTML 자세히 살펴보기
어떻게 하면 페이지를 논리적인 구간으로 나눌 수 있는지 탐색해 봅시다
테두리 추가하기
테두리 시운전
건강 음료 구간에 몇 가지 실질적인 스타일 추가하기
작전 계획
건강 음료 너비 작업
건강 음료에 기본적인 스타일 추가하기
우리가 필요한 것은 자손들을 선택하는 방법입니다…
건강 음료 제목의 색깔 바꾸기
줄 간격 고치기
지름길로 갈 때가 되었습니다
[span]을 추가하는 쉬운 3가지 단계
[a] 엘리먼트와 그것의 여러 가지 성질
어떻게 하면 상태에 따라 엘리먼트를 꾸밀 수 있을까요?
의사-클래스 일 착수시키기
"캐스케이드"에 대해 이야기할 때가 되지 않았나요?
캐스케이드
"특별성 게임"에 오신걸 환영합니다
모든 것을 합치세요
연습 문제 정답

12장 엘리먼트 정렬하기
슈퍼 브레인 파워를 했나요?
flow를 사용하거라, 루크
인라인 엘리먼트는 어떻게 되나요?
모두 함께 일하는 방법…
엘리먼트를 떠오르게 하는 방법
라운지 무대 뒤에서는
새로운 스타버즈
header 바로 밑으로 sidebar를 옮기세요
sidebar의 너비를 설정하고 그것을 뜨게 합니다
두 개의 컬럼 문제 해결하기
주요 구간에 마진 설정하기
돌아와서 겹쳐지는 문제를 정리해 봅시다
오른쪽은 팽팽하게, 왼쪽은 느슨하게
liquid와 frozen 디자인들
absolute 포지셔닝 작동 방법
스타버즈 CSS 변경하기
footer를 고치기 위해 할 수 있는 한 가지 협정
트로피 위치시키기
fixed(고정된) 포지셔닝은 어떻게 작동할까요?
음수의 left 속성 값 사용하기
상대적이 됩시다
3개의 컬럼
연습 문제 정답

13장 표 만들기
XHTML로 테이블을 어떻게 만들까요?
XHTML을 사용하여 어떻게 테이블을 생성할까요?
브라우저가 생성하는 것
테이블 해부
캡션과 요약 추가하기
꾸미기 시작하기 전에 토니의 페이지로 테이블을 가져가 봅시다
테두리 붕괴시키기
약간의 색을 주는 것은 어떨까요?
토니가 흥미로운 것을 발견했어요…
토니의 테이블 다시 살펴보기
하나 이상의 행을 병합하는 방법
새롭게 개선된 테이블
낙원에서의 곤경?
중첩된 테이블 제목을 위해 CSS 재정의하기
마지막으로 토니의 사이트 광택내기
연습 문제 정답


14장 대화식 페이지 만들기
폼이 동작하는 방법
폼이 브라우저에서 작동하는 방법
XHTML에서 작성하는 것들
브라우저가 생성하는 것들
폼 엘리먼트 동작 방법
Bean Machine 폼을 생성하기 위한 준비
폼 엘리먼트 추가하기
폼 엘리먼트 이름 작동 방법
돌아와서 XHTML로 [input] 엘리먼트를 추가합시다
폼에 더 많은 input 엘리먼트들 추가하기
[select] 엘리먼트 추가하기
고객에게 whole 혹은 ground beans 선택권을 줘봅시다
라디오 버튼 구멍뚫기
폼 완성하기
체크박스와 textarea 추가하기
GET 동작 지켜보기
테이블이냐, 테이블이 아니냐? 그것이 문제로다…
테이블 안으로 폼 엘리먼트 넣기
CSS를 가진 테이블과 폼 꾸미기
연습 문제 정답

부록: 10가지 토픽들 (다루지 않은 것들)
더 많은 선택자들
프레임
멀티미디어와 플래쉬
웹 페이지 생성을 위한 도구들
Client-side 스크립팅
Server-side 스크립팅
검색 엔진을 위한 튜닝
프린트를 위한 스타일 시트에 관한 것들
무선 장치를 위한 페이지
블로그

찾아보기

 

 

 

참고자료

http://book.naver.com/bookdb/book_detail.php?bid=2481840

http://www.yes24.com//Cooperate/Naver/welcomeNaver.aspx?pageNo=1&goodsNo=2104548

 

이 글은 스프링노트에서 작성되었습니다.