본문내용 바로가기
무료배송

모던 웹사이트 디자인의 정석 HTML5 CSS3로 만들고 반응형 웹 디자인까지 고려한

위키북스 오픈소스 & 웹 시리즈 75
EBISUCOM 지음 | 윤인성 옮김 | 위키북스 | 2015년 12월 10일 출간
  • 정가 : 27,000원
    판매가 : 24,300 [10%↓ 2,700원 할인]
  • 제휴할인가 : 18,220 교보-롯데카드 최대 25% 청구할인 카드/포인트 안내
  • 통합포인트 : 1,350 적립 [5% 적립]
  • 추가혜택 :
    naver네이버페이 결제 시 최대 2% 추가 적립 payco페이코 결제 시 5,000원 할인 + 2만원 적립 okcashbag 실 결제 금액의 0.5% 적립 안내
  • 배송비 : 무료 배송비 안내
  • 도착예정일 : 서울 종로구 종로1가 교보생명빌딩 기준 지역변경
    지금 주문하면 내일(31일,금) 도착 예정 도착 예정일 안내
  • 바로드림 : 인터넷으로 주문하고 영업점에서 직접 수령 안내
멀티클립보드 증정
닫기
  • 멀티클립보드 증정
  • 책이 생활이다. 월간 생활책방 3월호, 행사도서 포함 2만원이상 구매시 스티치 노트 증정
  • 어린이 역사세트전
  • 어린이 과학의달 이벤트
상품상세정보
ISBN 9791158390211(1158390211)
쪽수 320쪽
크기 188 * 240 * 18 mm /778g 판형알림
이 책의 원서 HTML5&CSS3デザインブック/エビスコム

책소개

이 책이 속한 분야

반응형 웹 디자인에서 레이아웃을 자유자재로 다루는 최신 방법!

『모던 웹사이트 디자인의 정석』은 기본적인 HTML5/CSS3를 더 발전시켜 다양한 형태의 레이아웃을 가진 웹 페이지를 만드는 방법을 알아보는 책입니다. 따라서 HTML5/CSS3에 대한 기초 지식이 있는 독자를 대상으로 합니다.

기존에 웹사이트 디자인을 할 때는 2단 또는 3단으로 화면을 구분하는 레이아웃 패턴을 만드는 방법만 알아도 충분했습니다. 하지만 이제는 반응형 웹 디자인도 고려하고, 스마트폰 또는 태블릿이라는 다양한 장치를 지원하는 레이아웃을 만들 수 있어야 합니다.

이 책에서는 기본적인 단 구조의 웹 페이지를 만드는 방법부터 반응형 웹 디자인까지, 레이아웃의 기본이 되는 '박스 정렬'을 중심으로 자세히 설명합니다. 레이아웃을 만들 때 이 정도의 내용만 기억해 둔다면 문제 없을 것입니다.

이 책의 총서

총서 자세히 보기

상세이미지

모던 웹사이트 디자인의 정석(위키북스 오픈소스 & 웹 시리즈 75) 도서 상세이미지

저자소개

저자 : EBISUCOM

저자 EBISUCOM (エビスコム)은 다양한 미디어와 관련된 기획/제작을 하고 있다. 컴퓨터와 관련해서 서적/디지털 영상/CG/소프트웨어의 기획과 제작, 시스템 구축 등을 하고 있다.

역자 : 윤인성

역자 윤인성은 출근하는 게 싫어서 책을 집필/번역하기 시작했다. 일본어는 픽시브에서 웹 코믹을 읽다가 배웠다고 전해진다. 현재 직업 특성상 집에서 나갈 이유가 별로 없다는 것에 굉장히 만족하는 성격이기도 하다. 홍차와 커피를 좋아하며 요리, 음악, 그림, 스컬핑 등이 취미다.

