간편결제, 신용카드 청구할인
카카오페이 3,000원
(카카오페이 5만원 이상 결제시, 12/1~12/31 기간 중 1회)
인터파크 롯데카드 5% (21,380원)
(최대할인 10만원 / 전월실적 40만원)
북피니언 롯데카드 30% (15,750원)
(최대할인 3만원 / 3만원 이상 결제)
NH쇼핑&인터파크카드 20% (18,000원)
(최대할인 4만원 / 2만원 이상 결제)
Close

HTML+CSS 웹 디자인 입문 : HTML, CSS 기초부터 반응형 웹 디자인, 실전 웹 사이트 제작까지

원제 : 1冊ですべて身につくHTML & CSSとWEBデザイン入門講座
소득공제

2013년 9월 9일 이후 누적수치입니다.

판매지수 82
?
판매지수란?
사이트의 판매량에 기반하여 판매량 추이를 반영한 인터파크 도서에서의 독립적인 판매 지수입니다. 현재 가장 잘 팔리는 상품에 가중치를 두었기 때문에 실제 누적 판매량과는 다소 차이가 있을 수 있습니다. 판매량 외에도 다양한 가중치로 구성되어 최근의 이슈도서 확인시 유용할 수 있습니다. 해당 지수는 매일 갱신됩니다.
Close
공유하기
정가

25,000원

  • 22,500 (10%할인)

    1,250P (5%적립)

할인혜택
적립혜택
  • I-Point 적립은 마이페이지에서 직접 구매확정하신 경우만 적립 됩니다.
추가혜택
주문수량
감소 증가

* 배송예정일이 오늘이나 내일인 경우 1) 당일/하루배송 보장! 2) 배송 지연 시 I-Point 2,000P또는 4,000원 도서상품권 지급 &n 더보기

  • 이벤트/기획전

  • 연관도서(5)

  • 상품권

AD

책소개

최신 웹 사이트 제작에 필요한 모든 지식을 이 책 한 권으로 배워보자!

이 책은 HTML, CSS, 웹 디자인 기초를 다루고, 예제를 만들면서 배워보는 책입니다. 웹 디자인에 대해 아무것도 몰라도 처음부터 차근차근 배울 수 있도록 HTML과 CSS 기초를 알려주며 반응형 웹, Flexbox, 그리드 등 최신 기술까지 익힐 수 있도록 도와줍니다. 나아가 뒷부분에서는 앞에서 배운 내용을 바탕으로 직접 하나의 웹 사이트를 제작해 봅니다. 코드를 보고, 직접 손으로 입력하고, 만들면서 배우므로 실제 웹 사이트를 만드는 제작 흐름을 체험해 볼 수 있습니다.

더불어 이 책에서는 HTML과 CSS 같은 기본적인 기술 외에도 배색, 레이아웃, 타이포그래피 같은 ‘디자인 기초’도 함께 설명합니다. 또, 웹 페이지 디자인을 위한 편집 툴과 디자인 관련해서 참고할 만한 다양한 정보도 소개합니다. 어떻게 하면 예쁜 웹 페이지를 만들지 고민하는 독자에게도 유용한 책이 될 것입니다.

★ 이 책의 대상 독자 ★

◎ 이제 처음 웹 사이트 제작을 시작해 보려는 초보자
◎ HTML과 CSS를 기본부터 배우고 싶은 사람
◎ 아름다운 디자인의 웹 사이트를 만들고 싶은 사람
◎ 최신 웹 기술을 알고 싶은 사람

목차

▣ 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 외부 미디어 변경해보기
__구글 지도 변경하기

저자소개

생년월일 -

저자 Mana는 일본에서 2년 동안 그래픽 디자이너로 일한 뒤, 캐나다 밴쿠버에 있는 웹 제작 학교를 졸업했다. 캐나다, 호주, 영국 기업에서 웹 디자이너로 일했으며 현재는 일본에서 웹과 관련된 세미나를 진행하고, 웹 제작 컨설턴트로 교육에 힘쓰고 있다. 블로그 ‘웹 크리에이터 박스’는 2010년 일본 알파 블로거 어워드를 수상했다.

생년월일 -

해당작가에 대한 소개가 없습니다.

리뷰

0.0 (총 0건)

구매 후 리뷰 작성 시, 북피니언 지수 최대 600점

리뷰쓰기

기대평

작성시 유의사항

평점
0/200자
등록하기

기대평

0.0

판매자정보

  • 인터파크도서에 등록된 오픈마켓 상품은 그 내용과 책임이 모두 판매자에게 있으며, 인터파크도서는 해당 상품과 내용에 대해 책임지지 않습니다.

판매자

(주)교보문고

상호

(주)교보문고

사업자 종류

법인사업자

사업자번호

102-81-11670

연락처

1544-1900

이메일

callcenter@kyobobook.co.kr

통신판매 신고 번호

01-0653

영업소재지

서울특별시 종로구 종로 1(종로1가,교보빌딩)

교환/환불

반품/교환 방법

‘마이페이지 > 취소/반품/교환/환불’ 에서 신청 또는 1:1 문의 게시판 및 고객센터(1577-2555)에서 신청 가능

반품/교환가능 기간

변심 반품의 경우 출고완료 후 6일(영업일 기준) 이내까지만 가능
단, 상품의 결함 및 계약내용과 다를 경우 문제점 발견 후 30일 이내

반품/교환 비용

변심 혹은 구매착오로 인한 반품/교환은 반송료 고객 부담
상품이나 서비스 자체의 하자로 인한 교환/반품은 반송료 판매자 부담

반품/교환 불가 사유

·소비자의 책임 있는 사유로 상품 등이 손실 또는 훼손된 경우
(단지 확인을 위한 포장 훼손은 제외)

·소비자의 사용, 포장 개봉에 의해 상품 등의 가치가 현저히 감소한 경우
예) 화장품, 식품, 가전제품(악세서리 포함) 등

·복제가 가능한 상품 등의 포장을 훼손한 경우
예) 음반/DVD/비디오, 소프트웨어, 만화책, 잡지, 영상 화보집

·시간의 경과에 의해 재판매가 곤란한 정도로 가치가 현저히 감소한 경우

·전자상거래 등에서의 소비자보호에 관한 법률이 정하는 소비자 청약철회 제한 내용에 해당되는 경우

상품 품절

공급사(출판사) 재고 사정에 의해 품절/지연될 수 있음

소비자 피해보상
환불지연에 따른 배상

·상품의 불량에 의한 교환, A/S, 환불, 품질보증 및 피해보상 등에 관한 사항은 소비자분쟁해결 기준 (공정거래위원회 고시)에 준하여 처리됨

·대금 환불 및 환불지연에 따른 배상금 지급 조건, 절차 등은 전자상거래 등에서의 소비자 보호에 관한 법률에 따라 처리함

배송안내

  • 교보문고 상품은 택배로 배송되며, 출고완료 1~2일내 상품을 받아 보실 수 있습니다.

  • 출고가능 시간이 서로 다른 상품을 함께 주문할 경우 출고가능 시간이 가장 긴 상품을 기준으로 배송됩니다.

  • 군부대, 교도소 등 특정기관은 우체국 택배만 배송가능합니다.

  • 배송비는 업체 배송비 정책에 따릅니다.

  • - 도서 구매 시, 1만 원 이상 무료, 1만원 미만 2천 원 - 상품별 배송비가 있는 경우, 상품별 배송비 정책 적용