[ 세트 구성: 전2권 ]

1) 『HTML & CSS: 웹사이트 개발과 디자인 기초』
2) 『웹디자인 2.0 고급 CSS: 감각적인 웹디자인 예술 미학』


『HTML & CSS』

HTML과 CSS를 가장 쉽게 배울 수 있는 방법 - 아마존 독자들이 선택한 최고의 책!
아마존닷컴 웹개발 & 웹디자인 분야 No.1 베스트셀러!

이 책은 간결한 예제와 결과 화면을 한눈에 볼 수 있는 방식으로 구성해 HTML과 CSS와 관련된 주제를 매우 쉽게 배울 수 있다. 또한 웹 페이지 개발과 운영에 대한 전반적인 내용을 균형 있게 파악할 수 있도록 HTML과 CSS코드뿐만 아니라 작업 절차와 방법, 그리고 웹사이트 분석방법도 살펴본다. 처음 웹 페이지 개발을 시작하는 디자이너와 개발자에게 안성맞춤인 책이다.

이 책의 특징
■ 큼지막한 인포그래픽으로 새롭고 복잡한 개념을 단순화해 보여준다.
■ 깔끔한 디자인과 레이아웃으로 각 페이지의 주제를 쉽게 파악할 수 있다.
■ 생동감 넘치는 컬러 인쇄로 다양한 유형의 코드를 쉽게 구분할 수 있다.
■ 매력적인 코드 예제로 아름다운 웹 사이트를 만드는 방법을 익힌다.

이 책에서 다루는 내용
■ HTML과 CSS (최신 HTML5와 CSS3 포함)
■ 웹 페이지와 사이트의 구조
■ 이미지, 오디오, 비디오 제어 방법
■ 서체와 레이아웃


『웹디자인 2.0 고급 CSS』

웹이 발전하면서 새로운 표준이 점차 생겨나고 있으며 최신 브라우저는 웹을 새롭게 만들 수 있는 다양한 기능을 제공하고 있다. 웹사이트를 만드는 방법도 그에 따라 나날이 바뀌고 있다. 하지만 웹 디자이너 중 프로그래밍을 할 수 있는 사람은 많지 않다. 그렇기 때문에 멋진 디자인을 만들 때 의미 있는 마크업과 CSS를 사용해야 한다는 사실은 제약이 될 수 있다. 뿐만 아니라 클라이언트에게 멋진 디자인을 선보이면서도 효율적인 업무 프로세스를 지켜야 하고 게다가 짧은 기간 안에 이 모든 것을 해내야 한다면 스트레스가 이만저만이 아닐 것이다. 이러한 환경을 이미 경험해 잘 이해하고 있는 디자이너 앤디 클락은 ‘고급 CSS’를 활용해 접근성과 사용성이 높으면서도 아름다운 사이트를 만드는 웹디자인 2.0 개념에 대해 설명한다.

이 책에서는 다양한 사례를 통해 마크업과 CSS를 사용하면서도 창의적이고 독창적인 디자인을 만들 수 있음을 보여준다. 새로운 업무 방법론을 소개하고 디자이너뿐만 아니라 프로젝트 팀 모두가 활용할 수 있는 프로토타입 제작방법을 설명한다. 또한 그리드 기반 디자인을 웹에 적용하는 방법과 마크업 구조를 만드는 방법 등도 알려준다. 그밖에도 CSS3 등 앞으로 각광받을 기법들과 이를 최신 브라우저에서 직접 확인해보는 기술적인 내용뿐만 아니라, 프로젝트 팀 구성원과 더욱 효율적으로 업무를 수행하기 위한 개념적인 내용 등도 소개한다.

이 책에서 다루는 내용
■ 시각적으로 손쉽게 코딩 기술을 익힐 수 있다.
■ 유수 웹사이트, 사진작품, 컨셉 등 수많은 예제와 화보들을 통해 코드를 만드는 다양한 방법을 배울 수 있다.
■ 최신 웹브라우저와 최신 CSS3 스펙 사용 환경에 대한 기술적 이점을 한발 앞서 체험해 볼 수 있다.

[ 저자 소개 ]

존 두켓 (Jon Duckett)
웹사이트 디자인과 개발에 10년 이상의 경력을 보유하고 있다. 중소기업부터 세계적인 대기업까지 다양한 회사에서 근무했으며, 웹 디자인, 프로그래밍, 사용성(usability), 접근성(accessibility)에 대한 수십 권의 책을 집필했다.

