본문 바로가기

추천 검색어

실시간 인기 검색어

나의 첫 HTML & CSS 웹 디자인

제이펍

2023년 12월 14일 출간

종이책 : 2023년 10월 06일 출간

(개의 리뷰)
( 0% 의 구매자)
eBook 상품 정보
파일 정보 pdf (92.52MB)
ISBN 9791192987781
지원기기 교보eBook App, PC e서재, 리더기, 웹뷰어
교보eBook App 듣기(TTS) 불가능
TTS 란?
텍스트를 음성으로 읽어주는 기술입니다.
  • 전자책의 편집 상태에 따라 본문의 흐름과 다르게 텍스트를​ 읽을 수 있습니다.
  • 전자책 화면에 표기된 주석 등을 모두 읽어 줍니다.
  • 이미지 형태로 제작된 전자책 (예 : ZIP 파일)은 TTS 기능을 지원하지 않습니다.
  • '교보 ebook' 앱을 최신 버전으로 설치해야 이용 가능합니다. (Android v3. 0.26, iOS v3.0.09,PC v1.2 버전 이상)

PDF 필기 Android 가능 (iOS예정)
소득공제
소장
정가 : 15,400원

쿠폰적용가 13,860

10% 할인 | 5%P 적립

이 상품은 배송되지 않는 디지털 상품이며,
교보eBook앱이나 웹뷰어에서 바로 이용가능합니다.

카드&결제 혜택

  • 5만원 이상 구매 시 추가 2,000P
  • 3만원 이상 구매 시, 등급별 2~4% 추가 최대 416P
  • 리뷰 작성 시, e교환권 추가 최대 300원

작품소개

이 상품이 속한 분야

누구나 한 번쯤 ‘나만의 웹사이트’를 꿈꿔봤을 것이다. 이 책의 편집자도 코딩을 배우자마자 웹사이트를 만들었다. 템플릿을 써서 어찌어찌 만들어보기는 했으나 더 멋지게 만들려면 어떻게 해야 하는지는 오리무중이었다. 이 책을 편집하면서 내가 바라던 초보자를 위한 웹 디자인 책이 바로 이 책이라는 것을 깨달았다.

책을 펼치면 귀여운 카피바라 캐릭터 ‘카피조우’가 우리를 반긴다. 카피조우는 카피코에게 데이트 신청을 하기 위해 SNS 링크 모음 사이트를 만들고, 당근 농장 홍보를 위해 업무용 블로그 사이트를 만든다. 카피코와 결혼하기로 한 카피조우는 웹 초대장 사이트도 만들고, 레스토랑을 차려 레스토랑 사이트도 만든다. 카피조우의 삶을 따라가다 보면 나만의 멋진 웹사이트를 4종류나 만들 수 있게 된다.

중간중간 나오는 ‘인간’ 웹 디자이너와 마크업 디자이너의 설명은 이해하기 쉬우며 웹 디자인의 핵심을 짚어준다. 기초부터 차근차근 알려줘 관련 지식이 전혀 없는 상태에서 시작한 사람도 문제없다. 부록은 총 네 가지다. ‘웹사이트 공개 방법’에서는 ‘나만의 웹사이트’를 사람들에게 공개하는 방법을 알려주고, ‘추천 사이트 모음’에서는 저자(또는 역자)가 실제 업무에서 사용하고 있는 사이트 47개를 소개한다.

‘샘플 디자인 XD 데이터’는 이미지 잘라내기나 색상 추출 등 연습용으로 사용하고 디자인 파일 제작에 참고할 수 있다. 가장 유용했던 부록 ‘치트시트’는 학습할 때뿐 아니라 앞으로 웹사이트를 만들고 관리할 때 두고두고 참고할 수 있다. 웹사이트 제작을 처음부터 배우고 싶은 초보자, 웹 디자이너가 되고 싶은 사람들에게 추천한다.

주요 내용
● HTML & CSS의 기본
● SNS 링크 모음 사이트
● 블로그 사이트
● 웹 초대장 사이트
● CSS 애니메이션
● 반응형 웹 디자인
● 레스토랑 사이트
● 웹사이트 공개 방법
옮긴이 머리말 x
베타리더 후기 xii
들어가며 xiii
이 책을 읽는 방법 xv
각 파트의 학습 포인트 xvi
이 책에서 만들 사이트 xvii
실습용 데이터 다운로드 xxi
4개의 부록을 다운로드하자 xxii
프롤로그 만화 xxvi


