간편결제, 신용카드 청구할인
카카오페이 3,000원
(카카오페이 5만원 이상 결제시, 5/1~5/31 기간 중 1회)
삼성카드 6% (21,150원)
(삼성카드 6% 청구할인)
인터파크 롯데카드 5% (21,380원)
(최대할인 10만원 / 전월실적 40만원)
북피니언 롯데카드 30% (15,750원)
(최대할인 3만원 / 3만원 이상 결제)
NH쇼핑&인터파크카드 20% (18,000원)
(최대할인 4만원 / 2만원 이상 결제)
Close

스타일로 말해요 : CSS를 아는 웹디자이너 되기

원제 : Speaking in styles : fundamentals of CSS for Web designers
소득공제

2013년 9월 9일 이후 누적수치입니다.

판매지수 56
?
판매지수란?
사이트의 판매량에 기반하여 판매량 추이를 반영한 인터파크 도서에서의 독립적인 판매 지수입니다. 현재 가장 잘 팔리는 상품에 가중치를 두었기 때문에 실제 누적 판매량과는 다소 차이가 있을 수 있습니다. 판매량 외에도 다양한 가중치로 구성되어 최근의 이슈도서 확인시 유용할 수 있습니다. 해당 지수는 매일 갱신됩니다.
Close
공유하기
정가

25,000원

  • 22,500 (10%할인)

    1,250P (5%적립)

할인혜택
적립혜택
  • I-Point 적립은 마이페이지에서 직접 구매확정하신 경우만 적립 됩니다.
추가혜택
주문수량
감소 증가
  • 이벤트/기획전

  • 연관도서(31)

  • 상품권

AD

책소개

『스타일로 말해요!』는 디자인이 웹을 위한 결과물로 어떻게 적용될 수 있는지를 간단한 예제를 이용해 설명한다. 웹페이지의 구성 요소와 웹페이지 작업을 위해 필요한 도구를 알아보고, CSS의 문법, 의미, 어휘를 배운다.

출판사 서평

CSS 할 줄 아세요?

CSS는 웹이 시각적으로 보여주는 부분을 담당한다. 여러분이 디자이너라면, CSS는 여러분의 아이디어를 온라인상에 펼칠 수 있게 하기 위해서 꼭 알아둘 필요가 있는 언어이다. CSS 코드를 설명하고 있는 책들은 무수히 많지만, 그런 추상적인 코드에서는 생각을 자유롭게 펼치기 힘들다. 눈에 보이는 색상, 형태, 배치를 가지고 생각해야 한다. 코드로 말하는 것이 아니라 스타일로 말해야 한다.

『스타일로 말해요!』는 여러분의 디자인이 웹을 위한 결과물로 어떻게 적용될 수 있는지를 간단한 예제를 이용하여 설명함으로써, 코드와 스타일 사이의 벽을 허물어 줄 것이다.

CSS는 디자이너가 아닌 개발자를 위한 것이다?

[거짓] : 많은 디자이너들이 CSS는 디자이너의 업무가 아니라, 단지 ‘코더’를 위한 것이라고 생각합니다. 이러한 이야기들을 상당히 많은 디자이너들로부터 들었습니다. “나는 프로그램 언어를 배우고 싶지 않다.” 이렇게 말을 하는 디자이너들에게는 3가지 기본적인 논리가 있습니다.

첫 번째 논리 : 개발자들이 이해하면, 난 이해할 필요가 없다.
저자는 편집 디자이너로 디자인을 시작했고, 인쇄 과정을 처음부터 끝까지 이해해야 했습니다. CMYK, 종이의 두께 등에 대해 알아야 하고, 출력 파일을 만드는 법도 알아야 했습니다. 이런 것들을 이해해야 하는 것은 저자의 디자인이 직접 선택한 적절한 매체에서 최고의 결과를 얻어야 하기 때문이었습니다. 적어도 여러분 자신이 코드를 작업할 계획이 전혀 없더라도, CSS가 어떻게 동작하는지 이해한다면, 한 단계 더 발전된 웹 디자이너가 될 수 있을 것입니다.

두 번째 논리 : CSS는 배우기 어렵다.
CSS는 실제로 디자이너의 마인드를 가지고 개발됩니다. 어렵지 않은 일반적인 용어가 사용되어 쉽게 이해하고 기억될 수 있습니다.

세 번째 논리 : 난 프로그래머가 아니라 디자이너라고요!!
CSS는 프로그램 언어가 아니라 스타일 시트 언어입니다. 무엇이 다르냐고요? 스타일 시트 언어는 문서 안에 있는 서로 다른 객체들이 어떻게 표현되는지 로직 기반인 function보다 인간이 이해하기 쉬운 간단한 스타일 규칙을 이용하여 컴퓨터에게 쉽게 이야기해줍니다. CSS는 콘텐츠가 어떻게 동작하는지 설명하는 게 아니라, 어떻게 보여야 하는지를 설명합니다.

