최신 표준 HTML5+CSS3 디자인

6단계로 마스터하는

플렉시블 박스 레이아웃을 이용한 최신 표준 반응형 웹 디자인 마스터하기!

이 책은 멀티 디바이스에 대응하는 웹 사이트를 단계적으로 만들어 보면서 최신 표준의 HTML과 CSS를 공부하기 위한 책입니다.

웹 페이지 제작을 둘러싼 환경은 최근 몇 년 동안 크게 변화하고 있습니다. PC보다는 스마트폰, 태블릿 등의 모바일 장치에서 더 많이 접속하고 있으며, 이로 인해 단순한 1단 구조를 가진 웹 페이지를 많이 만들게 되었습니다. 이 책에서는 오래된 웹 브라우저 때문에 사용하지 못하던 기능들을 모두 활용해 간단한 단계를 거쳐 현대적인 웹 페이지를 만드는 방법을 소개합니다.

6단계의 학습 과정을 통해 웹 사이트 제작의 기초부터 웹 페이지 재구성까지 효율적으로 공부할 수 있게 안내하며, 예제 파일을 내려받아 학습하거나 활용할 수 있도록 준비했습니다. 또한 앞으로 웹 페이지 만들기를 배우는 분이나 최신 HTML + CSS에 관심 있는 분들을 위해 웹 페이지 제작과 관련된 기술을 모두 정리해서 책의 뒷부분에 실었습니다.

 

도서 상세 이미지

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 페이지

  • 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: ~ ;