소장자료검색

책소개

최신 CSS 기법을 다루는 CSS 마스터가 되기 위한 필독서!
2006 아마존닷컴 컴퓨터인터넷 부문 베스트셀러 2위!

가장 유용한 CSS 기법을 한번에 정리하면서 실제 환경에서 발생할 수 있는 브라우저 관련 이슈를 다뤄 CSS 관련 지식 수준을 한 단계 올릴 수 있다. 이 책을 통해 CSS 전문가다운 코드를 작성할 수 있는 기법을 배워보자.

목차

1장 기초 다지기
구조가 탄탄한 코드 만들기
의미를 살린 마크업
ID와 클래스 이름 짓기
div와 span
문서 유형, DOCTYPE 전환, 브라우저 모드
유효성 검사
브라우저 모드
DOCTYPE 전환
스타일을 꾸밀 대상 선택하기
선택자 활용 기초
유사 클래스 선택자
전체 선택자
고급 선택자
자식 선택자, 인접 형제 선택자
속성 선택자
캐스캐이드 효과와 적용순서
지정순위
스타일시트에서 지정순위 활용하기
body 태그에 클래스나 ID 지정하기
상속
스타일 시트를 계획/구성/관리하는 방법
문서에 스타일 적용하기
코드 주석 활용법
구조 표시를 위한 주석
작업 기록을 위한 주석
주석을 제거하고 스타일시트 최적화하기
스타일 가이드
손쉬운 스타일시트 유지관리법
요약

2장 화면 표시를 위한 모델 완벽 정리
박스 모델 완벽 정리
윈도우용 인터넷 익스플로러의 박스 모델
마진 겹침 현상
포지셔닝 완벽 정리
화면 표시 모델
상대 위치
절대 위치
고정 위치
플로팅
라인박스와 플로트 해제 방법
요약

3장 배경 이미지와 이미지 대치 기법
배경 이미지 기초 다지기
둥근 모서리 상자 모양 만들기
고정폭 둥근 모서리 상자 모양
유동폭 둥근 모서리 상자
마운틴탑 코너
그림자 효과
간단한 그림자 효과 내기
Clagnut 스타일 그림자 효과
부드러운 그림자 효과 만들기
여러 겹으로 만드는 그림자 효과
이미지 대치 기법
FIR 방법
파크 방법
길더/레빈 방법
IFR와 sIFR 방법
요약

4장 링크 모양 꾸미기
링크 스타일 기초
밑줄치며 놀기
예쁜 링크 밑줄 만들기
링크 유형별로 스타일 지정하기
문서나 뉴스 피드 다운로드용 링크 꾸미기
버튼과 롤오버 효과 만들기
롤오버 기초
이미지를 사용한 롤오버 효과
픽시 방법을 이용한 롤오버 효과
방문한 링크 스타일 꾸미기
CSS로만 만드는 툴팁
요약

5장 리스트 스타일과 내비게이션 바 만들기
리스트 스타일 기초
세로형 내비게이션 바 만들기
내비게이션 바에서 현재 페이지 표시하기
가로형 내비게이션 바 만들기
슬라이딩 도어 효과의 탭 내비게이션 바 만들기
CSS 이미지 맵 만들기
플리커 스타일의 이미지 맵 만들기
리모트 롤오버 만들기
정의 리스트
요약

6장 접근성 높은 폼과 테이블 만들기
데이터 테이블 스타일 꾸미기
테이블 관련 엘리먼트 소개
써머리와 캡션
thead, tbody, tfoot
col, colgroup
데이터 테이블 마크업 만들기
테이블 스타일 꾸미기
화면 모양 만들기
추가 사항 처리
간단한 폼 레이아웃 만들기
유용한 폼 엘리먼트
폼 레이블
기본 레이아웃
기타 엘리먼트 처리방법
장식 마무리하기
필수 입력항목
복잡한 폼 레이아웃 만들기
접근성을 고려한 데이터 입력 방식
다단 레이아웃의 체크박스
폼 에러 메시지 만들기
요약

7장 레이아웃
디자인을 가로 중간에 배치하기
auto 마진 이용 방법
포지셔닝 음수 마진값 이용 방법
플로트 기반의 레이아웃
플로트를 이용한 2단 레이아웃
플로트를 이용한 3단 레이아웃
고정 레이아웃, 유동 레이아웃
화면비례형 레이아웃
글자비례형 레이아웃
글자비례-화면비례 혼합형 레이아웃
글자와 화면크기에 따라 늘어나는 이미지
가짜 단 모양 만들기
요약

8장 핵과 필터
핵과 필터
핵과 필터 사용에 대한 경고
핵 사용시 유의점
개별적인 스타일시트에 필터 적용하기
인터넷 익스플로러 조건 주석문
밴드 패스 필터
개별적인 규칙과 선언에 필터 적용하기
자식 선택자 필터
속성 선택자 필터
별표 HTML 필터
맥용 IE의 주석처리된 백슬래시 핵
속성에 이스케이프 문자를 사용하는 핵
탄텍 박스 모델 핵
쉽게 개선된 박스 모델 핵
!important와 언더바 핵
오웬 핵
요약

9장 브라우저 버그 해결하기
버그 잡기
흔히 발생하는 CSS 문제
지정순위와 정렬방법 오류
마진 겹침 현상
버그 잡기 기초
문제 분리하기
테스트 범위 최소화하기
증상이 아닌 문제원인 바로 잡기
도움 요청하기
레이아웃
레이아웃이란?
레이아웃 때문에 생기는 효과
흔히 발생하는 버그 해결방법
더블마진 플로트 버그
텍스트 주변에 3픽셀 공간 표시 버그
IE 6의 문자 중복 표시 버그
IE 6의 피커부 버그
상대좌표 컨테이너에서 절대좌표 지정
인터넷 익스플로러 관련 이야기
요약

부록Ⅰ 동호회 사이트 만들기
적용 사례 소개
하위 선택자를 이용한 컨텐트 영역 조정
XHTML 구조
명명 규칙에 대해
3단 레이아웃
2단 레이아웃
1단 레이아웃
불필요한 단 제거
컬럼 띄우기
계산방법
올바른 위치에 컬럼 띄우기
body 클래스를 이용해서 현재 페이지 표시하기
드롭인 박스
둥근 모서리 상자 만들기
평면 흰색 상자
특별한 모양 만들기
투명 모서리와 테두리선
이미지
CSS
원하는 동작을 위한 클래스 조합
이미지 클래스
기본 이미지
테두리선 없는 이미지
큰 이미지
링크 모양 꾸미기
사이드바 링크
방문한 링크 표시하기
LVHA가 아니라 LAHV 사용하기
외부 링크 다르게 표시하기
그림자 효과 만들기
그림자 이미지 만들기
이미지에 플로팅 지정하기
요약

부록 II 투스카니 럭셔리 리조트
적용 사례 소개
유동적인 레이아웃
본문과 컨테이너
masthead
컨텐트와 사이드바
유동적인 속성
푸터
유동 레이아웃 관련 문제 해결하기
절대위치를 이용한 엘리먼트 배치
위치 관련 속성
쌓는 순서
배경 이미지 관련 기법
상단을 3개로 나누기
방탄웹 기법 적용하기
이미지 대치 기법
로고 이미지 대치
첫 대문자 이미지 대치
유동적인 이미지
유동적인 이미지를 위한 코딩
리스트 항목 하나에 여러 엘리먼트 넣기
메뉴 코드 작성
요약