HTML CSS 디자인 레시피

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 태그의 스타일을 변경하고 싶다
200 브레드크럼즈 리스트를 작성하고 싶다
201 기사에 포함된 키워드나 태그를 표시하고 싶다
202 아이콘과 텍스트가 상하로 정렬된 버튼을 만들고 싶다
203 그림 좌·우측 텍스트를 나열하고 싶다
204 그림 주위에 텍스트를 나열하고 싶다205 플롯을 해제하고 싶다 패턴 ❶（clear）
206 박스를 옆으로 나열하고 싶다（float 판）
207 플롯을 해제하고 싶다 패턴 ❷（overflow）
208 플롯을 해제하고 싶다 패턴 ❸（clearfix）
209 박스의 위만 모서리가 둥근 모양의 버튼을 만들고 싶다
210 인용 블록에 장식으로 큰따옴표를 표시하고 싶다
211 세로 방향으로 내비게이션을 만들고 싶다
212 세로 방향 내비게이션 항목에 화살표를 표시하고 싶다
213 제목이 있는 패널 모양의 박스를 만들고 싶다
214 탭 버튼을 작성하고 싶다
215 페이지 네이션을 작성하고 싶다
216 썸네일 이미지와 텍스트를 가로로 나열하고
217 사진에 테두리를 넣고 싶다
218 사각형 그림을 원형으로 잘라내고 싶다
219 그림 위에 다른 그림을 겹쳐서 표시하고 싶다
220 그림 위에 텍스트를 겹쳐쓰고 싶다
221 배지를 겹쳐서 표시하고 싶다
222 실제 크기와 다른 크기로 그림을 표시하고 싶다
223 창 너비에 가득 채운 배경 그림을 표시하고 싶다 ❶
224 창 너비에 가득 채운 배경 그림을 표시하고 싶다 ❷
225 창 너비에 맞춰 변하는 Key Visual을 만들고 싶다
226 캘린더를 표시하고 싶다
227 검색 필드 안에 돋보기 아이콘을 표시하고 싶다
228 텍스트 필드 옆에 전송 버튼을 배치하고 싶다
229 풀다운 메뉴의 겉모양을 바꾸고 싶다.
230 로딩 사인을 표시하고 싶다

Chapter 12 내비게이션 디자인 테크닉
231 일반적인 내비게이션의 마크 업（HTML5 판)
232 일반적인 내비게이션의 마크 업（XHTML 판）
233 스마트폰용 글로벌 내비게이션을 작성하고 싶다
234 컴퓨터용 글로벌 내비게이션을 작성하고 싶다（float 판）
235 열려 있는 페이지의 내비게이션 링크를 강조하고 싶다
236 그림을 사용한 내비게이션을 작성하고 싶다（float 판）
237 컴퓨터용 글로벌 내비게이션을 작성하고 싶다（flexbox 판）
238 내비게이션 각 항목을 오른쪽 정렬로 하고 싶다（flexbox 판）
239 내비게이션 각 항목을 가운데 정렬로 하고 싶다（flexbox 판）
240 내비게이션 각 항목을 균등하게 배치하고 싶다 ❶（flexbox 판）
241 내비게이션 각 항목을 균등하게 배치하고 싶다 ❷（flexbox 판）
242 내비게이션 각 항목을 같은 크기로 하고 싶다 （flexbox 판）
243 내비게이션 각 항목만 오른쪽에 배치하고 싶다 （flexbox 판）
244 사이트나 기업의 로고를 헤더에 포함시키고 싶다
245 헤더에 검색 폼을 붙이고 싶다