PART 1 HTML 작성하기
CHAPTER 1 시작하기 전에
SECTION 1 학습을 시작하기 전에 2
SECTION 2 웹사이트의 구조 이해하기 3
SECTION 3 필요한 애플리케이션 설치하기 4
SECTION 4 효율적으로 학습하기 9
SECTION 5 초간단 예제로 워밍업하기 12

CHAPTER 2 HTML의 기본
SECTION 1 마크업이 중요한 이유 14
SECTION 2 러브레터 내용 정리하기 16
SECTION 3 HTML 첫발 딛기 20
SECTION 4 러브레터 마크업하기 24
SECTION 5 읽기 쉬운 코드 작성하기 38


PART 2 SNS 링크 모음 페이지 만들기
이 파트에서 만들 사이트 ▶ SNS 링크 모음 사이트 42

CHAPTER 3 CSS의 기본
SECTION 1 CSS 첫발 딛기 44
SECTION 2 개발자 도구 사용하기 46
SECTION 3 HTML과 CSS 연결하기 48
SECTION 4 브라우저 기본 스타일 리셋하기 52
SECTION 5 박스 모델 이해하기 54

CHAPTER 4 SNS 링크 모음 CSS 작성하기
SECTION 1 CSS 작성하기 56


PART 3 2칼럼 페이지 만들기
이 파트에서 만들 사이트 ▶ 2칼럼 레이아웃 디자인 74

CHAPTER 5 블로그 사이트 HTML 작성하기
SECTION 1 웹사이트의 영역 구분하기 76
SECTION 2 블로그의 문서 구조 마크업하기 78
SECTION 3 아웃라인과 섹션 알아보기 83
SECTION 4 그 외에 새로운 HTML 태그 배우기 86

CHAPTER 6 블로그 사이트 CSS 작성하기
SECTION 1 Flexbox 레이아웃 알아보기 90
SECTION 2 페이지 전체와 헤더의 CSS 작성하기 94
SECTION 3 메인 영역과 사이드바의 CSS 작성하기 100
SECTION 4 아티클 영역과 푸터의 CSS 작성하기 110


PART 4 1칼럼 페이지 만들기
이 파트에서 만들 사이트 ▶ 1칼럼 레이아웃 디자인 120

CHAPTER 7 웹 초대장 사이트 HTML 작성하기
SECTION 1 HTML 구조 파악하기 122
SECTION 2 페이지 내부 링크 넣기 124
SECTION 3 폼 마크업하기 125

CHAPTER 8 웹 초대장 사이트 CSS 작성하기
SECTION 1 CSS 작성 순서 132
SECTION 2 웹 폰트를 사용하는 방법 134
SECTION 3 글꼴 관련 CSS 작성하기 136
SECTION 4 레이아웃 관련 CSS 작성하기 137
SECTION 5 공통 디자인 CSS 작성하기 139
SECTION 6 헤더 CSS 작성하기 140
SECTION 7 msg 섹션 CSS 작성하기 149
SECTION 8 date 섹션 CSS 작성하기 153
SECTION 9 form 섹션 CSS 작성하기 157
SECTION 10 footer와 패럴랙스 효과 CSS 작성하기 162

CHAPTER 9 CSS 애니메이션 추가하기
SECTION 1 CSS 애니메이션의 기초 164

CHAPTER 10 반응형 웹 디자인 지원하기
SECTION 1 멀티 디바이스 지원의 기본 170
SECTION 2 반응형 웹 디자인 준비하기 172
SECTION 3 각 파트를 화면 안에 넣기 177
SECTION 4 각 파트의 디자인 조정하기 180
SECTION 5 고해상도 디스플레이 지원 이미지 만들기 184


PART 5 멀티 페이지 사이트 만들기
이 파트에서 만들 사이트 ▶ 멀티 페이지 사이트 188

CHAPTER 11 사이트 제작과 웹 디자인의 기본
SECTION 1 웹사이트 제작의 흐름 190
SECTION 2 웹 디자인 개요 193
SECTION 3 웹 디자인의 기본 194