《모던 웹을 위한 JavaScript+jQuery 입문》 《모던 웹을 위한 Node.js 프로그래밍》 《모던 웹 디자인을 위한 HTML5+CSS3 입문》 등을 저술했으며, 《TopCoder 알고리즘 트레이닝》 《Nature of Code》 《소셜 코딩으로 이끄는 GitHub 실천 기술》 등을 번역했다.

목차

▣ 01장: 웹 페이지의 단 구조

[1-1] 웹 페이지의 단 구조
단 구조
웹 페이지에서의 단 구조
웹 페이지 레이아웃의 발전
- CSS3로 구현하는 단 구조

[1-2] 박스 가로 정렬
박스 가로 정렬
가로 정렬할 대상 변경
가로 정렬할 박스의 개수 변경
- clearfix 구조

[1-3] 박스 분할
박스 분할
분할하고 싶은 만큼 박스 개수를 추가

[1-4] 박스의 너비를 지정
박스의 너비를 지정
- 너비의 합이 100%를 넘는 경우
- 칼럼 탈락을 사용할 때의 주의 사항
- 한쪽 박스의 너비를 픽셀로 고정

[1-5] 박스 정렬 순서 지정
박스 정렬 순서 지정

[1-6] 반응형 웹 디자인과 관련된 설정
반응형 웹 디자인의 기본
반응형 웹 디자인 응용
- 주요 스마트폰 또는 태블릿의 브라우저 화면 크기
중간 단계를 추가
- 반응형 웹 디자인에서 중복된 설정을 하나로 합치기
- 중간 단계를 칼럼 탈락으로 구현
- 박스를 겹쳐 올리는 레이아웃

▣ 02장: 웹 페이지 제작 준비

[2-1] 요소 준비
2-1-1 사이트 이름
2-1-2 기사
2-1-3 메뉴(세로 정렬)
2-1-4 메뉴(가로 정렬)
2-1-5 저작권

[2-2] 웹 페이지 준비
DOCTYPE 선언
언어 종류
head 태그와 body 태그
HTML 파일 인코딩
페이지 제목
뷰 포트
스타일시트 적용
스타일시트 파일의 인코딩
한국어 폰트
- 뷰 포트 설정과 웹 페이지 출력

▣ 03장: 블로그/뉴스 스타일 사이트의 콘텐츠 페이지

[3-1] 레이아웃 기본 구조 만들기
박스 준비
박스를 가로 정렬
반응형 웹 디자인 설정

[3-2] 박스 내부에 요소 추가
사이트 이름
내비게이션
기사
사이드 메뉴
저작권
본문 내부의 그림
출력 확인
- 다양한 너비의 브라우저 화면에서 출력 확인

[3-3] 레이아웃 조정
박스를 바 형태로 디자인
박스 사이에 구분선 삽입
요소의 간격을 조정(세로 방향)
요소의 간격을 조정(가로 방향)

[3-4] 반응형 웹 디자인과 관련된 조정
3-4-1 조정에 필요한 @media 설정을 추가
3-4-2 내비게이션 메뉴를 간소화
3-4-3 사이트 이름과 기사 제목을 간소화
3-4-4 서브 메뉴를 2단 구조로 변경
3-4-5 레이아웃 전체의 너비를 고정

[3-5] 요소 추가와 수정
3-5-1 웹 폰트로 사이트 이름 출력
- Google Fonts의 웹 폰트 사용법
3-5-2 기사의 작성일에 아이콘을 붙여 출력
- Font Awesome 121
3-5-3 기사 분류를 라벨의 형태로 출력
3-5-4 기사에 소제목을 추가
3-5-5 메뉴에 리스트 마크 추가
3-5-6 메뉴에 섬네일 그림 추가
3-5-7 섬네일 그림에 글자가 겹쳐진 메뉴
3-5-8 플랫 디자인의 SNS 공유 버튼 추가
- 공유 버튼 설정
3-5-9 관련 기사 메뉴 추가