Chapter 13 레이아웃 테크닉
246 확대·축소하는 싱글 컬럼 레이아웃을 하고 싶다
247 고정폭 가운데 정렬의 싱글 컬럼 레이아웃을 하고 싶다
248 확대·축소하는 2컬럼 레이아웃을 작성하고 싶다（float 판）
249 2컬럼 레이아웃 좌우를 교체하고 싶다（float 판）
250 너비가 고정된 2컬럼 레이아웃을 작성하고 싶다（float 판）
251 확대·축소하는 2컬럼 레이아웃을 작성하고 싶다（flexbox 판）
252 2컬럼 레이아웃 좌우를 바꾸고 싶다（flexbox 판）
253 확대·축소하는 3컬럼 레이아웃을 작성하고 싶다（float 판）
254 너비가 고정된 3컬럼 레이아웃을 작성하고 싶다（float 판）
255 확대·축소하는 3컬럼 레이아웃을 작성하고 싶다（flexbox 판）
256 3컬럼 레이아웃의 위치를 바꾸고 싶다（flexbox 판）
257 확대·축소하는 레이아웃의 최대 너비를 설정하고 싶다
258 내비게이션을 창 위쪽에 고정시키고 싶다
259 페이지 아래에 이벤트 블록을 표시하고 싶다
260 사이드 바가 스크롤되지 않는 2컬럼 레이아웃을 하고 싶다
261 바닥글의 저작권 표시와 주소를 각각 왼쪽, 오른쪽으로 정렬하고 싶다（float 판）
262 바닥글의 저작권 표시와 주소를 각각 왼쪽, 오른쪽으로 정렬하고 싶다（flexbox 판）
263 그림 위에 로고를 겹치고 싶다
264 배경 그림이 스크롤되지 않도록 하고 싶다
265 바닥글에 사이트 맵을 표시하고 싶다
266 박스를 나란히 정렬하고 싶다（float 판）
267 박스를 나란히 정렬하고 싶다（flexbox 판）
268 여러 개의 박스를 나란히 정렬하고 싶다（float판）269 여러 개의 박스를 나란히 정렬하고 싶다（flexbox판）

Chapter 14 리스 폰 시브 웹 디자인 테크닉
270 리스 폰 시브 웹 디자인을 위한 기본 마크업
271 화면 크기에 맞춰 CSS를 바꾸고 싶다
272 전화번호가 연결되지 않도록 하고 싶다
273 스마트폰용 파비콘을 설정하고 싶다
274 스마트폰과 컴퓨터 페이지 전체의 글자 크기를 바꾸고 싶다
275 싱글 컬럼을 2컬럼 레이아웃으로 바꾸고 싶다（float 판）
276 싱글 컬럼을 3컬럼 레이아웃으로 바꾸고 싶다（flexbox 판）
277 내비게이션 디자인을 바꾸고 싶다（float 판）
278 내비게이션 디자인을 바꾸고 싶다（flexbox 판）
279 화면이 넓을 때만 그림 옆에 텍스트가 나열된다
280 스마트폰에서 테이블을 가로 방향 스크롤을 하고 싶다
281 테이블의 보이는 보양을 제목+본문으로 바꾸고 싶다
282 폼 요소를 확대·축소하고 싶다

Chapter 15 애니메이션과 다양한 변형 테크닉
283 구분선을 그리고 싶다
284 구분선의 스타일을 변경하고 싶다
285 구분선 중간에 텍스트를 표시하고 싶다
286 구분선을 그라데이션으로 표시하고 싶다
287 텍스트에 그림자를 넣고 싶다
288 텍스트를 선택했을 때 하이라이트 색을 지정하고 싶다
289 동영상 파일을 표시하고 싶다
290 동영상을 Key Visual로 하고 싶다
291 텍스트를 기울이고 싶다
292 마우스를 올려놓았을 때 텍스트를 기울이고 싶다
293 그림에 마우스를 올려놓았을 때 점점 투명하게 바꾸고 싶다
294 그림에 마우스를 올려놓았을 때 점점 확대하고 싶다
295 그림에 마우스를 올려놓았을 때 명도를 높이는 효과를 넣고 싶다
296 그림에 마우스를 올려놓았을 때 세피아색 효과를 넣고 싶다
297 그림에 마우스를 올려놓았을 때 떠오르는 효과를 넣고 싶다
298 그림에 마우스를 올려놓았을 때 반전 효과를 넣고 싶다
299 그림의 색이 변화하는 애니메이션을 설정하고 싶다
300 배지가 조금 흔들리는 애니메이션을 설정하고 싶다