CHAPTER 12 레스토랑 사이트 CSS 작성하기(모바일)
SECTION 1 멀티 페이지 사이트 제작의 포인트 198
SECTION 2 TOP 페이지 CSS 작성하기 200
SECTION 3 CONCEPT 페이지 CSS 작성하기 208
SECTION 4 MENU 페이지 CSS 작성하기 220
SECTION 5 INFO 페이지 CSS 작성하기 224

CHAPTER 13 레스토랑 사이트 CSS 작성하기(PC)
SECTION 1 TOP 페이지 CSS 작성하기(PC) 234
SECTION 2 CONCEPT 페이지 CSS 작성하기(PC) 240
SECTION 3 MENU 페이지 CSS 작성하기(PC) 246
SECTION 4 INFO 페이지 CSS 작성하기(PC) 248

CHAPTER 14 참고 사이트 활용 방법 배우기
SECTION 1 웹상의 정보 활용하기 250
SECTION 2 샘플 코드를 사이트에 끼워 넣기 252

CHAPTER 15 웹사이트 공개 준비하기
SECTION 1 파비콘 설정하기 254
SECTION 2 OGP 설정하기 256

이 책을 읽은 후의 공부 방법 258

CSS는 Cascading Style Sheets의 머리글자로 된 약자입니다. ‘Cascading’은 계단 모양의 폭포를 뜻하는 단어로, 그 모양처럼 위에서 아래로 흐른다(상속된다)는 의미가 생겼습니다. / 앞에서 HTML은 요소의 중첩 구조로 이루어진다고 설명했습니다(23쪽). 상속이란 부모 요소에 지정된 CSS를 자식 요소가 이어받는 특성을 말합니다. / 모든 CSS가 상속되는 것은 아니지만, 부모 요소에 지정한 CSS는 기본적으로 자식 요소에도 적용된다는 점을 기억해둡시다. (44쪽)

HTML 문서는 의미에 대한 정보를 담고 있을뿐, 원래 글자 크기를 바꾸거나 줄바꿈을 하는 등의 시각적인 효과를 지시하지는 않습니다. / 제목으로 마크업한 글자가 브라우저상에서 크기가 커지고 줄바꿈이 되는 것은 브라우저가 제목 요소에 자체적인 스타일을 적용했기 때문입니다. / 이러한 스타일을 ‘브라우저 기본 스타일’이라고 합니다. 정식 명칭으로는 User Agent Stylesheet(사용자 에이전트 스타일시트)입니다. 기본 CSS는 통일된 사양이 없기 때문에 브라우저에 따라 다른 스타일이 적용되기도 합니다. (52쪽)

STEP1에서 지정한 margin-bottom:40px;과 STEP2에서 지정한 margin-top:80px;은 같은 영역에 margin을 지정했지만, 40px+80px=120px의 margin이 되는 것은 아닙니다. / 이는 인접한 요소의 상하 방향 margin을 지정할 때 일어나는 현상으로 마진 상쇄(margin collapsing)라고 부릅니다. /
마진 상쇄가 발생할 때는 더 큰 값의 마진이 적용됩니다. (151쪽)

모바일 퍼스트(Mobile First)란 사이트를 설계할 때 모바일 디바이스의 특성에 최적화하는 사고방식입니다. 예를 들어, 화면 사이즈가 작다, 통신 데이터 양이 제한될 때가 있다, 이동 중에 중간중간 열람된다 등의 특성에 대해 생각합니다. / 단순히 ‘모바일 버전부터 만든다’라는 작업 순서를 말하는 것이 아니므로 주의해주세요. (191쪽)

디자인은 외관을 아름답게 하는 것이라고 이해될 때가 많은데 design이라는 단어의 어원(designare)에는 설계하다라는 의미가 담겨 있습니다. / 제작 흐름에서 본 것처럼 디자인 시안을 제작하기까지 여러 과정이 있고, 웹 디자인은 그 모든 과정을 계승한 후에 성립됩니다. / 즉, 웹 디자인은 외관을 아름답게 하는 것만이 아니라 타깃 사용자나 사이트 목적에 맞게 설계된 것이라고 할 수 있습니다. / 타깃이나 목적이 달라지면 좋은 디자인의 정의도 달라집니다. (193쪽)