[3-6] 내비게이션 바와 푸터가 화면의 너비를 꽉 채우도록 디자인

▣ 04장: 블로그/뉴스 스타일의 최상위 페이지

[4-1] 최상위 페이지 작성
최상위 페이지 작성
개요를 추가
“계속 읽기” 버튼 추가
개요를 더 추가하고 2개씩 가로로 정렬

[4-2] 요소 추가와 수정
4-2-1 페이지네이션 추가
4-2-2 원형 배지 추가
- 클래스 이름 변경과 마크업 조정

▣ 05장: 비즈니스 스타일 사이트의 최상위 페이지

[5-1] 레이아웃 기본 구조 생성
박스 준비
박스를 가로로 정렬
반응형 웹 디자인과 련된 설정

[5-2] 박스 내부에 요소를 추가
사이트 이름
내비게이션
헤더 그림
공지사항
저작권
출력 확인

[5-3] 레이아웃 조정
내비게이션 메뉴를 오른쪽에 붙여 출력
헤더 그림을 화면에 꽉 차게 출력
푸터를 바의 형태로 수정
요소의 간격 조정(세로 방향)
- 각 박스에 배경색을 넣어 디자인

[5-4] 반응형 웹 디자인과 관련된 조정
5-4-1 조정에 필요한 @media 설정을 추가
5-4-2 내비게이션 메뉴를 간소화
5-4-3 날짜 아래에 글자가 파고들지 않게 수정
5-4-4 레이아웃 전체의 너비 고정
- 큰 화면에서도 헤더 그림을 너비를 꽉 채워 출력하는 경우

[5-5] 요소의 추가와 수정
5-5-1 사이트 이름을 그림으로 출력
5-5-2 사이트 이름을 나타내는 그림의 해상도를 높임
5-5-3 요소를 테두리로 감싸 디자인
5-5-4 SNS 메뉴 추가
5-5-5 말풍선 형태로 추가 설명
5-5-6 콘텐츠 개요 추가
- padding 속성을 이용한 개요의 간격 조정
5-5-7 헤더 그림에 캐치 카피 올리기

[5-6] 내비게이션 메뉴를 토글 형태로
메뉴를 세로로 정렬
토글 버튼 생성
토글 버튼의 디자인과 위치 조정
- 클래스 이름 변경 또는 마크업 조정

▣ 06장: 비즈니스 사이트 스타일의 콘텐츠 페이지

[6-1] 콘텐츠 페이지 작성
콘텐츠 페이지 작성
기사의 레이아웃 구성
사이드 메뉴의 레이아웃 구성

[6-2] 요소 추가와 수정
6-2-1 기사의 디자인을 조정
6-2-2 빵 부스러기 리스트 추가
6-2-3 메뉴를 테두리로 감싸서 디자인
- 멀티 칼럼 기능을 이용한 단락 만들기

▣ 부록

인터넷 익스플로러 8 지원
칼럼 및 요소 색인

출판사 서평

[출판사 리뷰]

★ 이 책에 대해 ★
이 책은 스마트폰/태블릿 등 다양한 디바이스에 대응하는 '반응형 웹 디자인'을 중심으로 한 현재의 웹 페이지 레이아웃을 만들 때 사용하는 기술을 다룹니다.
[기초]
레이아웃의 근본이 되는 박스를 정렬하는 방법을 배우고 웹 페이지의 단 구조를 자유자재로 만드는 기술을 다룹니다.
[실전]
'블로그/뉴스 스타일 사이트'와 '비즈니스 스타일 사이트'라는 두 종류의 실전 예를 처음부터 단계적으로 만들어 봅니다.
[응용]
멀티 디바이스에 대응하고, 사이트를 더 좋은 형태로 향상시킬 수 있... 더보기

북로그 리뷰 (0) 쓰러가기

