“모던 웹사이트 디자인의 정석” 에서 ‘모던 웹사이트’는 반응형으로 설계한 웹사이트를 의미한다. 최소한 이 책에서는 ‘모던 웹사이트’의 정의는 그런 것 같다.반응형 웹사이트를 만들기 위해 필요한 요소는 HTML5, CSS3, JavaScript. JQuery 등을 필요하지 않을까 싶다. 최소 범위로 필요한 항목을 줄인다면 CSS3만 충분히 알아도 반응형 웹사이트를 만들 수는 있다.이 책의 HTML 5와 CSS3의 기초 기술 수준의 지식을 사용하여 반응형 웹사이트에서 자주 쓰이는 패턴과 페이지 구성 요소를 일관성을 유지하면서 단계별로 차근히 설명하고 있다. 예시한 예제를 적절하게 습득한다면 초보자들도 반응형 웹의 레이아웃이나 요소 구성에 필요한 기본 지식을 습득할 뿐만 아니라 일정 수준 이상의 산출물을 만들어 낼 있다.대부분의 일본 IT 기술 서적이 그렇듯이 쉽게 설명되어 있고 단계별로 따라하기 쉽도록 구성되어 있고 번역도 그렇다. 따라서 프론트엔드 개발 진입점으로 좋은 서적이다. 다만, 책이 예제 위주로 단계적으로 페이지를 만들어가는 과정을 설명하다 보니 세부기술이나 정확한 용도 및 이해를 목표로 하지는 않는다. 즉 결과물이 나오지만 왜 이렇게 결과가 나오는지를 정확하게 이해하지 못할 수도 있다. 따라서 이 책을 기초로 HTML5와 CSS3를 상세하게 이해할 수 있는 서적을 보는 것도 좋은 방법일 것 같다. 더불어 Bootstrap 같은 프레임워크도 같이 공부해두면, 비교적 적은 노력으로 높은 퀄리티의 페이지를 작성할 수 있을 것 같다.반응형 웹을 처음 시작한 분이나 개념이나 방법을 정확하게 이해하지 못한 분들에게 추천한다.
반응형 웹 디자인에서 레이아웃을 자유자재로 다루는 최신 방법!
모던 웹사이트 디자인의 정석 은 기본적인 HTML5/CSS3를 더 발전시켜 다양한 형태의 레이아웃을 가진 웹 페이지를 만드는 방법을 알아보는 책이다. 따라서 HTML5/CSS3에 대한 기초 지식이 있는 독자를 대상으로 한다. 기존에 웹사이트 디자인을 할 때는 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 지원
칼럼 및 요소 색인
카테고리 없음