화면이 가로로 긴 PC와 세로로 긴 스마트폰에서 사용하는 이미지의 가로·세로 비율이 다를 때가 있습니다. 여러 개의 이미지를 준비해서 디바이스에 따라 이미지를 교체하는 방법도 있지만, object-fit 속성을 사용하면 1장의 이미지로 다양한 디바이스를 지원할 수 있습니다. / object-fit 속성은 요소가 차지하는 영역 안에 이미지를 어떻게 표시할지를 지정합니다. objectposition을
같이 사용하면 이미지의 어느 부분을 표시할지도 지정할 수 있습니다. (218쪽)

작가정보

저자(글) Capybara Design

기업의 웹사이트를 구축하는 부부 프리랜서 디자인 유닛이다. 회사 이름은 카피바라와 함께 살고 싶은 마음에서 유래했다.
웹사이트: https://capybara-design.com
인스타그램: @html_css_webdesign
X(구 트위터): @html_css_1min

竹内 直人
웹 제작 회사, 동영상 마케팅 회사에서 디렉터·마케터·엔지니어로 일했으며 2018년에 독립했다. 현역 프런트 엔지니어의 실무 기반 지식을 바탕으로 코딩 강사로도 활동하고 있다.

竹内 瑠美
UI/UX 및 마케팅 관점을 포함한 종합적인 비주얼 디자인이 전문이다. 다양한 벤처 회사에서의 경험을 살려 현재는 스타트업 회사의 디자인 파트너로 일하고 있다.

대학에서 일본학·컴퓨터과학을 전공하고, IT 솔루션 회사에서 윈도우 클라이언트를 개발했다. 한자와 코드를 한 지면에서 접할 수 있다는 점이 좋아서 일본 IT 서적 번역을 시작했다. 번역한 책으로는 《파이썬 자동화 교과서》(제이펍, 2022)가 있다.

이 상품의 총서

Klover리뷰 (0)

Klover리뷰 안내
Klover(Kyobo-lover)는 교보를 애용해 주시는 고객님들이 남겨주신 평점과 감상을 바탕으로, 다양한 정보를 전달하는 교보문고의 리뷰 서비스입니다.
1. 리워드 안내
구매 후 90일 이내에 평점 작성 시 e교환권 100원을 적립해 드립니다.
  • - e교환권은 적립일로부터 180일 동안 사용 가능합니다.
  • - 리워드는 1,000원 이상 eBook, 오디오북, 동영상에 한해 다운로드 완료 후 리뷰 작성 시 익일 제공됩니다.
  • - 리워드는 한 상품에 최초 1회만 제공됩니다.
  • - sam 이용권 구매 상품 / 선물받은 eBook은 리워드 대상에서 제외됩니다.
2. 운영 원칙 안내
Klover리뷰를 통한 리뷰를 작성해 주셔서 감사합니다. 자유로운 의사 표현의 공간인 만큼 타인에 대한 배려를 부탁합니다. 일부 타인의 권리를 침해하거나 불편을 끼치는 것을 방지하기 위해 아래에 해당하는 Klover 리뷰는 별도의 통보 없이 삭제될 수 있습니다.
  • 도서나 타인에 대해 근거 없이 비방을 하거나 타인의 명예를 훼손할 수 있는 리뷰
  • 도서와 무관한 내용의 리뷰
  • 인신공격이나 욕설, 비속어, 혐오 발언이 개재된 리뷰
  • 의성어나 의태어 등 내용의 의미가 없는 리뷰

구매 후 리뷰 작성 시, e교환권 100원 적립

문장수집

문장수집 안내
문장수집은 고객님들이 직접 선정한 책의 좋은 문장을 보여 주는 교보문고의 새로운 서비스 입니다. 교보eBook 앱에서 도서 열람 후 문장 하이라이트 하시면 직접 타이핑 하실 필요 없이 보다 편하게 남길 수 있습니다. 마음을 두드린 문장들을 기록하고 좋은 글귀들은 ‘좋아요’ 하여 모아보세요. 도서 문장과 무관한 내용 등록 시 별도 통보없이 삭제될 수 있습니다.
리워드 안내
  • 구매 후 90일 이내에 문장 수집 등록 시 e교환권 100원을 적립해 드립니다.
  • e교환권은 적립일로부터 180일 동안 사용 가능합니다.
  • 리워드는 1,000원 이상 eBook에 한해 다운로드 완료 후 문장수집 등록 시 제공됩니다.
  • 리워드는 한 상품에 최초 1회만 제공됩니다.
  • sam 이용권 구매 상품 / 선물받은 eBook / 오디오북·동영상 상품/주문취소/환불 시 리워드 대상에서 제외됩니다.

