HOME > 상세정보

상세정보

(HTML5 & CSS3로 만들고 반응형 웹 디자인까지 고려한) 모던 웹사이트 디자인의 정석 : HTML5 & CSS3 design book (25회 대출)

자료유형
단행본
개인저자
윤인성, 역
단체저자명
エビスコム
서명 / 저자사항
(HTML5 & CSS3로 만들고 반응형 웹 디자인까지 고려한) 모던 웹사이트 디자인의 정석 : HTML5 & CSS3 design book / EBISUCOM 지음 ; 윤인성 옮김
발행사항
파주 :   위키북스,   2015  
형태사항
318 p. : 천연색삽화 ; 25 cm
총서사항
위키북스 오픈소스 & 웹 시리즈 ;075
원표제
HTML5&CSS3デザインブック : ステップバイステップ形式でマスタ-できる
ISBN
9791158390211
일반주기
부록: 인터넷 익스플로러 8 지원, 칼럼  
색인수록  
000 00000cam c2200205 c 4500
001 000045872276
005 20160520162243
007 ta
008 160520s2015 ggka 001c kor
020 ▼a 9791158390211 ▼g 93000
035 ▼a (KERIS)BIB000013944775
040 ▼a 247023 ▼c 247023 ▼d 247023 ▼d 222001 ▼d 211009
041 1 ▼a kor ▼h jpn
082 0 4 ▼a 006.74 ▼2 23
085 ▼a 006.74 ▼2 DDCK
090 ▼a 006.74 ▼b 2015z1
110 ▼a エビスコム
245 2 0 ▼a (HTML5 & CSS3로 만들고 반응형 웹 디자인까지 고려한) 모던 웹사이트 디자인의 정석 : ▼b HTML5 & CSS3 design book / ▼d EBISUCOM 지음 ; ▼e 윤인성 옮김
246 1 9 ▼a HTML5&CSS3デザインブック : ▼b ステップバイステップ形式でマスタ-できる
246 3 ▼a HTML5 and CSS3로 만들고 반응형 웹 디자인까지 고려한 모던 웹사이트 디자인의 정석 : ▼b HTML5 and CSS3 design book
246 3 ▼a Eichitiemueru faivu ando shiesuesu suri dezain bukku : ▼b suteppu bai suteppu keishiki de masuta dekiru
246 3 9 ▼a HTML5 and CSS3デザインブック
260 ▼a 파주 : ▼b 위키북스, ▼c 2015
300 ▼a 318 p. : ▼b 천연색삽화 ; ▼c 25 cm
440 0 0 ▼a 위키북스 오픈소스 & 웹 시리즈 ; ▼v 075
500 ▼a 부록: 인터넷 익스플로러 8 지원, 칼럼
500 ▼a 색인수록
700 1 ▼a 윤인성, ▼e
910 0 ▼a EBISUCOM, ▼e
910 0 ▼a E Bisukomu Tekku Rabo, ▼e
945 ▼a KLPA
949 ▼a 위키북스 오픈소스 and 웹 시리즈 ; ▼v 075

No. 소장처 청구기호 등록번호 도서상태 반납예정일 예약 서비스
No. 1 소장처 과학도서관/Sci-Info(1층서고)/ 청구기호 006.74 2015z1 등록번호 121236587 도서상태 대출가능 반납예정일 예약 서비스 B M
No. 2 소장처 세종학술정보원/과학기술실/ 청구기호 006.74 2015z1 등록번호 151331735 도서상태 대출가능 반납예정일 예약 서비스
No. 소장처 청구기호 등록번호 도서상태 반납예정일 예약 서비스
No. 1 소장처 과학도서관/Sci-Info(1층서고)/ 청구기호 006.74 2015z1 등록번호 121236587 도서상태 대출가능 반납예정일 예약 서비스 B M
No. 소장처 청구기호 등록번호 도서상태 반납예정일 예약 서비스
No. 1 소장처 세종학술정보원/과학기술실/ 청구기호 006.74 2015z1 등록번호 151331735 도서상태 대출가능 반납예정일 예약 서비스

컨텐츠정보

책소개

위키북스 오픈소스 & 웹 시리즈 75권. 이 책은 기본적인 HTML5/CSS3를 더 발전시켜 다양한 형태의 레이아웃을 가진 웹 페이지를 만드는 방법을 알아보는 책이다. 따라서 HTML5/CSS3에 대한 기초 지식이 있는 독자를 대상으로 한다. 이 책에서는 기본적인 단 구조의 웹 페이지를 만드는 방법부터 반응형 웹 디자인까지, 레이아웃의 기본이 되는 '박스 정렬'을 중심으로 자세히 설명한다.

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

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

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

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

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

