웹 2.0을 이끄는 방탄웹

1장 글씨 크기를 내 마음대로
흔해 빠진 구축방식
방탄웹이 아닌 이유
최적의 방법 선택하기
길이 단위
상대크기 키워드
퍼센트값
절대크기 키워드
방탄웹으로 만들려면?
키워드 설명
픽셀 고정은 이제 그만
두 가지 장애물
단순화된 박스모델 핵
방탄웹이 좋은 이유
다음 단계
기본 글씨 크기 지정
퍼센트값을 이용해서 기본 크기와 다른 크기 지정하기
키워드값과 퍼센트값 사용
글씨 크기값을 정확하게 잡아가기
퍼센트값을 겹쳐 쓸 때 유의할 점
퍼센트값을 이용해 일관성 유지하기
em 단위를 이용한 글씨 크기 조정방법
요약

2장 자유롭게 크기가 조절되는 내비게이션 메뉴바
흔해 빠진 구축 방식
탭 구현방식
롤오버 효과
방탄웹이 아닌 이유
용량 크기 문제
접근성 문제
크기 조절 문제
유지보수 문제
방탄웹으로 만들려면?
스타일 미적용 시 모습
작은 이미지 두 개면 오케이
스타일 적용
플로트를 추가로 지정해 문제 해결하기
탭 모양 꾸미기
배경 이미지 지정
바닥 테두리선 추가
마우스오버 효과 주기
선택된 상태 표현하기
방탄웹이 좋은 이유
em을 적용해서 개선하기
그 밖의 사례 소개
모질라
슬랜츠
ESPN 검색
요약

3장 자유자재로 높낮이가 조절되는 행 만들기
흔해 빠진 구축 방식
방탄웹이 아닌 이유
불필요한 이미지 사용
고정된 높이값
복잡한 코드
방탄웹으로 만들려면?
마크업 구조
각 요소에 id 부여하기
스타일 미적용 시 모습
배경색 지정
위치 지정
사라진 배경색
디테일한 디자인 요소 추가
사방을 둥근 모서리로 만들기
텍스트와 링크 모양
마지막 단계
인터넷 익스플로러 7에 맞추기
방탄웹이 좋은 이유
구조와 디자인의 분리
고정되지 않은 높이
세로 확장 사례 하나 더
마크업
이미지 두 개 준비하기
CSS 적용
자동 확장기능
요약

4장 나만의 플로트 활용 비법
흔해 빠진 구축 방식
방탄웹이 아닌 이유
방탄웹으로 만들려면?
최적의 구조를 결정해 보자
정의 리스트 사용
마크업 구조
스타일 미적용 시 모습
외곽 영역 꾸미기
사진 이미지를 마크업하자
기본 스타일 적용하기
이미지 자리 잡기
양쪽 끝에 띄우기
설명문의 길이가 짧아도 모양 유지하기
플로트 자체 해제 방식
멋지게 꾸미는 마무리
이미지 정렬 방식
표 모양 만들기
배경 이미지 만들기
그 밖의 플로트 해제 방법
생성된 컨텐트를 이용한 쉬운 해제 방법
방탄웹이 좋은 이유
요약

5장 깨지지 않는 상자 만들기
흔해 빠진 구축 방식
방탄웹이 아닌 이유
방탄웹으로 만들려면?
마크업 구조
이미지 준비 전략
스타일 입히기
방탄웹이 좋은 이유
그 밖의 둥근 모서리 기법 소개
브라우즈 해피 사례
박스 힌팅
둥근 모서리가 한 개 있는 상자
모서리 힌팅
늘어나는 화살표
제약이 많은 환경에서 새로운 아이디어가 나온다
요약

6장 이미지나 CSS 없이도 볼 수 있게 하기
흔해 빠진 구축 방식
방탄웹이 아닌 이유
방탄웹으로 만들려면?
방탄웹이 좋은 이유
스타일 유무 여부에 관계없는 디자인
10초 만에 하는 사용성 검사
흔해 빠진 구축 방식
방탄웹으로 만들려면?
디그더그 테스트
방탄웹을 만들기 위한 도구 소개
패블릿
웹 개발 확장기능 툴바
웹 접근성 툴바
파이어버그
유효성 검사도 하나의 도구
요약

7장 쉽게 변환할 수 있는 테이블 만들기
흔해 빠진 구축 방식
방탄웹이 아닌 이유
방탄웹으로 만들려면?
마크업 구조
스타일 적용하기
방탄웹이 좋은 이유
요약

8장 유동적인 글자비례형 레이아웃 만들기
흔해 빠진 구축 방식
방탄웹이 아닌 이유
남용되는 코드
끔찍한 유지보수
컨텐트 표시 순서 문제
방탄웹으로 만들려면?
마크업 구조
다단 레이아웃 만들기
스타일 적용하기
단 간격 지정
단 여백 지정
최소/최대 너비값 지정
이동하는 가짜 단 만들기
3단 레이아웃 만들기
방탄웹이 좋은 이유
em 단위 기반의 레이아웃
글자비례형 레이아웃 사례
마크업 구조
CSS
일관성을 유지하는 것이 이상적
유의할 점 - 스크롤바
요약

9장 방탄웹 구축 종합완결편
목표 설정
방탄웹이 좋은 이유
유동적인 레이아웃
글씨 크기를 마음대로
이미지나 CSS 없이도 볼 수 있는 페이지
다국어 버전 웹사이트 제작
기초 공사
마크업 구조화
기본 스타일 지정
레이아웃 구조 지정
사이드바 메뉴 배경 만들기
헤더 영역
이벤트 공지사항 영역 꾸미기
단 간격 조정
컨텐트 영역 꾸미기
사이드바 메뉴 영역 꾸미기
푸터 영역 꾸미기
인터넷 익스플로러를 위한 CSS 문제 해결
핵 관리 방법
푸터 문제 해결 방법
자체 플로트 해제 문제 해결 방법
마치면서