러닝스쿨! 한 권으로 끝내는 HTML+CSS 웹 디자인 입문
MD의 선택
무료배송
이벤트
소득공제
10%
22,500원
25,000원
배송안내
무료배송
배송비 안내
국내도서/외국도서
도서만 15,000원 이상 구매 시 무료배송
도서+교보Only(교보배송)을 함께 15,000원 이상 구매 시 무료배송
도서+교보Only(교보배송)을 함께 15,000원 이상 구매 시 무료배송
15,000원 미만 시 2,500원 배송비 부과
교보Only(교보배송)
각각 구매하거나 함께 20,000원 이상 구매 시 무료배송
20,000원 미만 시 2,500원 배송비 부과
해외주문 서양도서/해외주문 일본도서(교보배송)
각각 구매하거나 함께 15,000원 이상 구매 시 무료배송
15,000원 미만 시 2,500원 배송비 부과
업체배송 상품(전집, GIFT, 음반/DVD 등)
해당 상품 상세페이지 "배송비" 참고 (업체 별/판매자 별 무료배송 기준 다름)
바로드림 오늘배송
업체에서 별도 배송하여 1Box당 배송비 2,500원 부과
1Box 기준 : 도서 10권
그 외 무료배송 기준
바로드림, eBook 상품을 주문한 경우, 플래티넘/골드/실버회원 무료배송쿠폰 이용하여 주문한 경우, 무료배송 등록 상품을 주문한 경우
주문정보를 불러오는 중입니다.
서울시 종로구 종로 1
해외주문/바로드림/제휴사주문/업체배송건의 경우 1+1 증정상품이 발송되지 않습니다.
패키지
북카드
키워드 Pick
키워드 Pick 안내
관심 키워드를 주제로 다른 연관 도서를 다양하게 찾아 볼 수 있는 서비스로, 클릭 시 관심 키워드를 주제로 한 다양한 책으로 이동할 수 있습니다.
키워드는 최근 많이 찾는 순으로 정렬됩니다.
최신 웹 사이트 제작에 필요한 모든 지식을 이 책 한 권으로 배워보자!
이 책은 HTML, CSS, 웹 디자인 기초를 다루고, 예제를 만들면서 배워보는 책입니다. 웹 디자인에 대해 아무것도 몰라도 처음부터 차근차근 배울 수 있도록 HTML과 CSS 기초를 알려주며 반응형 웹, Flexbox, 그리드 등 최신 기술까지 익힐 수 있도록 도와줍니다. 나아가 뒷부분에서는 앞에서 배운 내용을 바탕으로 직접 하나의 웹 사이트를 제작해 봅니다. 코드를 보고, 직접 손으로 입력하고, 만들면서 배우므로 실제 웹 사이트를 만드는 제작 흐름을 체험해 볼 수 있습니다.
더불어 이 책에서는 HTML과 CSS 같은 기본적인 기술 외에도 배색, 레이아웃, 타이포그래피 같은 ‘디자인 기초’도 함께 설명합니다. 또, 웹 페이지 디자인을 위한 편집 툴과 디자인 관련해서 참고할 만한 다양한 정보도 소개합니다. 어떻게 하면 예쁜 웹 페이지를 만들지 고민하는 독자에게도 유용한 책이 될 것입니다.
★ 이 책의 대상 독자 ★
◎ 이제 처음 웹 사이트 제작을 시작해 보려는 초보자
◎ HTML과 CSS를 기본부터 배우고 싶은 사람
◎ 아름다운 디자인의 웹 사이트를 만들고 싶은 사람
◎ 최신 웹 기술을 알고 싶은 사람
더불어 이 책에서는 HTML과 CSS 같은 기본적인 기술 외에도 배색, 레이아웃, 타이포그래피 같은 ‘디자인 기초’도 함께 설명합니다. 또, 웹 페이지 디자인을 위한 편집 툴과 디자인 관련해서 참고할 만한 다양한 정보도 소개합니다. 어떻게 하면 예쁜 웹 페이지를 만들지 고민하는 독자에게도 유용한 책이 될 것입니다.
★ 이 책의 대상 독자 ★
◎ 이제 처음 웹 사이트 제작을 시작해 보려는 초보자
◎ HTML과 CSS를 기본부터 배우고 싶은 사람
◎ 아름다운 디자인의 웹 사이트를 만들고 싶은 사람
◎ 최신 웹 기술을 알고 싶은 사람
작가정보
일본에서 2년 동안 그래픽 디자이너로 일한 뒤, 캐나다 밴쿠버에 있는 웹 제작 학교를 졸업했다. 캐나다, 호주, 영국 기업에서 웹 디자이너로 일했으며 현재는 일본에서 웹과 관련된 세미나를 진행하고, 웹 제작 컨설턴트로 교육에 힘쓰고 있다. 블로그 ‘웹 크리에이터 박스’는 2010년 일본 알파 블로거 어워드를 수상했다.
어쩌다가 책을 집필/번역하기 시작해서, 지금까지 계속해서 집필/번역하고 있다. 현재 직업 특성상 집에서 나갈 이유가 별로 없다는 것에 굉장히 만족하고 있다. 오전에는 커피, 오후에는 홍차를 마신다. 요리, 피아노, 기타, 작곡, 그림, 스컬핑 등의 취미를 갖고 있다. 《HTML5 웹 프로그래밍 입문》 《혼자 공부하는 파이썬》 《모던 웹을 위한 HTML5+CSS3 바이블》 등을 저술했으며 《최신 표준 HTML+CSS 디자인》 《파이썬을 이용한 머신러닝, 딥러닝 실전 개발 입문》 《파이썬을 이용한 웹 크롤링과 스크레이핑》 등을 번역하였다. 이 책의 역자 소개를 작성하는 시점을 기준으로 51번째 책이다.
목차
- ▣ CHAPTER 1: 기억해 두어야 하는 웹 사이트 기본
1-1 좋은 웹 디자인이란?
__디자인의 목적은 상대방에게 무언가를 전달하는 것
__쉬운 사용
__보다 좋은 생활을 제공하는 것
1-2 다양한 종류의 사이트
__기업 사이트
__프로모션 사이트
__포트폴리오 사이트
__쇼핑 사이트
__미디어 사이트
__SNS
__ “사용하기 쉬움”을 생각하기
__보기 쉽게 디자인하기
1-3 사용성이란?
__읽기 쉬운 글 만들기
__사용하기 쉬운 조작성
1-4 웹 사이트의 구조
__인터넷이란?
__웹이란?
__웹 페이지의 구조
__URL이란?
1-5 장치의 종류
__단말기
__주변기기
1-6 웹 브라우저의 종류
__웹 페이지는 웹 브라우저에서
1-7 제작 흐름
__제작 흐름
__기획
__사이트맵 제작
__와이어프레임 만들기
__와이어프레임 작성 예
__디자인
__코딩
__웹에 공개
1-8 제작을 시작하기 전에
__텍스트 에디터 설치
__브라우저 설치
__구글 크롬 설치 방법
__그래픽 도구 확인
▣ CHAPTER 2: 웹 기본 구조 만들기 - HTML 기본
2-1 HTML이란?
__컴퓨터에 지시를 내리는 HTML
2-2 HTML 파일 만들기
__텍스트 에디터 실행하기
__코드 작성하기
__파일 저장하기
__웹 브라우저에서 열어 보기
__HTML 파일 이름 규칙
__[!doctype html]
__html~/html
__head~/head
__meta charset=“UTF-8”
2-3 HTML 파일의 골격
__title~/title
__meta name="description" content="~"
__body~/body
2-4 HTML의 기본 작성 방법
__HTML 기본 문법과 태그
__태그를 작성하는 규칙
__태그 내부에 있는 태그
__태그에 정보 추가하기
2-5 제목 붙이기
__제목 태그 h1~h6 태그
__제목 태그를 사용하는 순서
2-6 문장 출력하기
__단락을 출력하는 p 태그
2-7 이미지 삽입하기
__이미지를 출력하는 img 태그
__파일 경로 지정하기
2-8 링크 만들기
__링크를 만드는 a 태그
2-9 리스트 출력하기
__기본적인 리스트를 만드는 “ul 태그 + li 태그”
2-10 표 만들기
__순서 있는 리스트를 만드는 “ol 태그 + li 태그”
__표 기본
__셀 병합하기
2-11 입력 양식 만들기
__여러 개의 부품 조합하기
__입력 양식란을 만드는 form 태그
__입력 양식에 사용하는 부품
2-12 사용하기 쉬운 입력 양식 만들기
__입력 양식의 레이블을 만드는 label 태그
2-13 블록 요소로 그룹 나누기
__그룹 구분하기
__페이지 상부의 헤더를 만드는 header 태그
__내비게이션 메뉴를 만드는 nav 태그
__기사 부분을 만드는 article 태그
__테마를 가진 그룹을 만드는 section 태그
__페이지의 메인 콘텐츠 부분을 만드는 main 태그
__메인 콘텐츠가 아닌 추가 정보 aside 태그
__페이지 하부의 푸터 부분을 만드는 footer 태그
__의미를 가지지 않는 블록 요소를 만드는 div 태그
2-14 자주 사용하는 HTML 태그 목록
▣ CHAPTER 3: 웹 디자인 만들기 : CSS 기본
3-1 CSS란?
__HTML을 장식하는 언어인 CSS
3-2 CSS를 적용하는 방법
__CSS 파일을 읽어 들여 적용하기
__HTML 파일의 head 내부에 style 태그를 넣어 지정하기
__HTML 태그 내부에 style 속성 지정하기
3-3 CSS 파일 만들기
__텍스트 에디터 실행하기
__CSS 코드 작성하기
__CSS 파일 저장하기
__HTML 파일의 head 내부에서 CSS 파일 읽어 들이기
__웹 브라우저에서 열기
__CSS 파일의 이름 규칙
3-4 CSS 기본 작성 방법 익히기
__CSS 기본 문법
__CSS를 작성할 때의 규칙
3-5 문자와 문장 장식하기
__문자의 크기를 변경하는 “font-size 속성”
__폰트의 종류를 지정하는 “font-family 속성”
__문자의 두께를 바꾸는 “font-weight 속성”
__줄 높이를 바꾸는 “line-height 속성”
__문장 맞춤을 지정하는 “text-align 속성”
3-6 웹 폰트 사용하기
__웹 폰트란?
__웹 폰트 사용하기
3-7 색 넣기
__색 지정 방법
__문자색을 지정하는 “color 속성”
__배경에 색을 지정하는 “background-color” 속성
__배색 잘하기
__각 색을 메인으로 사용한 참고 사이트
3-8 배경 넣기
__배경에 이미지를 설치하는 “background-image 속성”
__배경 이미지의 반복 출력 “background-repeat 속성”
__배경 이미지를 출력하는 위치를 지정하는 “background-position 속성”
__배경 관련 속성을 한꺼번에 지정하는 “background 속성”
__사진을 내려받을 수 있는 웹 사이트
3-9 너비와 높이 지정하기
__크기를 지정하는 “width 속성”, “height 속성”
__웹 사이트에서 사용하는 단위
3-10 여백 조정하기
__여백의 개념
__요소 밖의 여백 “margin 속성”
__요소 내부의 여백 “padding 속성”
__여백을 사용해 그룹 만들기
__테두리와 문자 사이에 여백 만들기
3-11 선 긋기
__선의 두께 “border-width 속성”
__선의 종류 “border-style 속성”
__선 색 “border-color 속성”
__요소 주변에 선을 긋는 “border 속성”
__선 디자인을 효과적으로 사용하기
3-12 리스트 장식하기
__리스트 마커의 종류 “list-style-type 속성”
__리스트 마커의 출력 위치 “list-style-position 속성”
__리스트 마커로 사용할 이미지 “list-style-image 속성”
__리스트 마커와 관련된 장식을 한꺼번에 지정하는 “list-style 속성”
__리스트 마커를 효과적으로 사용하기
3-13 클래스와 ID를 사용한 지정 방법
__클래스와 ID
__클래스를 사용한 작성 방법
__ID를 사용한 작성 방법
__태그 이름과 함께 클래스와 ID를 사용하는 작성 방법
__클래스 이름과 ID 이름 규칙
__한 태그에 여러 개의 ID와 클래스 붙이기
__클래스와 ID의 차이
3-14 레이아웃 만들기
__Flexbox로 수평 정렬하기
__CSS 그리드로 타일 형태로 정렬하기
__보기 쉬운 레이아웃이란?
__레이아웃별 참고 사이트 목록
3-15 디폴트 CSS 리셋하기
__CSS 리셋이란
__브라우저에 따른 외관 차이
__리셋 CSS 사용하기
3-16 자주 사용하는 CSS 속성 목록
▣ CHAPTER 4: 풀 스크린 웹 사이트 제작하기
4-1 풀 스크린이란
__풀 스크린 레이아웃의 장점과 구성 요소
4-2 풀 스크린 페이지의 제작 흐름
__작성할 페이지
__제작 흐름
4-3 “head” 작성하기
__파일 준비하기
__HTML 골격 만들기
__ “meta” 정보와 “title” 작성하기
__필요한 CSS 파일 읽어 들이기
4-4 “header” 부분 만들기
__HTML에 “header” 부분 작성하기
__CSS 파일 준비하기
__공통 부분 작성하기
__로고 크기와 여백 조정하기
__내비게이션 메뉴 장식하기
__콘텐츠의 최대 출력 너비 설정하기
4-5 콘텐츠 부분 만들기
__문장과 버튼 설치하기
__화면을 꽉 채우는 배경 이미지 배치하기
4-6 파비콘 설정하기
__파비콘이란
__어떤 디자인이 좋을까?
__파비콘 전용 이미지 준비하기
__HTML의 “head” 내부에서 파비콘 읽어 들이기
__파비콘을 만들어주는 서비스 사용하기
4-7 풀스크린 페이지 변경해보기
__블랜드 모드로 배경 이미지에 색 겹치기
__배경을 그레이디언트 색상으로 설정하기
__배경 이미지에 블랜드 모드를 사용해서 그레이디언트 색상 섞기
▣ CHAPTER 5: 2-칼럼 웹 사이트 제작하기
5-1 2-칼럼 레이아웃이란
__2-칼럼 레이아웃의 장점과 구성 요소
__2-칼럼의 너비 비율
__반응형 웹에서의 배치
5-2 2-칼럼 페이지의 제작 흐름
__제작 흐름
5-3 페이지 전체의 제목 만들기
__파일 준비하기
__HTML 편집하기
__CSS로 장식하기
5-4 푸터 부분 만들기
__푸터 콘텐츠 작성하기
__CSS로 장식하기
5-5 수평 정렬 설정하기
__레이아웃 골격 만들기
__레이아웃 구성하기
5-6 메인 콘텐츠 영역 만들기
__기사 정보 부분 만들기
__이미지와 본문 작성하기
5-7 사이드바 만들기
__제목과 문장 장식하기
__카테고리 리스트 장식하기
5-8 반응형 웹 지원하기
__반응형 웹 디자인이란?
__반응형 웹을 지원하는 방법
__문자 크기와 여백 조정하기
__콘텐츠를 수직 정렬하기
__브레이크 포인트 생각해보기
5-9 칼럼 페이지를 변경해보기
__3-칼럼 레이아웃으로 설정하기
__출력할 칼럼의 순서 변경하기
▣ CHAPTER 6: 타일 형태의 웹 사이트 제작하기
6-1 타일 형태의 레이아웃이란
__타일형 레이아웃의 장점과 구성 요소
6-2 타일형 레이아웃의 제작 흐름
__제작 흐름
6-3 페이지 상부의 소개문 만들기
__파일 준비하기
__HTML 준비하기
__CSS로 장식하기
6-4 타일형 레이아웃 설정하기
__콘텐츠 준비하기
__CSS 그리드 사용하기
6-5 반응형 웹 지원하기
__요소를 반복 정렬하는 “repeat”
__요소 너비에 최솟값과 최댓값을 지정하는 “minmax”
__화면의 너비에 맞게 출력하는 “auto-fit”
6-6 타일형 레이아웃 변경 예
__크기가 다른 요소 배치하기
__큰 크기의 그리드 아이템 지정하기
__이미지의 높이 맞추기
__이미지 자르기
__반응형 웹 지원하기
▣ CHAPTER 7: 외부 미디어 사용하기
7-1 문의 페이지의 제작 흐름
__작성할 페이지
__제작 흐름
7-2 입력 양식 배치하기
__파일 준비하기
__HTML 편집하기
__CSS로 장식하기
__입력 양식 서비스 사용하기
7-3 지도 출력하기
__가게 정보 작성하기
__구글 지도 출력하기
__외관 조정하기
7-4 페이스북 플러그인 삽입하기
__SNS 부분의 레이아웃 잡기
__페이스북 플러그인 코드 받기
7-5 트위터 플러그인 삽입하기
__트위터 플러그인 코드 얻기
7-6 유튜브 영상 삽입하기
__유튜브 퍼가기 코드 추출하기
7-7 반응형 웹 지원하기
__미디어 쿼리로 수직 정렬하기
7-8 OGP 설정하기
__OGP란?
__OGP 설정하기
__페이스북에서 확인해보기
__트위터에서 확인해보기
7-9 외부 미디어 변경해보기
__구글 지도 변경하기
기본정보
| ISBN | 9791158391782 | ||
|---|---|---|---|
| 발행(출시)일자 | 2020년 01월 03일 | ||
| 쪽수 | 316쪽 | ||
| 크기 |
189 * 240
* 24
mm
/ 767 g
|
||
| 총권수 | 1권 | ||
| 시리즈명 |
위키북스 러닝스쿨 시리즈
|
||
| 원서명/저자명 | 1冊ですべて身につくHTML & CSSとWEBデザイン入門講座/MANA | ||
Klover
Klover 리뷰 안내
교보를 애용해 주시는 고객님들이 남겨주신 평점과 감상을 바탕으로, 다양한 정보를 전달하는 교보문고의 리뷰 서비스입니다.
1.리워드 안내
구매 후 90일 이내에 평점과 10자 이상의 리뷰 작성 시 e교환권 200원을 적립해 드립니다.
e교환권은 적립 일로부터 180일 동안 사용 가능합니다.
리워드는 작성 후 다음 날 제공되며, 발송 전 작성 시 발송 완료 후 익일 제공됩니다.
리워드는 리뷰 종류별로 구매한 아이디당 한 상품에 최초 1회 작성 건들에 대해서만 제공됩니다.
판매가 1,000원 미만 도서의 경우 리워드 지급 대상에서 제외됩니다.
e교환권은 적립 일로부터 180일 동안 사용 가능합니다.
리워드는 작성 후 다음 날 제공되며, 발송 전 작성 시 발송 완료 후 익일 제공됩니다.
리워드는 리뷰 종류별로 구매한 아이디당 한 상품에 최초 1회 작성 건들에 대해서만 제공됩니다.
판매가 1,000원 미만 도서의 경우 리워드 지급 대상에서 제외됩니다.
한달 후 리뷰
구매 후 30일~ 120일 이내에 작성된 두 번째 구매리뷰에 대해 한 달 후 리뷰로 인지하고 e교환권 100원을 추가
제공합니다.
* 강연, 공연, 여행, 동영상, 사은품, 기프트카드 상품은 지급 제외
2.운영 원칙 안내
Klover 리뷰를 통한 리뷰를 작성해 주셔서 감사합니다.
자유로운 의사 표현의 공간인 만큼 타인에 대한 배려를 부탁합니다.
일부 타인의 권리를 침해하거나 불편을 끼치는 것을 방지하기 위해 아래에 해당하는 Klover 리뷰는 별도의 통보 없이 삭제될 수 있습니다.
일부 타인의 권리를 침해하거나 불편을 끼치는 것을 방지하기 위해 아래에 해당하는 Klover 리뷰는 별도의 통보 없이 삭제될 수 있습니다.
- 도서나 타인에 대해 근거 없이 비방을 하거나 타인의 명예를 훼손할 수 있는 리뷰
- 도서와 무관한 내용의 리뷰
- 인신공격이나 욕설, 비속어, 혐오발언이 개재된 리뷰
- 의성어나 의태어 등 내용의 의미가 없는 리뷰
리뷰는 1인이 중복으로 작성하실 수는 있지만, 평점계산은 가장 최근에 남긴 1건의 리뷰만 반영됩니다.
3.신고하기
다른 고객이 작성리뷰에 대해 불쾌함을 느끼는
경우 신고를 할 수 있으며,
신고 자가 일정수준 이상 누적되면 작성하신
리뷰가 노출되지 않을 수 있습니다.
구매 후 리뷰 작성 시, e교환권 200원 적립
문장수집
문장수집 안내
문장수집은 고객님들이 직접 선정한 책의 좋은 문장을 보여주는 교보문고의 새로운 서비스입니다. 마음을 두드린 문장들을
기록하고 좋은 글귀들은 "좋아요“ 하여 모아보세요. 도서 문장과 무관한 내용 등록 시 별도 통보 없이 삭제될 수 있습니다.
리워드 안내
구매 후 90일 이내에 문장수집 작성 시 e교환권 100원을 적립해드립니다.
e교환권은 적립 일로부터 180일 동안 사용 가능합니다. 리워드는 작성 후 다음 날 제공되며, 발송 전 작성 시 발송 완료 후 익일 제공됩니다.
리워드는 한 상품에 최초 1회만 제공됩니다.
주문취소/반품/절판/품절 시 리워드 대상에서 제외됩니다.
e교환권은 적립 일로부터 180일 동안 사용 가능합니다. 리워드는 작성 후 다음 날 제공되며, 발송 전 작성 시 발송 완료 후 익일 제공됩니다.
리워드는 한 상품에 최초 1회만 제공됩니다.
주문취소/반품/절판/품절 시 리워드 대상에서 제외됩니다.
구매 후 리뷰 작성 시, e교환권 100원 적립
이 책의 첫 기록을 남겨주세요