★ 이 책에서 사이트를 제작하는 흐름 ★
'반응형 웹 디자인'으로 웹 페이지를 제작할 때는 다양한 화면 크기에서 표시 또는 동작을 확인하면서 작업해야 합니다. 따라서 이 책의 예제에서는 갑자기 최종적인 완성형을 완성하는 것이 아니라 다음과 같은 단계로 차근차근 사이트를 완성해 나갑니다.
1. 박스를 정렬해서 레이아웃의 기본 구조를 만듭니다.
2. 박스의 내부에 요소를 넣고 레이아웃을 조정합니다.
3. 박스 또는 요소를 추가/수정해서 페이지를 마무리합니다.

★ 예제 다운로드 ★
이 책에서 사용하는 예제 코드 또는 이미지는 다음 웹 사이트에서 내려받을 수 있습니다.
http://wikibook.co.kr/modern-web-design-book


정보제공 : Aladin

저자소개

EBISUCOM(지은이)

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

윤인성(옮긴이)

출근하는 것이 싫어서 책을 집필하기 시작했다. 현재 직업 특성상 집에서 나갈 이유가 별로 없다는 것에 굉장히 만족하고 있다. 홍차와 커피를 좋아하며 기타, 가야금, 그림 그리기, 스컬핑 등이 취미다. 책의 소개말을 쓰는 시점을 기준으로 해서 이 책은 61번째 도서다. 저서로는 한빛아카데미의 《자바스크립트 프로그래밍 입문》, 《C# 프로그래밍》과 한빛미디어의 《혼자 공부하는 파이썬》, 《모던 웹을 위한 HTML5+CSS3 바이블(3판)》, 《모던 웹을 위한 JavaScript+jQuery 입문》, 《모던 웹을 위한 Node.js 프로그래밍》 등이 있다. 역서로는 《TopCoder 알고리즘 트레이닝》, 《자바 퍼즐러》, 《소셜 코딩으로 이끄는 GitHub 실천 기술》, 《Nature of Code》 등이 있다.

정보제공 : Aladin

목차

목차
이 책의 구성 = 4
이 책의 예제 = 8
페이지 구성 = 9
01장 웹 페이지의 단 구조		
 1-1 웹 페이지의 단 구조 = 18
  단구조 = 18
  웹 페이지에서의 단 구조 = 19
  웹 페이지 레이아웃의 발전 = 20
  CSS3로 구현하는 단 구조 = 21
 1-2 박스 가로 정렬 = 22
  박스 가로 정렬 = 23
  가로 정렬할 대상 변경 = 26
  가로 정렬할 박스의 개수 변경 = 28
  Clearfix 구조 = 29
 1-3 박스 분할 = 32
  박스 분할 = 32
  분할하고 싶은 만큼 박스 개수를 추가 = 33
 1-4 박스의 너비를 지정 = 34
  박스의 너비를 지정 = 34
   너비의 합이 100%를 넘는 경우 = 36
   칼럼 탈락을 사용할 때의 주의 사항 = 38
  한쪽 박스의 너비를 픽셀로 고정 = 40
 1-5 박스 정렬 순서 지정 = 44
  박스 정렬 순서 지정 = 44
 1-6 반응형 웹 디자인과 관련된 설정 = 46
  반응형 웹 디자인의 기본 = 46
  반응형 웹 디자인 응용 = 48
   주요 스마트폰 또는 태블릿의 브라우저 화면 크기 = 52
  중간 단계를 추가 = 53
   반응형 웹 디자인에서 중복된 설정을 하나로 합치기 = 56
   중간 단계를 칼럼 탈락으로 구현 = 57
   박스를 겹쳐 올리는 레이아웃 = 58
02장 웹 페이지 제작 준비		
 2-1 요소 준비 = 62
  2-1-1 사이트 이름 = 63
  2-1-2 기사 = 65
  2-1-3 메뉴(세로 정렬) = 67
  2-1-4 메뉴(가로 정렬) = 69
  2-1-5 저작권 = 71
 2-2 웹 페이지 준비 = 72
  DOCTYPE 선언 = 73
  언어 종류 = 73
  〈head〉태그와〈body〉태그 = 73
  HTML 파일 인코딩 = 73
  페이지 제목 = 74
  뷰 포트 = 74
  스타일시트 적용 = 74
  스타일시트 파일의 인코딩 = 75
  한국어 폰트 = 75
   뷰 포트 설정과 웹 페이지 출력 = 76
