최신 표준 HTML5+CSS3 디자인

EBISUCOM (エビスコム)

다양한 미디어와 관련된 기획/제작을 하고 있다. 컴퓨터와 관련해서 서적/디지털 영상/CG/소프트웨어의 기획과 제작, 시스템 구축 등을 하고 있다.

윤인성

출근하는 게 싫어서 책을 집필/번역하기 시작했다. 일본어는 픽시브에서 웹 코믹을 읽다가 배웠다고 전해진다. 현재 직업 특성상 집에서 나갈 이유가 별로 없다는 것에 굉장히 만족하는 성격이기도 하다. 홍차와 커피를 좋아하며 요리, 음악, 그림, 스컬핑 등이 취미다. 『모던 웹을 위한 JavaScript+jQuery 입문』 『모던 웹을 위한 Node.js 프로그래밍』 『모던 웹 디자인을 위한 HTML5+CSS3 입문』 등을 저술하였으며, 『파이썬을 이용한 머신러닝, 딥러닝 실전 개발 입문』 『스위프트로 시작하는 아이폰 앱 개발 교과서』 『모던 웹사이트 디자인의 정석』 『유니티 게임 이펙트 입문』(이상 위키북스), 『실전 게임 제작으로 배우는 언리얼 엔진 4』 『TopCoder 알고리즘 트레이닝』 『Nature of Code』(이상 한빛미디어), 『소셜 코딩으로 이끄는 GitHub 실천 기술』(제이펍) 등을 번역했다.

• [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 기본 문법
    • 선택자
    • 미디어쿼리
  • 박스 모델
    • 박스의 기본 설정
    • 박스의 종류
    • 플렉시블 박스 레이아웃
    • 포지션 레이아웃
    • 박스 내부의 콘텐츠 디자인
    • 단위
    • 색
    • 변수
  • 최적화
  • 주요 장치의 화면 크기
  • 오래된 브라우저 전용 설정

예제코드 관련 GitHub 페이지

• GitHub 페이지: https://github.com/wikibook/html-css-design
• ZIP 형식으로 다운로드: https://github.com/wikibook/html-css-design/archive/master.zip

• 22쪽, 본문 중간의 Android 아이콘 하단의 박스

  4.3 이후

  ==>

  4.3 이전

• 32쪽, 예제 코드에서 7번째 줄

  --dark-color: #2B5566;

  ==>

  --dark-main-color: #2B5566;

• 32쪽, 우측 하단 C 영역의 4번째 줄

  어두운 색상을 “--dark-color”라는

  ==>

  어두운 색상을 “--dark-main-color”라는

• 189쪽, 예제 코드의 밑에서 2번째 줄

  padding: 120px 10px 30px;

  ==>

  padding: 30px 10px; 

• 211쪽, 우측 하단 예제의 빨간색으로 표시된 부분

  .history th {
      padding-right: 1rem;
      text-align: left;
      word-break: keep-all;
  }

  ==>

  .history th {
      padding-right: 1rem;
      text-align: left;
      word-break: keep-all;
      white-space: nowrap;
  }

• 235쪽, 우측 하단 예제의 빨간색으로 표시된 부분의 5번째 줄

  라요. 이유는 ...</</p>

  ==>

  라요. 이유는 ...</p>

• 247쪽, 맨 마지막 줄

  “r-only”를 추가합니다. ==> “sr-only”를 추가합니다.

• 309쪽, 우측 상단 예제 코드의 3번째 줄

  align-items: ～ ;

  ==>

  flex-wrap: ~ ;