도서 구매 후 리뷰를 작성하시면 통합포인트를 드립니다.
결제 90일 이내 작성 시 300원 / 발송 후 5일 이내 작성시 400원 / 이 상품의 첫 리뷰 작성 시 500원
(포인트 적립은 작성 후 다음 날 혹은 해당 도서 배송 출발 후 익일에 적립됩니다.
외서/eBook/음반/DVD/GIFT 및 잡지 상품 제외)
안내
  • 해당도서의 리뷰가 없습니다.

Klover 평점/리뷰 (0)

교환/반품/품절안내

※ 상품 설명에 반품/교환 관련한 안내가 있는 경우 그 내용을 우선으로 합니다. (업체 사정에 따라 달라질 수 있습니다.)

교환/반품/품절안내
반품/교환방법 마이룸 > 주문관리 > 주문/배송내역 > 주문조회 > 반품/교환신청 ,
[1:1상담>반품/교환/환불] 또는 고객센터 (1544-1900)

※ 오픈마켓, 해외배송주문, 기프트 주문시 [1:1상담>반품/교환/환불]
    또는 고객센터 (1544-1900)
반품/교환가능 기간 변심반품의 경우 수령 후 7일 이내,
상품의 결함 및 계약내용과 다를 경우 문제점 발견 후 30일 이내
반품/교환비용 변심 혹은 구매착오로 인한 반품/교환은 반송료 고객 부담
반품/교환 불가 사유
  • 소비자의 책임 있는 사유로 상품 등이 손실 또는 훼손된 경우
    (단지 확인을 위한 포장 훼손은 제외)
  • 소비자의 사용, 포장 개봉에 의해 상품 등의 가치가 현저히 감소한 경우
    예) 화장품, 식품, 가전제품(악세서리 포함) 등
  • 복제가 가능한 상품 등의 포장을 훼손한 경우
    예) 음반/DVD/비디오, 소프트웨어, 만화책, 잡지, 영상 화보집
  • 소비자의 요청에 따라 개별적으로 주문 제작되는 상품의 경우 ((1)해외주문도서)
  • 디지털 컨텐츠인 eBook, 오디오북 등을 1회 이상 다운로드를 받았을 경우
  • 시간의 경과에 의해 재판매가 곤란한 정도로 가치가 현저히 감소한 경우
  • 전자상거래 등에서의 소비자보호에 관한 법률이 정하는 소비자 청약철회 제한 내용에
    해당되는 경우
(1) 해외주문도서 : 이용자의 요청에 의한 개인주문상품으로 단순변심 및 착오로 인한 취소/교환/반품 시 ‘해외주문 반품/취소 수수료’ 고객 부담 (해외주문 반품/취소 수수료 : ①양서-판매정가의 12%, ②일서-판매정가의 7%를 적용)
상품 품절 공급사(출판사) 재고 사정에 의해 품절/지연될 수 있으며, 품절 시 관련 사항에 대해서는
이메일과 문자로 안내드리겠습니다.
소비자 피해보상
환불지연에 따른 배상
  • 상품의 불량에 의한 교환, A/S, 환불, 품질보증 및 피해보상 등에 관한 사항은
    소비자분쟁해결 기준 (공정거래위원회 고시)에 준하여 처리됨
  • 대금 환불 및 환불지연에 따른 배상금 지급 조건, 절차 등은 전자상거래 등에서의
    소비자 보호에 관한 법률에 따라 처리함

이 책의 원서번역서

안내

이 분야의 베스트

  • 한기준
    27,900원
  • 사이토 고키
    21,600원
  • 윤성우
    22,500원
  • 박응용
    16,920원
  • 길벗알앤디
    18,000원
더보기+

이 분야의 신간

  • 한기준
    27,900원
  • 정재곤
    36,000원
  • 우종필
    14,220원
  • 이두원 외 12명
    22,500원
  • 히라오카 카즈유키
    28,800원
더보기+

바로가기

  • 우측 확장형 배너 2

최근 본 상품