<추천의글>

"제이슨이 웹디자이너들에게 CSS를 가르치는 방식은 정말 최고다! 그는 디자이너의 언어로 말한다."
- Allison Bucchere, AOL MediaGlow Living Network 부회장 겸 디렉터

목차

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’을 볼 수 있는 안목을 가질 수 있기를 희망한다.
- 본문 중에서

관련이미지

저자소개

제이슨 그랜포드 티그 [저] 신작알림 SMS신청
생년월일 -

해당작가에 대한 소개가 없습니다.

남덕현 [역] 신작알림 SMS신청
생년월일 -

해당작가에 대한 소개가 없습니다.

이 상품의 시리즈

(총 34권 / 현재구매 가능도서 32권)

선택한 상품 북카트담기
펼쳐보기

컴퓨터/인터넷 분야에서 많은 회원이 구매한 책

    리뷰

    7.0 (총 0건)

    구매 후 리뷰 작성 시, 북피니언 지수 최대 600점

    리뷰쓰기

    기대평

    작성시 유의사항

    평점
    0/200자
    등록하기

    기대평

    0.0

    판매자정보

    • 인터파크도서에 등록된 오픈마켓 상품은 그 내용과 책임이 모두 판매자에게 있으며, 인터파크도서는 해당 상품과 내용에 대해 책임지지 않습니다.

    판매자

    (주)교보문고

    상호

    (주)교보문고

    사업자 종류

    법인사업자

    사업자번호

    102-81-11670

    연락처

    1544-1900

    이메일

    callcenter@kyobobook.co.kr

    통신판매 신고 번호

    01-0653

    영업소재지

    서울특별시 종로구 종로 1(종로1가,교보빌딩)

    교환/환불

    반품/교환 방법

    ‘마이페이지 > 취소/반품/교환/환불’ 에서 신청 또는 1:1 문의 게시판 및 고객센터(1577-2555)에서 신청 가능

    반품/교환가능 기간

    변심 반품의 경우 출고완료 후 6일(영업일 기준) 이내까지만 가능
    단, 상품의 결함 및 계약내용과 다를 경우 문제점 발견 후 30일 이내

    반품/교환 비용

    변심 혹은 구매착오로 인한 반품/교환은 반송료 고객 부담
    상품이나 서비스 자체의 하자로 인한 교환/반품은 반송료 판매자 부담

    반품/교환 불가 사유

    ·소비자의 책임 있는 사유로 상품 등이 손실 또는 훼손된 경우
    (단지 확인을 위한 포장 훼손은 제외)

    ·소비자의 사용, 포장 개봉에 의해 상품 등의 가치가 현저히 감소한 경우
    예) 화장품, 식품, 가전제품(악세서리 포함) 등

    ·복제가 가능한 상품 등의 포장을 훼손한 경우
    예) 음반/DVD/비디오, 소프트웨어, 만화책, 잡지, 영상 화보집

    ·시간의 경과에 의해 재판매가 곤란한 정도로 가치가 현저히 감소한 경우

    ·전자상거래 등에서의 소비자보호에 관한 법률이 정하는 소비자 청약철회 제한 내용에 해당되는 경우

    상품 품절

    공급사(출판사) 재고 사정에 의해 품절/지연될 수 있음

    소비자 피해보상
    환불지연에 따른 배상

    ·상품의 불량에 의한 교환, A/S, 환불, 품질보증 및 피해보상 등에 관한 사항은 소비자분쟁해결 기준 (공정거래위원회 고시)에 준하여 처리됨

    ·대금 환불 및 환불지연에 따른 배상금 지급 조건, 절차 등은 전자상거래 등에서의 소비자 보호에 관한 법률에 따라 처리함

    (주) 인터파크 안전결제시스템 (에스크로) 안내

    (주)인터파크의 모든 상품은 판매자 및 결제 수단의 구분없이 회원님들의 구매안전을 위해 안전결제 시스템을 도입하여 서비스하고 있습니다.
    결제대금 예치업 등록 : 02-006-00064 서비스 가입사실 확인

    배송안내

    • 교보문고 상품은 택배로 배송되며, 출고완료 1~2일내 상품을 받아 보실 수 있습니다.

    • 출고가능 시간이 서로 다른 상품을 함께 주문할 경우 출고가능 시간이 가장 긴 상품을 기준으로 배송됩니다.

    • 군부대, 교도소 등 특정기관은 우체국 택배만 배송가능합니다.

    • 배송비는 업체 배송비 정책에 따릅니다.

    • - 도서 구매 시, 1만 원 이상 무료, 1만원 미만 2천 원 - 상품별 배송비가 있는 경우, 상품별 배송비 정책 적용