03장 블로그/뉴스 스타일 사이트의 콘텐츠 페이지		
 3-1 레이아웃 기본 구조 만들기 = 80
  박스 준비 = 81
  박스를 가로 정렬 = 82
  반응형 웹 디자인 설정 = 83
 3-2 박스 내부에 요소 추가 = 84
  사이트 이름 = 85
  내비게이션 = 86
  기사 = 87
  사이드 메뉴 = 88
  저작권 = 92
  본문 내부의 그림 = 93
  출력 확인 = 94
   다양한 너비의 브라우저 화면에서 출력 확인 = 95
 3-3 레이아웃 조정 = 96
  박스를 바 형태로 디자인 = 97
  박스 사이에 구분선 삽입 = 98
  요소의 간격을 조정(세로 방향) = 99
  요소의 간격을 조정(가로 방향) = 100
 3-4 반응형 웹 디자인과 관련된 조정 = 102
  3-4-1 조정에 필요한 @media 설정을 추가 = 104
  3-4-2 내비게이션 메뉴를 간소화 = 105
  3-4-3 사이트 이름과 기사 제목을 간소화 = 107
  3-4-4 서브 메뉴를 2단 구조로 변경 = 110
  3-4-5 레이아웃 전체의 너비를 고정 = 113
 3-5 요소 추가와 수정 = 114
  3-5-1 웹 폰트로 사이트 이름 출력 = 115
   Google Fonts의 웹 폰트 사용법 = 117
  3-5-2 기사의 작성일에 아이콘을 붙여 출력 = 118
   Font Awesome = 121
  3-5-3 기사 분류를 라벨의 형태로 출력 = 122
  3-5-4 기사에 소제목을 추가 = 127
  3-5-5 메뉴에 리스트 마크 추가 = 130
  3-5-6 메뉴에 섬네일 그림 추가 = 132
  3-6-7 섬네일 그림에 글자가 겹쳐진 메뉴 = 138
  3-5-8 플랫 디자인의 SNS 공유 버튼 추가 = 144
   공유 버튼 설정 = 152
  3-5-9 관련 기사 메뉴 추가 = 154
 3-6 내비게이션 바와 푸터가 화면의 너비를 꽉 채우도록 디자인 = 162
04장 블로그/뉴스 스타일의 최상위 페이지		
 4-1 최상위 페이지 작성 = 170
  최상위 페이지 작성 = 171
  개요를 추가 = 172
  "계속 읽기" 버튼 추가 = 176
  개요를 더 추가하고 2개씩 가로로 정렬 = 178
 4-2 요소 추가와 수정 = 184
  4-2-1 페이지네이션 추가 = 185
  4-2-2 원형 배지 추가 = 189
   클래스 이름 변경과 마크업 조정 = 196
05장 비즈니스 스타일 사이트의 최상위 페이지		
 5-1 레이아웃 기본 구조 생성 = 200
  박스 준비 = 201
  박스를 가로로 정렬 = 202
  반응형 웹 디자인과 관련된 설정 = 203
 5-2 박스 내부에 요소를 추가 = 204
  사이트 이름 = 205
  내비게이션 = 206
  헤더 그림 = 207
  공지사항 = 208
  저작권 = 210
  출력 확인 = 211
 5-3 레이아웃 조정 = 212
  내비게이션 메뉴를 오른쪽에 붙여 출력 = 213
  헤더 그림을 화면에 꽉 차게 출력 = 215
  푸터를 바의 형태로 수정 = 217
  요소의 간격 조정(세로 방향) = 218
   각 박스에 배경색을 넣어 디자인 = 219
 5-4 반응형 웹 디자인과 관련된 조정 = 220
  5-4-1 조정에 필요한 @media 설정을 추가 = 222
  5-4-2 내비게이션 메뉴를 간소화 = 223
  5-4-3 날짜 아래에 글자가 파고들지 않게 수정 = 225
  5-4-4 레이아웃 전체의 너비 고정 = 228
   큰 화면에서도 헤더 그림을 너비를 꽉 채워 출력하는 경우 = 231
 5-5 요소의 추가와 수정 = 232
  5-5-1 사이트 이름을 그림으로 출력 = 233
  5-5-2 사이트 이름을 나타내는 그림의 해상도를 높임 = 234
  5-5-3 요소를 테두리로 감싸 디자인 = 237
  5-5-4 SNS 메뉴 추가 = 238
  5-5-5 물풍선 형태로 추가 설명 = 248
  5-5-6 콘텐츠 개요 추가 = 252
   padding 속성을 이용한 개요의 간격 조정 = 263
  5-5-7 헤더 그림에 캐치 카피 올리기 = 264
 5-6 내비게이션 메뉴를 토글 형태로 = 268
  메뉴를 세로로 정렬 = 270
  토글 버튼 생성 = 273
  토글 버튼의 디자인과 위치 조정 = 276
   클래스 이름 변경 또는 마크업 조정 = 282
06장 비즈니스 사이트 스타일의 콘텐츠 페이지		
 6-1 콘텐츠 페이지 작성 = 286
  콘텐츠 페이지 작성 = 287
  기사의 레이아웃 구성 = 288
  사이드 메뉴의 레이아웃 구성 = 292
 6-2 요소 추가와 수정 = 296
  6-2-1 기사의 디자인을 조정 = 297
  6-2-2 빵 부스러기 리스트 추가 = 302
  6-2-3 메뉴를 테두리로 감싸서 디자인 = 306
   멀티 칼럼 기능을 이용한 단락 만들기 = 311
부록		
 인터넷 익스플로러 8 지원 = 312
 칼럼 및 요소 색인 = 314

관련분야 신착자료

Cartwright, Hugh M. (2021)
한국소프트웨어기술인협회. 빅데이터전략연구소 (2021)