책 소개
이 책은 15장으로 구성되어 있습니다. 1장에서는 HTML과 CSS의 기본적 사양에 대해서 소개하였습니다. 실제 웹 사이트 제작에 밑거름 HTML과 CSS를 제대로 이해하기 위해서 중요한 지식만을 골라 한눈에 알아볼 수 있도록 하였습니다.
2장부터 9장까지는 웹 제작에서 반드시 필요한 HTML과 CSS를 조합한 마크 업의 예를 소개합니다.
10장과 11장에서는 실제 웹 디자인에서 필요하고 메타 데이터의 활용 방법이나 페이지에 들어가는 요소의 구성을 소개합니다. 여러 개의 태그 및 속성을 조합해서 디자인을 만드는 갖가지 방법을 확인할 수 있습니다.
12장에서 14장에서는 웹 페이지의 레이아웃을 위한 HTML 구조와 CSS 기술을 소개합니다. 레이아웃의 수정을 할 수 있도록 실제로 웹 페이지를 만들 때의 템플릿으로 사용할 수 있습니다. 물론 샘플은 반응형 웹 디자인도 할 수 있습니다.
마지막 15장에서는 애니메이션이나 변형(트랜스폼)이라는 페이지의 연출에 사용할 수 있는 기술을 소개합니다.
출판사 서평
이 책은 실제 웹 사이트 제작에서 많이 사용되는 기술을 모아 웹 페이지의 디자인을 위해 집대성한 레퍼런스입니다. ‘뛰어난 기능을 이용해 멋진 디자인으로 사이트를 꾸미고 싶다’라고 생각할 때 도움이 되는 샘플을 수록하였습니다. 웹 사이트 디자인은 모두가 달라서 아무리 많은 샘플을 준비하더라도 ‘입맛에 딱 맞는’ 샘플을 찾기가 어렵습니다. 이 책에서는 실제 웹 사이트 제작에 응용하기 쉽고 사용자가 지정하기 쉬운 샘플을 소개함과 동시에 어디를 어떻게 수정하여 응용할 수 있는지 HTML의 구조와 CSS의 구조를 자세히 해설하였습니다.
꼭 샘플의 소스 코드를 다운로드하여 동작을 확인하면서 HTML과 CSS을 수정하고 응용하기 바랍니다.
저자 狩野祐東(스케하루 카노우)
미국 샌프란시스코에서 UI 디자인 이론을 배웠으며 일본으로 귀국 후에는 회사에서 근무를 하다가 프리랜서 생활을 했습니다. 2016년에 주식회사 Studio947를 설립하였습니다. 웹 사이트나 애플리케이션의 인터페이스 디자인, 인터랙티브 콘텐츠의 개발을 하며 각종 세미나나 연수 강사로 활동 중에 있습니다.
Chapter 01 HTML/CSS의 기초
001 HTML의 기초 지식
002 웹 사이트를 구성하는 파일
003 CSS의 기본 지식
004 박스 모델을 이용한 CSS의 적용
005 CSS를 적용하는 순서
006 브라우저의 개발 툴
Chapter 02 페이지의 기본이 되는 HTML
007 HTML의 기본 마크 업
008 DOCTYPE 선언을 바꿔 쓰고 싶다
009 페이지에서 주로 사용되는 언어를 설정하고 싶다
010 페이지의 문자 코드 세트를 설정하고 싶다
011 페이지의 타이틀을 설정하고 싶다
012 페이지의 개요를 작성하고 싶다
013 페이지의 키워드를 설정하고 싶다
014 CSS 파일을 불러오고 싶다
015 CSS 파일의 문자 코드 세트를 지정하고 싶다
016 CSS를 HTML에 직접 작성하고 싶다
017 CSS를 태그에 직접 작성하고 싶다
018 JavaScript 파일을 불러오고 싶다
019 JavaScript를 HTML에 직접 쓰고 싶다
020 JavaScript가 작동하지 않을 때 콘텐츠를 표시하고 싶다
021 HTML에 주석을 달고 싶다
022 CSS에 주석을 달고 싶다
Chapter 03 텍스트 디자인과 테크닉
023 단락을 마크 업하고 싶다
024 제목을 표시하고 싶다
025 단락 안에서 줄을 바꾸고 싶다
026 텍스트의 일부를 강조하고 싶다
027 텍스트의 일부를 굵은 글씨로 하고 싶다
028 프로그램의 소스 코드를 표시하고 싶다
029 연락처를 표시하고 싶다
030 위첨자나 아래첨자를 표시하고 싶다
031 정리된 텍스트를 인용하여 표시하고 싶다
032 짧은 텍스트를 문장에서 인용하여 표시하고 싶다
033 날짜와 시간을 표시하고 싶다
034 텍스트 일부에 형광펜 효과를 넣고 싶다
035 글자에 루비를 넣고 싶다
036 줄임말을 표시하고 싶다
037 텍스트 일부를 수정한 것으로 표시하고 싶다
038 새로 삽입한 텍스트라는 것을 표시하고 싶다
039 짧은 소스 코드를 표시하고 싶다
040 툴팁을 표시하고 싶다
041 카피라이트를 표시하고 싶다
042 HTML에서 사용할 수 없는 기호를 표시하고 싶다043 텍스트의 색을 변경하고 싶다（16진수）
044 텍스트의 색을 변경하고 싶다（RGB）
045 불투명한 텍스트 색을 지정하고 싶다（RGBA）
046 요소마다 글자 크기를 지정하고 싶다
047 페이지 전체의 글자 크기를 상대적으로 지정하고 싶다
048 줄간격을 넓거나 좁게 조절하고 싶다
049 리드문을 굵은 글씨로 설정하고 싶다
050 제목 글자를 일반적인 두께로 설정하고 싶다
051 이탤릭으로 표시되는 요소를 일반 텍스트로 되돌리고 싶다
052 텍스트의 정렬을 변경하고 싶다
053 문자와 문자 사이의 간격을 넓히거나 좁히고 싶다
054 텍스트에 글자 삭제선을 긋고 싶다
055 좋아하는 색으로 텍스트에 형광펜 효과를 넣고 싶다
056 단락 앞뒤에 공간을 없애고 싶다
057 단락의 첫 줄을 왼쪽 들여쓰기 하고 싶다
058 첫 머리 글자를 크게 하고 싶다
059 단락의 첫 줄만 색상을 바꾸고 싶다
060 인용 앞 뒤에 텍스트를 삽입하고 싶다
061 텍스트 앞뒤에 기호를 삽입하고 싶다
062 인용 부호를 자유롭게 지정하고 싶다
Chapter 04 리스트 디자인 테크닉
063 리스트를 표시하고 싶다
064 글머리 기호를 번호로 표시하고 싶다
065 글머리 기호를 1 이외의 숫자부터 시작하고 싶다
066 ‘키워드’와 ‘설명’을 한꺼번에 표시하고 싶다
067 ‘키워드’와 ‘설명’ 레이아웃을 변경하고 싶다
068 리스트의 글머리 기호를 변경하고 싶다
069 글머리 기호의 번호 매기기를 변경하고 싶다
070 글머리 기호를 그림으로 바꾸고 싶다 ❶
071 글머리 기호를 그림으로 바꾸고 싶다 ❷
072 글머리 기호를 순위로 표현하고 싶다
Chapter 05 링크와 그림에 대한 테크닉
073 사이트 안에서 다른 페이지로 링크하고 싶다
074 다른 사이트로 링크하고 싶다
075 링크를 다른 탭에서 표시하고 싶다
076 페이지 안에서 링크를 설정하고 싶다
077 페이지 내 링크에서 이동한 곳의 컬러를 변화시키고 싶다
078 전자우편 주소로 링크하고 싶다
079 전화번호를 링크하고 싶다
080 PDF 파일을 다운로드 시키고 싶다
081 링크 텍스트의 스타일을 지정하고 싶다
082 마우스를 올려놓았을 때 불투명으로 표시하고 싶다
083 링크 아래를 점선으로 표시하고 싶다
084 마우스를 올려 놓았을 때 배경색을 표시하고 싶다
085 마우스를 올려 놓았을 때 테두리선을 표시하고 싶다
086 스마트폰의 하이라이트 색을 변경하고 싶다
087 그림을 표시하고 싶다
088 base64의 데이터로 그림을 표시하고 싶다
089 SVG 형식을 그림 파일로 표시하고 싶다
090 SVG 데이터를 직접 넣고 싶다
091 그림에 링크를 넣고 싶다
092 그림을 불투명으로 하고 싶다
Chapter 06 페이지 전체에 적용하는 디자인 테크닉
093 창의 주위에 여백을 없애고 싶다
094 페이지 전체의 배경색을 설정하고 싶다
095 페이지 전체의 글꼴을 설정하고 싶다
096 페이지 전체에 배경 그림을 깔고 싶다
097 페이지 전체에 적용한 배경 그림의 위치를 고정시키고 싶다
098 페이지 위에서 아래로 그라데이션을 넣고 싶다
099 리셋 CSS를 적용하고 싶다
100 노멀라이즈 CSS를 적용하고 싶다
101 새니타이즈 CSS를 적용하고 싶다
Chapter 07 박스 디자인 테크닉
102 기본 박스를 작성하고 싶다
103 기사와 섹션 박스를 작성하고 싶다
104 그 페이지의 핵심 콘텐츠가 포함된 박스를 작성하고 싶다
105 박스 전체를 링크하고 싶다
106 그림의 캡션을 표시하고 싶다
107 페이지의 일부분에 다른 HTML을 표시하고 싶다 ❶
108 페이지의 일부분에 다른 HTML을 표시하고 싶다 ❷
109 박스에 테두리를 그리고 싶다
110 테두리와 콘텐츠 사이에 여백을 만들고 싶다
111 박스와 박스의 거리를 설정하고 싶다
112 제목에 밑줄을 그리고 싶다
113 테두리로 제목을 디자인하고 싶다
114 박스의 너비와 높이를 지정하고 싶다
115 박스의 높이를 고정시키고 스크롤 바를 표시하고 싶다
116 박스의 높이를 고정시키고 콘텐츠를 숨기고 싶다
117 1줄에 들어가지 않는 텍스트를 생략하고 싶다
118 아이콘과 텍스트의 위치를 정렬하고 싶다
119 박스와 그림 아래의 빈 공간을 없애고 싶다
120 박스에 배경색을 지정하고 싶다
121 박스의 배경에 그림을 적용하고 싶다
122 박스의 배경에 선형 그라데이션을 사용하고 싶다
123 박스의 배경에 방사형 그라데이션을 사용하고 싶다
124 배경 그림을 가로 방향으로 반복해서 표시하고 싶다
125 배경 그림을 세로 방향으로 반복해서 표시하고 싶다
126 배경 화면을 반복되지 않도록 하고 싶다
127 배경 화면을 박스의 정 중앙에 표시하고 싶다
128 배경 그림의 표시 위치를 수치로 지정하고 싶다
129 배경 그림을 박스 크기에 맞게 확대·축소하고 싶다 ❶
130 배경 그림을 박스 크기에 맞게 확대·축소하고 싶다 ❷
131 여러 개의 배경 그림을 표시하고 싶다
132 테두리를 그림으로 사용하고 싶다
133 박스의 모서리를 둥글게 하고 싶다
134 박스 전체를 불투명으로 만들고 싶다
135 박스에 그림자를 넣고 싶다
136 박스 안쪽에 그림자를 넣고 싶다
Chapter 08 테이블 디자인 테크닉
137 테이블의 기본 마크 업
138 테이블에 기본적인 선을 넣고 싶다
139 테이블의 제목 셀을 작성하고 싶다
140 셀을 가로 방향으로 결합하고 싶다
141 셀을 세로 방향으로 결합하고 싶다
142 테이블의 행을 헤더, 데이터, 바닥글로 나누고 싶다
143 테이블 위에 캡션을 넣고 싶다
144 테이블 아래에 캡션을 넣고 싶다
145 셀의 텍스트 정렬을 변경하고 싶다
146 셀의 콘텐츠와 테두리 사이에 공간을 만들고 싶다
147 테이블 각 행 아래에 선을 그리고 싶다
148 셀 크기를 고정하고 싶다
149 테이블 전체 너비를 지정한 크기로 고정하고 싶다
150 셀의 너비를 똑같이 만들고 싶다
151 테이블 전체의 배경을 설정하고 싶다
152 제목 행에 배경을 설정하고 싶다
153 테이블의 배경색을 행마다 다르게 표시하고 싶다
154 마우스의 움직임에 따라 배경색을 변경하고 싶다
155 텍스트가 줄바꿈을 하지 않도록 셀을 지정하고 싶다
Chapter 09 폼 디자인 테크닉
156 폼의 기본 마크 업
157 텍스트 필드를 표시하고 싶다
158 폼 요소에 라벨을 붙이고 싶다 ❶
159 폼 요소에 라벨을 붙이고 싶다 ❷
160 전자우편을 입력하는 텍스트 필드를 표시하고 싶다
161 전화번호를 입력하는 텍스트 필드를 표시하고 싶다
162 비밀번호를 입력하는 텍스트 필드를 표시하고 싶다
163 텍스트 필드에 입력 힌트를 표시하고 싶다
164 최초의 폼 요소를 자동으로 선택하고 싶다.
165 필수 입력 항목을 표시하고 싶다
166 복사는 할 수 있지만 입력은 할 수 없는 텍스트 필드를 만들고 싶다
167 파일 업로드 기능을 사용하고 싶다
168 라디오 버튼을 표시하고 싶다
169 체크 박스를 표시하고 싶다
170 풀다운 메뉴를 표시하고 싶다
171 여러 항목을 선택할 수 있는 리스트를 표시하고 싶다
172 풀다운 메뉴의 항목을 보기 쉽게 그룹화 하고 싶다
173 텍스트 영역을 표시하고 싶다
174 숨겨진 데이터를 넣고 싶다
175 폼을 그룹으로 묶고 싶다
176 전송 버튼을 표시하고 싶다
177 전송 버튼을 그림으로 사용하고 싶다
178 일반적인 추가 버튼을 작성하고 싶다
179 텍스트 필드·텍스트 영역의 스타일을 조절하고 싶다
180 텍스트 필드·텍스트 영역의 여백을 조절하고 싶다
181 선택한 텍스트 필드의 컬러를 변경하고 싶다
182 입력 내용을 체크하여 텍스트 필드에 표시하고 싶다
183 전송 버튼의 모양을 변경하고 싶다
184 라벨과 텍스트 필드를 옆으로 나란히 정렬시키고 싶다
Chapter 10 메타 데이터와 외부 사이트 연결 테크닉
185 파비콘을 설정하고 싶다
186 인쇄용 CSS를 읽고 싶다
187 Font Awesome을 사용하고 싶다
188 웹 글꼴 ‘Google Fonts’를 사용하고 싶다
189 페이지가 검색되지 않도록 하고 싶다
190 액세스 키를 설정하고 싶다
191 탭 키로 선택 순서를 설정하고 싶다
192 5초 후에 다른 페이지로 이동시키고 싶다
Chapter 11 요소 작성 테크닉
193 제목과 부제를 표시하고 싶다
194 글자를 키보드 모양으로 보이게 하고 싶다
195 링크가 다른 창에서 표시될 경우 아이콘을 표시하고 싶다
196 PDF 등 특정 파일로의 링크를 아이콘이나 배경으로 표시하고 싶다
197 텍스트를 캡슐 모양으로 둘러싸고 싶다
198 텍스트에 두꺼운 펜으로 그린 것과 같은 밑줄을 넣고 싶다
199
| 제목 | 작성자 | 날짜 | |
|---|---|---|---|
