스타일로 말해요
도서+교보Only(교보배송)을 함께 15,000원 이상 구매 시 무료배송
15,000원 미만 시 2,500원 배송비 부과
20,000원 미만 시 2,500원 배송비 부과
15,000원 미만 시 2,500원 배송비 부과
1Box 기준 : 도서 10권
해외주문/바로드림/제휴사주문/업체배송건의 경우 1+1 증정상품이 발송되지 않습니다.
패키지
북카드
키워드 Pick
키워드 Pick 안내
관심 키워드를 주제로 다른 연관 도서를 다양하게 찾아 볼 수 있는 서비스로, 클릭 시 관심 키워드를 주제로 한 다양한 책으로 이동할 수 있습니다.
키워드는 최근 많이 찾는 순으로 정렬됩니다.
작가정보
저자(글) 제이슨 그랜포드 티그
저자 제이슨 크랜포드 티그 (Jason Cranford Teague)는 최초의 온라인 잡지인 CMC에서 디자이너로 웹을 시작하여 15년 넘게 웹 디자이너로 일하고 있다. CNN, Virgin Group, AOL을 포함한 최고의 웹 사이트들의 작업에 참여했다. 컨설턴트이자 강사(www.brighteyemedia.com)로서 W3C와 현재 진행 중인 사안들에 자문을 하고 있다. 그의 베스트셀러인 『CSS,DHTML, 그리고 Ajax: Visual QuickStart Guide』를 포함해 많은 디자인 책을 출간했다.
번역 남덕현
역자 남덕현은 SK커뮤니케이션즈 UI개발팀에서 근무 중이며, 네이트 메인, 싸이월드 블로그 섹션 개편, 모바일 싸이월드 블로그 등의 UI개발 업무를 담당했다. 『제프리 젤드만의 웹표준 가이드』(위키북스, 2007) 감수, 『CSS 완벽 가이드』(위키북스, 2009)를 번역했다. 웹이라는 공간이 모든 사람들을 위해 올바르게 구현될 수 있는 그 날을 꿈꾼다.
목차
- Part 1 웹의 첫걸음
1장 웹페이지는 무엇일까요?
HTML, 자바스크립트, 그리고 CSS
- DOM이란 무엇일까?
- HTML과 CSS
- 자바스크립트와 CSS
- 플래시와 CSS
2장 웹 디자이너의 도구 상자
웹 브라우저
- 인터넷 익스플로러 (IE)
- 파이어폭스 (FF)
- 사파리 (Sa)
- 오페라 (Op)
- T크로스오버를 이용해 맥(Mac)에서 인터넷 익스플로러 6 테스트 하기
파이어폭스의 부가기능
- Firebug
- Colorzilla
- Palette Grabber
- MeasureIt
- Pixel Perfect
코드 에디터
- Coda
- TopStyle
- CSSEdit
- Dreamweaver
온라인에서 사용할 수 있는 도구들
- ColorJack
- Adobe Kuler
- Typetester
- SUMO Paint
3장 CSS에 대한 오해들
첫 번째 오해 : CSS는 디자이너가 아닌 개발자를 위한 것이다?
두 번째 오해 : CSS는 디자이너가 원하는 대로 다룰 수 없다?
세 번째 오해 : CSS는 많은 브라우저에서 일관성 없이 보인다?
Part 2 CSS 문법 알아보기
4장 구문: 의미 만들기
스타일 규칙
- 스타일 규칙 선언 부분
- 기본 스타일 규칙
- 더 많은 스타일 선언하기
- 규칙 조합하기
선택자의 종류
- HTML 선택자
- 클래스 선택자
- id 선택자
문맥 안에서의 스타일
- 콘텐츠의 위치에 따른 스타일 지정하기
- 자식 요소를 위한 스타일
- 형제 요소를 위한 스타일
특별한 경우를 위한 스타일
- 링크 상태
- 링크 액션을 위한 스타일
- 유동적인 액션을 위한 스타일
- 문단의 일부분을 위한 스타일
5장 시맨틱: 스타일의 의미 부여하기
스타일 규칙이 지정되는 곳
- HTML 태그에 지정하는 인라인 스타일
- 웹페이지 안에 삽입된 스타일
- 외부 스타일
CSS에 설명 추가하기
상속
- 상속 덮어쓰기
순서
구체성
- CSS 규칙의 가중치 결정하기
중요도
미디어
단계적으로 적용하기
6장 어휘 : 말이 통하다
값
- 키워드
- 변수
폰트
텍스트
배경
- 이미지 반복
- 이미지 위치
박스
- 디스플레이
- 불투명도
- 플롯
- 너비와 높이
- 테두리선
- 패딩
- 마진
- IE 고치기
위치 지정
- 위치지정 타입
- 평면 위치 설정하기
- 공간 위치 설정하기
테이블
리스트
커서
디자인 향상
- 그림자
- 둥근 모서리
- 외곽선
Part 3 원어민처럼 말하기
7장 CSS로 디자인하기
작업 과정 : 개요
기획하기
- 스케치하기
- 페이지 흐름도
- 와이어프레임
- 무드 보드
- 시각적 구성요소들
구축하기
- 크롬 자르기
- 스타일 가이드
- 프로토타입
배치하기
- 알파
- 베타
- 런칭
작업 과정 반복하기
8장 레이아웃
구조
- Head와 Body
- CSS를 위한 HTML 프레임워크
- CSS 추가하기
기본 스타일
- 브라우저 기본 스타일 설정하기
- 나만의 기본 스타일 설정하기
그리드
- 행
- 컬럼
- 섹션
9장 타이포그래피
폰트의 선택
- 핵심 웹 폰트
- 웹 안전 폰트
- 다운로드할 수 있는 폰트
유동적인 타이포그래피
- 서체 선택하기
텍스트 꾸미기
- 헤더
- 문단과 인용 블록
- 리스트
10장 내비게이션
CSS 스프라이트 (CSS Sprites)
링크
메뉴
버튼
11장 크롬
투명 이미지 사용하기
- IE6에서 투명 PNG 이미지 사용하기
그리드 정의하기
- 컬럼
- 행
로고와 폼
- 로고
- 폼
섹션 정의하기
- 광고를 위한 대체 버전
- 마지막 꾸미기
12장 마지막 이야기
CSS 벨리데이션
- 웹표준을 위한 디자인?
CSS 프레임워크
- 나만의 CSS 프레임워크 만들기
다른 매치를 위한 CSS
- 모바일 장치
- 프린트
CSS 최적화의 방법
- 일반적인 사항
- 디자인
- 코드화 작업
- 최적화하기
부록
A: voxLibris 코드
index.html
main.css
default.css
layout.css
layout.css
navigation.css
chrome.css
B: CSS 값
길이
- 픽셀인가? em인가?
폰트
URL
색상
- 색상 불투명도
C: 인터넷 익스플로러 문제 해결하기
쿼크 이해하기
해결법 1: Doctype 전환하기
해결법 2: 조건부 스타일
해결법 3: 언더스코어 핵
IE6에서 발생하는 공통적인 문제들
책 속으로
영어를 잘 하려면 풍부한 어휘의 습득이 필수이듯이, 웹디자인에도 어휘와 문법이 있다.
여러분은 이 책을 통해 멋진 웹디자인을 하기 위한 기본 어휘와 문법을 배우게 될 것이다.
책이 다루고 있는 내용은 웹표준에 기반을 둔 CSS의 기본적인 사용법과 작업 프로세스에 대한 내용들이다. 하지만, 그 뻔한 이야기를 저자가 풀어가는 방식은 남다르다.
일반적인 CSS에 대한 이론적인 사실의 나열이 아니라, 웹을 디자인하는 디자이너의 입장에서 쉽게 풀어 쓰고 있다. 이 점이 굉장히 맘에 들었다. ‘마땅히 지켜야 하는 것이기 때문에 알아야 한다.’라는 생각과 주장보다는 스스로 알아야만 하고 필요한 것으로 받아들이게 만드는 것이 더 훌륭한 방법이라고 생각한다.
이 책은 강요하지 않고, 스스로 깨닫고 받아들일 수 있는 내용들을 제시하고 있다.
국내의 웹 개발 직군을 보면 대부분 세부적으로 업무가 나누어져 있다. 크게 기획, 디자인, UI개발, 개발의 직군으로 분류할 수 있을 텐데, 이 구분의 장점은 아무래도 각 업무의 전문성을 높이기 위함이 아닐까 한다.
하지만, 반대로 생각해보면 자신이 맡고 있는 업무 이외에는 해박한 지식이 없어도 프로젝트를 진행하는 데는 크게 지장이 없다는 말이 되기도 한다.
이러한 상황에서 열린 시각과 열린 마인드가 없다면 전문성이라는 명목으로 오직 자신의 업무만을 고집하게 되는 경우가 생길 수 있다. 어쩌면 이것이 가장 골치 아픈 경우라고 할 수 있을텐데, 이런 상황이 지속된다면 프로젝트가 어떻게 될지는 불 보듯 뻔할 것이다. 하지만 자신의 업무가 아니라도 분야에 대한 지식을 알고 있으면, 자신의 업무에 더 많은 도움을 얻을 수 있고 훨씬 좋은 결과물도 만들 수 있을 것이다.
이 책의 번역을 하게 된 계기도 어쩌면 이 책의 저자와 같은 고민과 생각을 하고 있었기 때문이라고 할 수 있겠다.
책의 내용 중에 상당히 공감되는 부분이 있었는데, 다음의 내용이다.
“필자는 편집 디자이너로 디자인을 시작했고, 인쇄 과정을 처음부터 끝까지 이해해야 했습니다. CMYK, 종이의 두께 등에 대해 알아야 하고, 출력 파일을 만드는 법도 알아야 했습니다. 이런 것들을 이해해야 하는 것은 필자의 디자인이 직접 선택한 적절한 매체에서 최고의 결과를 얻어야 하기 때문이었습니다. 적어도 여러분 자신이 코드를 작업할 계획이 전혀 없더라도, CSS가 어떻게 동작하는지 이해한다면, 한 단계 더 발전된 웹 디자이너가 될 수 있을 것입니다.”
아직 편집디자인의 관점에서 웹디자인을 바라보는 시각들이 많은 경향이 있다. 어떤 디자인이든 디자인이 적용되는 매체의 특성을 먼저 파악해야 한다. 그리고 그 매체의 특성에 맞는 디자인이 정말 훌륭한 디자인이라고 생각한다.
‘웹디자인’에서 ‘디자인’의 의미가 단순한 ‘그래픽 작업’에서 끝나는 것이 아니라, ‘설계 및 제작’이라는 의미까지 포함되어 있다라는 것을 감안해본다면 자연스럽게 받아들 일 수 있는 말이 아닐까 싶다.
이 책은 CSS를 비롯한 다양한 브라우저 이슈, 효율적인 코드 작성, IE6를 대처하는 방법 등 이론이 완벽하더라도 실무에서 마주칠 수 있는 이슈들을 저자의 경험을 바탕으로 디자이너의 관점에서 쉽게 설명해주고 있다. 따라서, 실무에서 요긴하게 많은 도움을 얻을 수 있을 것이라고 생각된다.
아무쪼록, 이 책을 통하여 영화 ‘매트릭스’의 주인공 ‘네오’가 그동안 느끼지 못하고 있던 진정한 ‘real world’를 ‘모피어스’의 도움으로 만나게 되듯, 여러분들도 이 책을 통하여 ‘real web’을 볼 수 있는 안목을 가질 수 있기를 희망한다.
- 본문 중에서
출판사 서평
CSS 할 줄 아세요?
CSS는 웹이 시각적으로 보여주는 부분을 담당한다. 여러분이 디자이너라면, CSS는 여러분의 아이디어를 온라인상에 펼칠 수 있게 하기 위해서 꼭 알아둘 필요가 있는 언어이다. CSS 코드를 설명하고 있는 책들은 무수히 많지만, 그런 추상적인 코드에서는 생각을 자유롭게 펼치기 힘들다. 눈에 보이는 색상, 형태, 배치를 가지고 생각해야 한다. 코드로 말하는 것이 아니라 스타일로 말해야 한다.
『스타일로 말해요!』는 여러분의 디자인이 웹을 위한 결과물로 어떻게 적용될 수 있는지를 간단한 예제를 이용하여 설명함으로써, 코드와 스타일 사이의 벽을 허물어 줄 것이다.
CSS는 디자이너가 아닌 개발자를 위한 것이다?
[거짓] : 많은 디자이너들이 CSS는 디자이너의 업무가 아니라, 단지 ‘코더’를 위한 것이라고 생각합니다. 이러한 이야기들을 상당히 많은 디자이너들로부터 들었습니다. “나는 프로그램 언어를 배우고 싶지 않다.” 이렇게 말을 하는 디자이너들에게는 3가지 기본적인 논리가 있습니다.
첫 번째 논리 : 개발자들이 이해하면, 난 이해할 필요가 없다.
저자는 편집 디자이너로 디자인을 시작했고, 인쇄 과정을 처음부터 끝까지 이해해야 했습니다. CMYK, 종이의 두께 등에 대해 알아야 하고, 출력 파일을 만드는 법도 알아야 했습니다. 이런 것들을 이해해야 하는 것은 저자의 디자인이 직접 선택한 적절한 매체에서 최고의 결과를 얻어야 하기 때문이었습니다. 적어도 여러분 자신이 코드를 작업할 계획이 전혀 없더라도, CSS가 어떻게 동작하는지 이해한다면, 한 단계 더 발전된 웹 디자이너가 될 수 있을 것입니다.
두 번째 논리 : CSS는 배우기 어렵다.
CSS는 실제로 디자이너의 마인드를 가지고 개발됩니다. 어렵지 않은 일반적인 용어가 사용되어 쉽게 이해하고 기억될 수 있습니다.
세 번째 논리 : 난 프로그래머가 아니라 디자이너라고요!!
CSS는 프로그램 언어가 아니라 스타일 시트 언어입니다. 무엇이 다르냐고요? 스타일 시트 언어는 문서 안에 있는 서로 다른 객체들이 어떻게 표현되는지 로직 기반인 function보다 인간이 이해하기 쉬운 간단한 스타일 규칙을 이용하여 컴퓨터에게 쉽게 이야기해줍니다. CSS는 콘텐츠가 어떻게 동작하는지 설명하는 게 아니라, 어떻게 보여야 하는지를 설명합니다.
<추천의글>
"제이슨이 웹디자이너들에게 CSS를 가르치는 방식은 정말 최고다! 그는 디자이너의 언어로 말한다."
- Allison Bucchere, AOL MediaGlow Living Network 부회장 겸 디렉터
기본정보
ISBN | 9788992939492 | ||
---|---|---|---|
발행(출시)일자 | 2010년 07월 28일 | ||
쪽수 | 368쪽 | ||
크기 |
173 * 235
* 30
mm
/ 746 g
|
||
총권수 | 1권 | ||
시리즈명 |
위키북스 오픈소스 웹 시리즈
|
||
원서명/저자명 | Speaking in styles : fundamentals of CSS for Web designers/Teague, Jason Cranford |
Klover
e교환권은 적립 일로부터 180일 동안 사용 가능합니다.
리워드는 작성 후 다음 날 제공되며, 발송 전 작성 시 발송 완료 후 익일 제공됩니다.
리워드는 리뷰 종류별로 구매한 아이디당 한 상품에 최초 1회 작성 건들에 대해서만 제공됩니다.
판매가 1,000원 미만 도서의 경우 리워드 지급 대상에서 제외됩니다.
일부 타인의 권리를 침해하거나 불편을 끼치는 것을 방지하기 위해 아래에 해당하는 Klover 리뷰는 별도의 통보 없이 삭제될 수 있습니다.
- 도서나 타인에 대해 근거 없이 비방을 하거나 타인의 명예를 훼손할 수 있는 리뷰
- 도서와 무관한 내용의 리뷰
- 인신공격이나 욕설, 비속어, 혐오발언이 개재된 리뷰
- 의성어나 의태어 등 내용의 의미가 없는 리뷰
리뷰는 1인이 중복으로 작성하실 수는 있지만, 평점계산은 가장 최근에 남긴 1건의 리뷰만 반영됩니다.
구매 후 리뷰 작성 시, e교환권 200원 적립
문장수집
e교환권은 적립 일로부터 180일 동안 사용 가능합니다. 리워드는 작성 후 다음 날 제공되며, 발송 전 작성 시 발송 완료 후 익일 제공됩니다.
리워드는 한 상품에 최초 1회만 제공됩니다.
주문취소/반품/절판/품절 시 리워드 대상에서 제외됩니다.
구매 후 리뷰 작성 시, e교환권 100원 적립