청구할인 안내(인터파크 제휴카드) | 안내
북피니언 롯데카드 30% (최대할인 3만원 / 3만원 이상 결제)
하나SK 북&카드 30% (최대할인 3만원 / 3만원 이상 결제)
EBS 롯데카드 20% (최대할인 3만원 / 3만원 이상 결제)
인터파크 NEW 우리V카드 10% (최대할인 3만원 / 3만원 이상 결제)
인터파크 현대카드 7% (최대할인 3만원 / 3만원 이상 결제)
Close

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

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

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

27,000원

  • 24,300 (10%할인)

    1,350P (5%적립)

  • (6건)

    12,000원 ~(56%할인)

    [특급]

  • 중고판매

    이 책을 인터파크에
    판매하세요

할인혜택
  • 19,300원 [하나카드] 5만원이상 구매시 5천원 할인 !할인쿠폰
적립혜택
배송정보
주문수량
감소 증가

I-Point는 출고완료 후 14일 이내 마이도서에서 직접 받기를 하셔야 합니다. (이후 자동소멸)

  • 이벤트/기획전

  • 연관도서(53)

  • 사은품(2)

책소개

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

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

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

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

출판사 서평

이 책은 스마트폰/태블릿 등 다양한 디바이스에 대응하는 '반응형 웹 디자인'을 중심으로 한 현재의 웹 페이지 레이아웃을 만들 때 사용하는 기술을 다룹니다.

[기초]
레이아웃의 근본이 되는 박스를 정렬하는 방법을 배우고 웹 페이지의 단 구조를 자유자재로 만드는 기술을 다룹니다.

[실전]
'블로그/뉴스 스타일 사이트'와 '비즈니스 스타일 사이트'라는 두 종류의 실전 예를 처음부터 단계적으로 만들어 봅니다.

[응용]
멀티 디바이스에 대응하고, 사이트를 더 좋은 형태로 향상시킬 수 있는 다양한 테크닉을 소개합니다. 또한 실전에서 활용할 수 있는 다양한 팁을 배웁니다.

이 책에서 사이트를 제작하는 흐름
'반응형 웹 디자인'으로 웹 페이지를 제작할 때는 다양한 화면 크기에서 표시 또는 동작을 확인하면서 작업해야 합니다. 따라서 이 책의 예제에서는 갑자기 최종적인 완성형을 완성하는 것이 아니라 다음과 같은 단계로 차근차근 사이트를 완성해 나갑니다.

1. 박스를 정렬해서 레이아웃의 기본 구조를 만듭니다.
2. 박스의 내부에 요소를 넣고 레이아웃을 조정합니다.
3. 박스 또는 요소를 추가/수정해서 페이지를 마무리합니다.

목차

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종
판매수 0권

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

생년월일 -
출생지 -
출간도서 0종
판매수 0권

출근하는 게 싫어서 집필과 번역을 시작했다. 일본어는 픽시브에서 웹 코믹을 읽다가 배웠다고 전해진다. 직업 특성상 집에서 나갈 이유가 별로 없다는 것에 굉장히 만족하는 성격이기도 하다. 홍차와 커피를 좋아하며 요리, 음악, 그림, 스컬핑 등이 취미다.
[모던 웹을 위한 JavaScript+jQuery 입문], [모던 웹을 위한 Node.js 프로그래밍], [모던 웹 디자인을 위한 HTML5+CSS3 입문] 등을 저술하였으며, [TopCoder 알고리즘 트레이닝], [Nature of Code](이상 한빛미디어), [소셜 코딩으로 이끄는 GitHub 실천 기술](제이펍) 등을 번역했다.

이 상품의 시리즈

위키북스 오픈소스 & 웹 시리즈(총 76권 / 현재구매 가능도서 54권)

펼쳐보기

리뷰

10.0 (총 0건)

등록된 리뷰중 당선작을 선정하여, 도서상품권을 드립니다.

리뷰쓰기

기대평

작성시 유의사항

평점
0/200자
등록하기

기대평

9.7

교환/환불

교환/환불 방법

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

교환/환불 가능 기간

고객변심은 출고완료 다음날부터 14일 까지만 교환/환불이 가능함

교환/환불 비용

고객변심 또는 구매착오의 경우에만 2,500원 택배비를 고객님이 부담함

교환/환불 불가사유

반품접수 없이 반송하거나, 우편으로 보낼 경우 상품 확인이 어려워 환불이 불가할 수 있음
배송된 상품의 분실, 상품포장이 훼손된 경우, 비닐랩핑된 상품의 비닐 개봉시 교환/반품이 불가능함

소비자 피해보상

소비자 피해보상의 분쟁처리 등에 관한 사항은 소비자분쟁해결기준(공정거래위원회 고시)에 따라 비해 보상 받을 수 있음
교환/반품/보증조건 및 품질보증 기준은 소비자기본법에 따른 소비자 분쟁 해결 기준에 따라 피해를 보상 받을 수 있음

기타

도매상 및 제작사 사정에 따라 품절/절판 등의 사유로 주문이 취소될 수 있음(이 경우 인터파크도서에서 고객님께 별도로 연락하여 고지함)

배송안내

  • 인터파크 도서 상품은 택배로 배송되며, 출고완료 1~2일내 상품을 받아 보실 수 있습니다

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

  • 군부대, 교도소 등 특정기관은 우체국 택배만 배송가능하여, 인터파크 외 타업체 배송상품인 경우 발송되지 않을 수 있습니다.

  • 배송비

도서(중고도서 포함) 구매

2,000원 (1만원이상 구매 시 무료배송)

음반/DVD/잡지/만화 구매

2,000원 (2만원이상 구매 시 무료배송)

도서와 음반/DVD/잡지/만화/
중고직배송상품을 함께 구매

2,000원 (1만원이상 구매 시 무료배송)

업체직접배송상품 구매

업체별 상이한 배송비 적용