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

『모던 웹사이트 디자인의 정석』은 기본적인 HTML5/CSS3를 더 발전시켜 다양한 형태의 레이아웃을 가진 웹 페이지를 만드는 방법을 알아보는 책이다. 따라서 HTML5/CSS3에 대한 기초 지식이 있는 독자를 대상으로 한다. 기존에 웹사이트 디자인을 할 때는 2단 또는 3단으로 화면을 구분하는 레이아웃 패턴을 만드는 방법만 알아도 충분했다. 하지만 이제는 반응형 웹 디자인도 고려하고, 스마트폰 또는 태블릿이라는 다양한 장치를 지원하는 레이아웃을 만들 수 있어야 한다.

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

저자 : 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 지원
칼럼 및 요소 색인