플렉시블 박스 레이아웃을 이용한 최신 표준 반응형 웹 디자인 마스터하기!
이 책은 멀티 디바이스에 대응하는 웹 사이트를 단계적으로 만들어 보면서 최신 표준의 HTML과 CSS를 공부하기 위한 책입니다.
웹 페이지 제작을 둘러싼 환경은 최근 몇 년 동안 크게 변화하고 있습니다. PC보다는 스마트폰, 태블릿 등의 모바일 장치에서 더 많이 접속하고 있으며, 이로 인해 단순한 1단 구조를 가진 웹 페이지를 많이 만들게 되었습니다. 이 책에서는 오래된 웹 브라우저 때문에 사용하지 못하던 기능들을 모두 활용해 간단한 단계를 거쳐 현...
더보기
| ISBN | 9791158390686(1158390688) |
|---|---|
| 쪽수 | 320쪽 |
| 크기 | 188 * 241 * 20 mm /769g 판형알림 |
책소개
이 책이 속한 분야
『최신 표준 HTML+CSS 디자인』은 멀티 디바이스에 대응하는 웹 사이트를 단계적으로 만들어 보면서 최신 표준의 HTML과 CSS를 공부하기 위한 책이다. 책에서는 오래된 웹 브라우저 때문에 사용하지 못하던 기능들을 모두 활용해 간단한 단계를 거쳐 현대적인 웹 페이지를 만드는 방법을 소개한다.
상세이미지
목차
[1장] 사전 준비
1-1 1단 구성 웹 페이지를 최신 HTML과 CSS로 만들기
1-1-1 1단 구성 웹 페이지란?
__반응형 웹 디자인
__시맨틱
1-1-2 최신 HTML과 CSS
__오래된 브라우저 지원
1-2 구축할 페이지와 사이트
1-2-1 페이지 구조와 만드는 순서
1-2-2 페이지의 배색
1-3 웹 페이지 준비하기
1-3-1 HTML 파일 설정하기
1-3-2 CSS 파일 설정하기
__HTML과 CSS 수정에 사용할 텍스트 에디터
__페이지 출력 확인에 사용할 브라우저
__다양한 화면 크기에서 출력 결과를 간단하게 확인하는 방법
[2장] 최상위 페이지 만들기 - 콘텐츠
2-1 CONTENTS A: 히어로 이미지
2-1-1 이미지 위에 글자 출력하기
2-1-2 웹 폰트로 출력할 글자 간격 조정하기
2-1-3 브라우저 화면을 꽉 채우도록 이미지 출력하기
2-1-4 SVG로 로고 이미지 출력하기
2-1-5 링크 박스 출력하기
2-2 CONTENTS B: 개요(아이콘 + 글자)
2-2-1 개요 글자 출력하기
2-2-2 아이콘 출력
2-2-3 3개의 개요를 가로로 정렬하기
2-3 CONTENTS C: 개요(이미지 + 글자)
2-3-1 이미지와 글자 출력하기
2-3-2 이미지와 글자를 가로로 정렬하기
2-4 CONTENTS D: 개요(이미지 + 글자: 반대로 배치하기)
2-4-1 콘텐츠 C를 기반으로 새로운 블록 만들기
2-4-2 이미지의 너비를 고정하고 정렬 순서 변경하기
[3장] 최상위 페이지 만들기 - 내비게이션
3-1 FOOTER A: 사이트 정보
3-1-1 사이트 정보 출력하기
3-1-2 푸터 디자인 지정하기
3-2 FOOTER B: 푸터 메뉴
3-2-1 푸터 메뉴 만들기
3-2-2 3개의 메뉴를 가로로 정렬하기
3-3 FOOTER C: 저작권
3-3-1 저작권 출력하기
3-3-2 푸터 내부의 요소 레이아웃 조정하기
3-4 FOOTER D: SNS 메뉴
3-4-1 SNS 메뉴 출력하기
3-4-2 SNS 메뉴의 디자인 지정하기
3-5 HEADER A : 헤더의 사이트 이름
3-6 HEADER B : 내비게이션 메뉴
3-6-1 내비게이션 메뉴 만들기
3-6-2 큰 화면에서는 내비게이션 메뉴를 가로로 정렬하기
3-7 HEADER C : 토글 버튼
3-7-1 토글 버튼 만들기
3-7-2 토글 버튼으로 내비게이션 메뉴 열고 닫기
[4장] 콘텐츠 페이지 만들기 - 콘텐츠 / 소개 / 문의
4-1 콘텐츠 페이지
4-1-1 콘텐츠 페이지 만들기
4-1-2 기사의 디자인 지정하기
4-1-3 빵 부스러기 리스트 출력하기
4-2 소개 페이지
4-2-1 소개 페이지 만들기
4-2-2 이미지와 연혁 출력하기
4-3 문의 페이지
4-3-1 문의 페이지 만들기
4-3-2 지도 출력하기
[5장] 기사 목록 페이지 만들기 - 카드 형태 / 썸네일 형태
5-1 기사 목록 A : 카드 형태(이미지 + 글자를 위아래에 배치)
5-1-1 기사 목록 A 페이지 만들기
5-1-2 기사 개요 출력하기
5-1-3 브라우저 화면의 너비에 따라 개요의 정렬 상태 바꾸기
5-2 기사 목록 B : 카드 형태(이미지 + 글자를 왼쪽 오른쪽에 배치)
5-3 기사 목록 C : 썸네일 형태(이미지 + 글자를 중첩해서 배치)
[6장] 디자인 재구성
6-1 헤더 색 재구성하기
6-2 헤더와 히어로 이미지를 하나로 디자인하기
6-3 헤더를 화면 위에 고정하기
6-4 연관 기사 메뉴 추가하기
6-5 메타데이터 추가하기
6-6 페이지의 기본색 재구성하기
[부록]
HTML 레퍼런스
__기본 문법
__HTML 기본 설정
__메타데이터
__섹션
__콘텐츠
CSS 레퍼런스
__CSS 기본 문법
__선택자
__미디어쿼리
박스 모델
__박스의 기본 설정
__박스의 종류
__플렉시블 박스 레이아웃
__포지션 레이아웃
__박스 내부의 콘텐츠 디자인
__단위
__색
__변수
최적화
주요 장치의 화면 크기
오래된 브라우저 전용 설정
1-1 1단 구성 웹 페이지를 최신 HTML과 CSS로 만들기
1-1-1 1단 구성 웹 페이지란?
__반응형 웹 디자인
__시맨틱
1-1-2 최신 HTML과 CSS
__오래된 브라우저 지원
1-2 구축할 페이지와 사이트
1-2-1 페이지 구조와 만드는 순서
1-2-2 페이지의 배색
1-3 웹 페이지 준비하기
1-3-1 HTML 파일 설정하기
1-3-2 CSS 파일 설정하기
__HTML과 CSS 수정에 사용할 텍스트 에디터
__페이지 출력 확인에 사용할 브라우저
__다양한 화면 크기에서 출력 결과를 간단하게 확인하는 방법
[2장] 최상위 페이지 만들기 - 콘텐츠
2-1 CONTENTS A: 히어로 이미지
2-1-1 이미지 위에 글자 출력하기
2-1-2 웹 폰트로 출력할 글자 간격 조정하기
2-1-3 브라우저 화면을 꽉 채우도록 이미지 출력하기
2-1-4 SVG로 로고 이미지 출력하기
2-1-5 링크 박스 출력하기
2-2 CONTENTS B: 개요(아이콘 + 글자)
2-2-1 개요 글자 출력하기
2-2-2 아이콘 출력
2-2-3 3개의 개요를 가로로 정렬하기
2-3 CONTENTS C: 개요(이미지 + 글자)
2-3-1 이미지와 글자 출력하기
2-3-2 이미지와 글자를 가로로 정렬하기
2-4 CONTENTS D: 개요(이미지 + 글자: 반대로 배치하기)
2-4-1 콘텐츠 C를 기반으로 새로운 블록 만들기
2-4-2 이미지의 너비를 고정하고 정렬 순서 변경하기
[3장] 최상위 페이지 만들기 - 내비게이션
3-1 FOOTER A: 사이트 정보
3-1-1 사이트 정보 출력하기
3-1-2 푸터 디자인 지정하기
3-2 FOOTER B: 푸터 메뉴
3-2-1 푸터 메뉴 만들기
3-2-2 3개의 메뉴를 가로로 정렬하기
3-3 FOOTER C: 저작권
3-3-1 저작권 출력하기
3-3-2 푸터 내부의 요소 레이아웃 조정하기
3-4 FOOTER D: SNS 메뉴
3-4-1 SNS 메뉴 출력하기
3-4-2 SNS 메뉴의 디자인 지정하기
3-5 HEADER A : 헤더의 사이트 이름
3-6 HEADER B : 내비게이션 메뉴
3-6-1 내비게이션 메뉴 만들기
3-6-2 큰 화면에서는 내비게이션 메뉴를 가로로 정렬하기
3-7 HEADER C : 토글 버튼
3-7-1 토글 버튼 만들기
3-7-2 토글 버튼으로 내비게이션 메뉴 열고 닫기
[4장] 콘텐츠 페이지 만들기 - 콘텐츠 / 소개 / 문의
4-1 콘텐츠 페이지
4-1-1 콘텐츠 페이지 만들기
4-1-2 기사의 디자인 지정하기
4-1-3 빵 부스러기 리스트 출력하기
4-2 소개 페이지
4-2-1 소개 페이지 만들기
4-2-2 이미지와 연혁 출력하기
4-3 문의 페이지
4-3-1 문의 페이지 만들기
4-3-2 지도 출력하기
[5장] 기사 목록 페이지 만들기 - 카드 형태 / 썸네일 형태
5-1 기사 목록 A : 카드 형태(이미지 + 글자를 위아래에 배치)
5-1-1 기사 목록 A 페이지 만들기
5-1-2 기사 개요 출력하기
5-1-3 브라우저 화면의 너비에 따라 개요의 정렬 상태 바꾸기
5-2 기사 목록 B : 카드 형태(이미지 + 글자를 왼쪽 오른쪽에 배치)
5-3 기사 목록 C : 썸네일 형태(이미지 + 글자를 중첩해서 배치)
[6장] 디자인 재구성
6-1 헤더 색 재구성하기
6-2 헤더와 히어로 이미지를 하나로 디자인하기
6-3 헤더를 화면 위에 고정하기
6-4 연관 기사 메뉴 추가하기
6-5 메타데이터 추가하기
6-6 페이지의 기본색 재구성하기
[부록]
HTML 레퍼런스
__기본 문법
__HTML 기본 설정
__메타데이터
__섹션
__콘텐츠
CSS 레퍼런스
__CSS 기본 문법
__선택자
__미디어쿼리
박스 모델
__박스의 기본 설정
__박스의 종류
__플렉시블 박스 레이아웃
__포지션 레이아웃
__박스 내부의 콘텐츠 디자인
__단위
__색
__변수
최적화
주요 장치의 화면 크기
오래된 브라우저 전용 설정
출판사 서평
Klover 리뷰 (0)
북로그 리뷰 (0) 쓰러가기
북로그 리뷰는 본인 인증 후 작성 가능합니다.
책이나 타인에 대해 근거 없이 비방을 하거나 타인의 명예를 훼손할 수 있는 내용은 비공개 처리 될 수 있습니다.
※ 북로그 리뷰 리워드 제공 2021. 4. 1 종료
책이나 타인에 대해 근거 없이 비방을 하거나 타인의 명예를 훼손할 수 있는 내용은 비공개 처리 될 수 있습니다.
※ 북로그 리뷰 리워드 제공 2021. 4. 1 종료
문장수집 (0) 문장수집 쓰기 나의 독서기록 보기
※구매 후 문장수집 작성 시, 리워드를 제공합니다.
안내
교환/반품/품절안내
※ 상품 설명에 반품/교환 관련한 안내가 있는 경우 그 내용을 우선으로 합니다. (업체 사정에 따라 달라질 수 있습니다.)
| 반품/교환방법 | 마이룸 > 주문관리 > 주문/배송내역 > 주문조회 > 반품/교환신청 , [1:1상담>반품/교환/환불] 또는 고객센터 (1544-1900) ※ 오픈마켓, 해외배송주문, 기프트 주문시 [1:1상담>반품/교환/환불] 또는 고객센터 (1544-1900) |
|---|---|
| 반품/교환가능 기간 | 변심반품의 경우 수령 후 7일 이내, 상품의 결함 및 계약내용과 다를 경우 문제점 발견 후 30일 이내 |
| 반품/교환비용 | 변심 혹은 구매착오로 인한 반품/교환은 반송료 고객 부담 |
| 반품/교환 불가 사유 |
|
| 상품 품절 | 공급사(출판사) 재고 사정에 의해 품절/지연될 수 있으며, 품절 시 관련 사항에 대해서는 이메일과 문자로 안내드리겠습니다. |
| 소비자 피해보상 환불지연에 따른 배상 |
|
기프트 BEST
![[허닭]BEST추천 닭가슴살 18팩세트(전자렌지용기증정)](http://image.kyobobook.co.kr/newimages/giftshop_new/goods/400/1537/S1645775954156.jpg)
![[1+1] 푹신푹신 유해물질 걱정없는 무소음 슬리퍼](http://image.kyobobook.co.kr/newimages/giftshop_new/goods/400/1073/hot1651221757378.jpg)
![[아이리버] 휴대용 선풍기 BF-A9 코랄](http://image.kyobobook.co.kr/newimages/giftshop_new/goods/400/1057/hot1652167624892.jpg)
![[동원] 동원샘물 웨이크업뷰티 500ml*20병](http://image.kyobobook.co.kr/newimages/giftshop_new/goods/400/1764/S1641424942887.jpg)
![[1+1] 마비스 치약 85ml 4개세트 (총8개)](http://image.kyobobook.co.kr/newimages/giftshop_new/goods/400/1081/hot1652237198838.jpg)
LG U+ 구매안전서비스
▶서비스 가입 확인
고객님은 안전거래를 위해 현금 등으로 결제시 저희 쇼핑몰에서 가입한 LG유플러스의 구매안전서비스를 이용하실 수 있습니다.
정보보호관리체계
ISMS 인증획득
ISMS 인증획득
[인증범위] 온라인 교보문고 서비스 운영
[유효기간] 2020.11.04. ~ 2023.11.03.
바로가기