앤디 클락 (Andy Clarke)
10년 남짓 동안 웹을 만들고 있는 비주얼 웹디자이너인 앤디 클락은 영국에 살고 있으며 1998년부터 서프앤넌센스Suff and Nonsense(http://www.stuffandnonsense.co.uk)라는 디자인 컨설팅 회사를 운영하고 있습니다.
디자인 책임자와 크리에이티브 디렉터를 역임하고 있으며 정부 기관, 자선단체, 국내외에 상주한 여러 고객사와 일하고 있습니다. 그가 관여한 기업으로는 영국 심장 협회, 영국 디즈니 스토어, Save the Children 협회, 영국 WWF 등이 있습니다.
웹표준 프로젝트(Web Standards Project) 멤버로서 2006년에는 해당 웹사이트를 직접 개편하기도 했습니다. 또 W3C의 CSS 워킹 그룹에 초대된 전문가 멤버로서 실무 관점에서 웹디자이너와 개발자들이 필요로 하는 사항을 전하고 있습니다. 그는 실무에서도 적용할 수 있는 창의적인 웹표준을 구현하는 방법에 대해, 그리고 미적으로 아름다우면서도 접근성이 높은 웹사이트를 만드는 방법을 웹디자이너들에게 지속적으로 강의를 하고 있습니다. 한편 전 세계에서 열리는 각종 워크샵 및 컨퍼런스에서도 발표자로 참여하고 있습니다.
일을 하지 않을 때는 그가 모은 mod 음악이나 ska 음악을 틀어놓고 이웃이나 주변에 있는 사람들을 성가시게 하거나 폴 웰러와 차 한 잔 하는 상상을 합니다.


[ 옮긴이 소개 ]

홍영표
전자전기공학을 전공하다 컴퓨터 프로그램에 빠져 이 일을 평생 업으로 삼게 됐다. LG CNS에서 개발자와 아키텍트로 근무하면서 다양한 프로젝트 경험을 통해 IT에 눈을 뜨게 됐다. 지금은 한 금융회사 정보시스템부에서 근무하고 있다. 차세대시스템 구축 시 애플리케이션 아키텍트로서 시스템 성능과 튜닝을 담당했으며, 현재는 모바일 시스템 구축을 비롯해 신기술 연구개발(R&D)을 맡고 있다. 애플의 철학과 스티브 잡스의 카리스마를 좋아하며, 엔지니어를 넘어 아티스트가 되기 위해 고군분투 중이다. 옮긴 책으로는 『아이폰&아이패드 인 액션』(에이콘출판, 2011), 『Professional iPhone and iPad Database Application Programming 한국어판』(에이콘출판, 2012), 『스프링 인 액션(제3판)』(제이펍, 2012), 『HTML5+CSS3+자바스크립트의 정석』(에이콘출판, 2012)이 있다.

정유한
서울대학교 컴퓨터공학과를 졸업하고 웹 에이전시에 입사하여 SK 텔레콤의 여러 사이트에서 PM으로서 웹기획 및 정보설계를 담당했다. 컴퓨터공학을 전공한 웹기획자로서 정보설계 영역에 관심이 많아 의미있는 웹의 근간이 되는 웹표준 HTML과 CSS에 심취해 있다.
현재는 웹 에이전시 NowOnPlay.com의 Creative Director와 me2DAY의 CSO라는 이중고를 자청해 겪어내고 있다. ‘혼자 보기 아까운 그의 하루’를 http://me2day.net/keyclub에서 볼 수 있다.

목차

• 『HTML & CSS』
  
• 1장. 구조
• 2장. 텍스트
• 3장. 목록
• 4장. 링크
• 5장. 이미지
• 6장. 테이블
• 7장. 폼
• 8장. 기타 마크업
• 9장. 플래시, 비디오 & 오디오
• 10장. CSS 소개
• 11장. 색상
• 12장. 텍스트
• 13장. 박스
• 14장. 목록, 테이블, 폼
• 15장. 레이아웃
• 16장. 이미지
• 17장. HTML5 레이아웃
• 18장. 프로세스 & 디자인
• 19장. 실용적인 정보
  
  
• 『웹디자인 2.0 고급 CSS』
  
• 1장 웹에 대한 재발견
  • 고급 CSS 소개
    • 어떤 툴을 사용해야 할까?
    • 고급 CSS를 사용해야 하는 이유
    • 앞으로의 웹은 어떤 모습일까?
    • 접근성은 지원해야 하는 옵션이 아니라 디자인 그 자체다
    • 새로운 개념을 탑재한 고급 CSS에 다가가기
  • 고급 CSS의 기본 개념
    • 사이트가 모든 브라우저에서 똑같이 보여야 하는 것은 아닙니다
    • 쓸 수 있는 모든 CSS 선택자를 사용합니다
    • 가능하면 새로나온 CSS3를 사용해서 한발 앞서 갑니다
    • CSS로 표현하기 어려운 부분은 자바스크립트와 DOM을 사용합니다
    • 가능하면 핵과 필터를 사용하지 않습니다
    • 의미있는 이름을 사용하고 마이크로포맷을 사용합니다
    • 아이디어를 공유하고 다른 사람들과 협력합니다
  • 왜 이제서야 고급 CSS를 사용할 수 있는가?
    • 예상하지 못한 CSS의 사용
    • 브라우저 지원 등급화
    • 발견하고 진행하고 영감받아서 앞으로 나아가기
  • 컨텐츠 중심의 디자인
    • 컨텐츠 중심의 접근
    • 흔히 볼 수 있는 최적화되지 않은 CSS 레이아웃
    • 스타일과 상관없이 최적화하기
  • 시맨틱 = 의미
    • CSS 옷 벗는 날
    • 의미를 마크업으로 변환하기:마크업 골든벨
    • 컨텐츠의 의미 파악하기
    • 계속 의미있게 작업하기
  • 세상 모든 것을 마크업으로
    • 전 세계는 리스트로 만들 수 있다
    • 눈에 보이는 대로 리스트 사용하기
    • 샌프란시스코에 가면 hCard를 보내세요
    • 세상을 더 넓게 보는 훈련
    • 시작점은 컨텐츠
  • 이제 웹에 적용해볼 단계
    
• 2장 웹을 만드는 새로운 방법
  • 완벽한 방법론을 찾아가는 과정
    • 더 좋은 방법 찾기
    • 컨텐츠 기반의 프로세스
  • 컨텐츠 수집
  • 화면구성도 작성
    • 과거의 화면 구성도가 실패할 수밖에 없는 이유
    • 화면 구성도는 반드시 필요한가?
    • 과거의 화면 구성도와 동적인 표현
  • grey box 방법을 활용한 개선된 접근법
    • 자세히 표현하기 위해 “심볼” 사용하기
  • 시안 작업
    • 빠르게 디자인 작업 진행하기
    • 시안에 마크업 가이드 추가하기
  • 인터랙티브 프로토타입 사용하기
    • 실제 동작하는 인터랙티브 프로토타입
    • 재사용 가능한 코드 만들기
    • 화면구조와 프로토타입을 잘 만드는 방법
    • 위지윅: 보는 것만큼 얻지 못할 수도 있다
  • 인터랙티브 프로토타입 실제 만들어 보기
    • 개발환경(브라우저) 선택하기
    • 브라우저 익스텐션 사용하기
    • <div> 엘리먼트를 최소로 사용하기
    • 마크업 유효성 검사
    • 플로트 대신 포지션 사용하기
    • CSS 정돈하기
  • 프로세스 실제 적용해 보기
    • 무엇을 만들 것인가
    • 컨텐츠 중심의 마크업 작성
    • CSS로 디자인 입혀가기
    • 레이아웃 만들기
    • body부터 스타일 시작하기
    • 작업 공유하기
    • 기본 컬러 스타일
    • 브랜드 영역
    • 로고 부분 추가하기
    • 네비게이션 꾸미기
    • 하단 푸터 영역 표시하기
    • 타이포그래피 스타일 완성
  • 사이트를 만들 기반의 완성
    
• 3장 디자인과 웹
  • 그리드 기반 디자인
    • 디자이너와 그리드
    • 황금비율과 분할 법칙
    • 완벽하게 유동적인 레이아웃
    • 균등 분할 그리드 디자인
  • 실제 사이트에서 그리드가 적용된 모습
    • Subtraction
    • Airbag Industries
    • 제프 크로프트 사이트 분석
    • 비얼의 블로그 분석
  • 우리 주변에서 찾을 수 있는 그리드
    • 신문
    • 전통적인 단 디자인 구성
    • 최근 유행하는 단 디자인
    • 그밖의 신문 레이아웃
  • 웹디자인에 새로운 그리드 적용하기
    • 뉴스 분석
    • 그리드부터 접근하기
    • 비법을 전수해 드립니다
    • 상세한 영역 조정
    • 이미지 처리
  • 일상생활에서 디자인에 영감을 줄 수 있는 것들
    • 홈페이지 다시 꾸미기
    • 무드 보드에 대하여
    • 디자인 스크랩북 만들기
    • 잡지에서 찾아볼 수 있는 인터페이스
    • 타이포그래피 리소스
    • 플래시 디자인에 대한 재검토
    • 이미지나 사진을 활용한 작업
  • 웹에서의 예술 활동
    • 디자인은 단순히 매력적인 비주얼을 만드는 과정이 아니다
    • 기술, 밖으로 눈을 돌리자
    • 무드 고조시키기
    • 주변을 둘러보자
    • 목적이 뚜렷한 스크랩북 만들기
  • 예술 미학으로서의 웹디자인
    • 디자이너들은 더 발전해야 합니다
      
• 4장 고급 CSS
  • 고급 CSS
    • 절대 포지션
    • 상대 포지션
    • 플로트 응용
    • 사이드바 만들기
    • 여러 기법 조합하기
  • CSS3
    • 통합 작업
    • 새로운 표준을 만드는 작업에 참여하기
    • 미래로의 시간여행
    • CSS3의 선택자 모듈을 사용한 디자인
    • 배경색을 사용해서 가독성 높이기
    • 배경과 외곽선 모듈을 사용한 디자인
    • 복수 배경 이미지를 사용한 디자인
    • 다단 구조 만들기
    • 다단구조 레이아웃 모듈을 사용한 디자인
  • 고급 레이아웃 모듈
    • 다시 그리드로 돌아가서
    • 고급 레이아웃 모듈을 사용한 디자인