구매 후 문장수집 작성 시, e교환권 100원 적립

    교보eBook 첫 방문을 환영 합니다!

    신규가입 혜택 지급이 완료 되었습니다.

    바로 사용 가능한 교보e캐시 1,000원 (유효기간 7일)
    지금 바로 교보eBook의 다양한 콘텐츠를 이용해 보세요!

    교보e캐시 1,000원
    TOP
    신간 알림 안내
    나의 첫 HTML & CSS 웹 디자인 웹툰 신간 알림이 신청되었습니다.
    신간 알림 안내
    나의 첫 HTML & CSS 웹 디자인 웹툰 신간 알림이 취소되었습니다.
    리뷰작성
    • 구매 후 90일 이내 작성 시, e교환권 100원 (최초1회)
    • 리워드 제외 상품 : 마이 > 라이브러리 > Klover리뷰 > 리워드 안내 참고
    • 콘텐츠 다운로드 또는 바로보기 완료 후 리뷰 작성 시 익일 제공
    감성 태그

    가장 와 닿는 하나의 키워드를 선택해주세요.

    사진 첨부(선택) 0 / 5

    총 5MB 이하로 jpg,jpeg,png 파일만 업로드 가능합니다.

    신고/차단

    신고 사유를 선택해주세요.
    신고 내용은 이용약관 및 정책에 의해 처리됩니다.

    허위 신고일 경우, 신고자의 서비스 활동이 제한될 수
    있으니 유의하시어 신중하게 신고해주세요.


    이 글을 작성한 작성자의 모든 글은 블라인드 처리 됩니다.

    문장수집 작성

    구매 후 90일 이내 작성 시, e교환권 100원 적립

    eBook 문장수집은 웹에서 직접 타이핑 가능하나, 모바일 앱에서 도서를 열람하여 문장을 드래그하시면 직접 타이핑 하실 필요 없이 보다 편하게 남길 수 있습니다.

    P.
    나의 첫 HTML & CSS 웹 디자인
    저자 모두보기
    낭독자 모두보기
    sam 이용권 선택
    님이 보유하신 이용권입니다.
    차감하실 sam이용권을 선택하세요.
    sam 이용권 선택
    님이 보유하신 이용권입니다.
    차감하실 sam이용권을 선택하세요.
    sam 이용권 선택
    님이 보유하신 프리미엄 이용권입니다.
    선물하실 sam이용권을 선택하세요.
    결제완료
    e캐시 원 결제 계속 하시겠습니까?
    교보 e캐시 간편 결제
    sam 열람권 선물하기
    • 보유 권수 / 선물할 권수
      0권 / 1
    • 받는사람 이름
      받는사람 휴대전화
    • 구매한 이용권의 대한 잔여권수를 선물할 수 있습니다.
    • 열람권은 1인당 1권씩 선물 가능합니다.
    • 선물한 열람권이 ‘미등록’ 상태일 경우에만 ‘열람권 선물내역’화면에서 선물취소 가능합니다.
    • 선물한 열람권의 등록유효기간은 14일 입니다.
      (상대방이 기한내에 등록하지 않을 경우 소멸됩니다.)
    • 무제한 이용권일 경우 열람권 선물이 불가합니다.
    이 상품의 총서 전체보기
    네이버 책을 통해서 교보eBook 첫 구매 시
    교보e캐시 지급해 드립니다.
    교보e캐시 1,000원
    • 첫 구매 후 3일 이내 다운로드 시 익일 자동 지급
    • 한 ID당 최초 1회 지급 / sam 이용권 제외
    • 네이버 책을 통해 교보eBook 구매 이력이 없는 회원 대상
    • 교보e캐시 1,000원 지급 (유효기간 지급일로부터 7일)
    구글북액션을 통해서 교보eBook
    첫 구매 시 교보e캐시 지급해 드립니다.
    교보e캐시 1,000원
    • 첫 구매 후 3일 이내 다운로드 시 익일 자동 지급
    • 한 ID당 최초 1회 지급 / sam 이용권 제외
    • 구글북액션을 통해 교보eBook 구매 이력이 없는 회원 대상
    • 교보e캐시 1,000원 지급 (유효기간 지급일로부터 7일)