├── 10 ├── adj.html ├── attr-1.html ├── attr-2.html ├── attr-3.html ├── attr-4.html ├── attr-5.html ├── attr-6.html ├── attr-7.html ├── child.html ├── css │ ├── attr.css │ ├── register-result.css │ ├── register.css │ ├── register1.css │ ├── register2.css │ └── register3.css ├── descendant.html ├── images │ ├── 1.jpg │ ├── 2.jpg │ ├── 3.jpg │ ├── ch.png │ ├── excel_icon.gif │ ├── hwp_icon.gif │ ├── jp.png │ ├── newwindow.png │ └── us.png ├── navi.html ├── nth.html ├── ps-1.html ├── ps-2.html ├── ps-3.html ├── ps-4.html ├── quiz-1.html ├── quiz-2.html ├── register-result.html ├── register.html ├── register1.html ├── register2.html ├── register3.html ├── sibling.html ├── sol-1.html └── sol-2.html ├── 11 ├── ani-1.html ├── ani-2.html ├── ani-3.html ├── css │ ├── animate.css │ ├── product-result.css │ └── product.css ├── images │ ├── bear.jpg │ ├── prod1.jpg │ ├── prod2.jpg │ ├── prod3.jpg │ ├── sunset.jpg │ └── tree.jpg ├── perspective.html ├── product-result.html ├── product.html ├── quiz-1.html ├── quiz-2.html ├── rotate.html ├── rotate3d.html ├── scale.html ├── skew-2.html ├── skew.html ├── sol-1.html ├── sol-2.html ├── tr-1.html ├── tr-2.html ├── tr-function.html ├── tr-samples.html ├── transform.html └── translate.html ├── 12 ├── center.html ├── css │ ├── gallery-result.css │ ├── gallery.css │ └── style.css ├── flex-1.html ├── flex-2.html ├── flex-3.html ├── flex-4.html ├── flex-5.html ├── flex-6.html ├── flex-7.html ├── grid-1.html ├── grid-2.html ├── grid-3.html ├── grid-4.html ├── grid-5.html ├── grid-6.html ├── grid-gallery-result.html ├── grid-gallery.html ├── images │ ├── 1.jpg │ ├── 2.jpg │ ├── bg0.jpg │ ├── bg1.jpg │ ├── bg2.jpg │ ├── bg3.jpg │ ├── bg5.jpg │ ├── cup-1.jpg │ ├── cup-2.jpg │ ├── cup-3.jpg │ ├── cup-4.jpg │ ├── cup-5.jpg │ ├── cup-6.jpg │ ├── cup-7.jpg │ └── cup-8.jpg ├── index.html ├── mq-result.html └── vw.html ├── 13 ├── alert.html ├── confirm.html ├── console-log.html ├── document-write.html ├── greeting.html ├── js-time-result.html ├── js-time.html ├── js │ ├── change-color.js │ └── myscript.js ├── prompt-1.html ├── prompt-2.html ├── script-1.html └── script-2.html ├── 14 ├── age-result.html ├── age.html ├── and.html ├── css │ ├── gugudan-table.css │ ├── gugudan.css │ └── switch.css ├── even.html ├── factorial.html ├── gugudan-1.html ├── gugudan-2.html ├── gugudan-3.html ├── gugudan-table.html ├── if-1.html ├── if-2.html ├── if-3.html ├── not.html ├── or.html ├── quiz-1.html ├── quiz-2.html ├── repeat-1.html ├── repeat-2.html ├── repeat-3.html ├── seat-1.html ├── seat-result.html ├── seat.html ├── sol-1.html ├── sol-2.html └── switch.html ├── 15 ├── addNumber-1.html ├── addNumber-2.html ├── addNumber-3.html ├── addNumber-4.html ├── arrow-1.html ├── arrow-2.html ├── arrow-3.html ├── calcSum-result.html ├── calcSum.html ├── const-1.html ├── const-2.html ├── css │ ├── event.css │ └── function.css ├── detail-1-result.html ├── detail-1.html ├── detail-2.html ├── event-1.html ├── event-2.html ├── event-3.html ├── event.html ├── function.html ├── images │ ├── flower.jpg │ └── flower1.jpg ├── let-1.html ├── let-2.html ├── let-3.html ├── let-4.html ├── let-5.html ├── multiple.html ├── no-function.html ├── quiz-1.html ├── quiz-2.html ├── scope.html ├── sol-1.html ├── sol-2.html ├── using-function.html ├── var-1.html ├── var-2.html ├── var-3.html └── var-4.html ├── 16 ├── array-1.html ├── array-2.html ├── array-3.html ├── array-4.html ├── array-5.html ├── center-result.html ├── center.html ├── close.html ├── current.html ├── day-result.html ├── day.html ├── doit-event-result.html ├── doit-event.html ├── doit-main.html ├── event-2.html ├── event-result.html ├── event.html ├── images │ └── doit.jpg ├── locationObject.html ├── main-result.html ├── main.html ├── notice.html ├── popup-check.html ├── popup.html ├── popupname.html ├── position.html ├── quiz-1.html ├── quiz-2.html ├── screenObject.html ├── sol-1.html ├── sol-2.html ├── time-1.html └── time-2.html ├── 17 ├── acessDom.html ├── css │ ├── dom.css │ ├── lightbox.css │ ├── nameList.css │ ├── nodelist.css │ └── product.css ├── dom.html ├── domCss.html ├── domNode-1.html ├── domNode-2.html ├── domNode-3.html ├── domNode.html ├── domTree.html ├── event-1.html ├── event-2.html ├── event-3.html ├── event-4.html ├── event-5.html ├── event-6.html ├── getAttr.html ├── images │ ├── coffee-blue.jpg │ ├── coffee-gray.jpg │ ├── coffee-pink.jpg │ ├── cup-1.png │ ├── cup-2.png │ ├── doit.jpg │ ├── dom.jpg │ ├── easys-1.jpg │ ├── easys-2.jpg │ ├── tree-1-thumb.jpg │ ├── tree-1.jpg │ ├── tree-2-thumb.jpg │ ├── tree-2.jpg │ ├── tree-3-thumb.jpg │ ├── tree-3.jpg │ ├── tree-4-thumb.jpg │ ├── tree-4.jpg │ ├── tree-5-thumb.jpg │ ├── tree-5.jpg │ ├── tree-6-thumb.jpg │ └── tree-6.jpg ├── inner.html ├── lightbox-result.html ├── lightbox.html ├── nodeCreate-before.html ├── nodeCreate-result.html ├── nodeCreate.html ├── nodeDelete-result.html ├── nodeDelete.html ├── nodeList.html ├── popup-layer.html ├── quiz-1.html ├── quiz-2.html ├── setAttr.html ├── sol-1.html └── sol-2.html ├── 02 └── index.html ├── 03 ├── css │ └── structure.css ├── images │ ├── activity.jpg │ └── healing.jpg ├── index.html ├── myDoc-result.html ├── myDoc.html └── structure.html ├── 04 ├── audio-1.html ├── audio-2.html ├── blockquote.html ├── br.html ├── button2.html ├── css │ └── poster.css ├── d-list.html ├── em-i.html ├── embed.html ├── heading.html ├── image-1.html ├── image-2.html ├── images │ ├── link.png │ ├── mic.jpg │ ├── salad.jpg │ ├── tangerines.jpg │ └── top.jpg ├── index-2.html ├── index.html ├── medias │ ├── flight.mp4 │ ├── flower.mp4 │ ├── salad.mp4 │ └── spring.mp3 ├── o-list-1.html ├── o-list-2.html ├── obj.html ├── p.html ├── poster-image-result.html ├── poster-image.html ├── poster-link-result.html ├── poster-link.html ├── poster-list-result.html ├── poster-list.html ├── poster-table-result.html ├── poster-table.html ├── poster-text-result.html ├── poster-video-result.html ├── poster-video.html ├── poster.html ├── product.pdf ├── quiz-1.html ├── quiz-2.html ├── sol-1.html ├── sol-2.html ├── strong.html ├── strong_b.html ├── sub_sub_ins_del.html ├── table-1.html ├── table-2.html ├── table-3.html ├── table-4.html ├── table-5.html ├── text.html ├── u-list.html ├── video-1.html └── video-2.html ├── 05 ├── button-2.html ├── button-3.html ├── button.html ├── css │ ├── form2.css │ ├── notice.css │ ├── order.css │ ├── order2.css │ └── register.css ├── date.html ├── datetime.html ├── fieldset.html ├── file.html ├── hidden.html ├── images │ ├── login.png │ └── notice.jpg ├── label.html ├── login-image.html ├── login.html ├── multi-data.html ├── notice.html ├── number.html ├── order.html ├── placeholder.html ├── quiz-1.html ├── quiz-2.html ├── radio-check.html ├── register-1-result.html ├── register-1.html ├── register-2-result.html ├── register-2.html ├── register-3-result.html ├── register-3.html ├── register-4.html ├── required.html ├── select.html ├── sol-1.html ├── sol-2.html ├── t-field.html └── textarea.html ├── 06 ├── 06_exam.zip ├── basic-style.html ├── cascading.html ├── class.html ├── css │ ├── mystyle-result.css │ ├── register.css │ └── style.css ├── group.html ├── id.html ├── images │ └── cat.jpg ├── inline.html ├── no-style.html ├── quiz-1.html ├── quiz-2.html ├── sol-1.html ├── sol-2.html ├── stylesheet-1.html ├── stylesheet-2.html ├── type.html └── universe.html ├── 07 ├── color.html ├── css-color-result.html ├── css-color.html ├── css │ └── basic.css ├── fonts │ ├── ostrich-sans-bold.eot │ ├── ostrich-sans-bold.svg │ ├── ostrich-sans-bold.ttf │ └── ostrich-sans-bold.woff ├── gfont-result.html ├── gfont.html ├── images │ ├── bg.jpg │ ├── dot.png │ └── top.jpg ├── line-height-col-1.html ├── line-height-col-2.html ├── line-height.html ├── link-2.html ├── list-1.html ├── list-2.html ├── list-3.html ├── list-navi-result.html ├── list-navi.html ├── quiz-1.html ├── quiz-2.html ├── quiz-3.html ├── quiz-4.html ├── rgba.html ├── sol-1.html ├── sol-2.html ├── sol-3.html ├── sol-4.html ├── spacing.html ├── table-css1.html ├── table-css2.html ├── text-align.html ├── text-decoration.html ├── text-shadow.html ├── text-transform.html ├── tstyle-1.html └── webfont.html ├── 08 ├── 2column-result.html ├── 2column.html ├── 3column-result.html ├── 3column.html ├── block.html ├── border-1.html ├── border-2.html ├── border-3.html ├── border-4.html ├── border-5.html ├── border-6.html ├── border-7.html ├── border-8.html ├── box-shadow.html ├── box-sizing.html ├── box-width.html ├── boxmodel-1.html ├── boxmodel-2.html ├── boxmodel.html ├── css │ ├── 2column-result.css │ ├── 2column.css │ ├── 3column-result.css │ ├── 3column.css │ ├── position-2.css │ ├── position-3.css │ ├── product-result.css │ ├── product-tmp.css │ ├── product.css │ ├── style-1.css │ ├── style-2.css │ └── style.css ├── display.html ├── float-1.html ├── float-2.html ├── float-3.html ├── images │ ├── bear.jpg │ ├── bg.jpg │ ├── cat.jpg │ ├── guitar-bg.jpg │ ├── photo.jpg │ ├── tangerines.jpg │ └── tree.png ├── inline.html ├── left-top.html ├── margin-1.html ├── margin-2.html ├── margin-3.html ├── margin-overlap.html ├── padding.html ├── position-1.html ├── position-2.html ├── position-3.html ├── product-result.html ├── product-tmp.html ├── product.html ├── quiz-1.html ├── quiz-2.html ├── quiz-3.html ├── sol-1.html ├── sol-2.html └── sol-3.html ├── 09 ├── background-result.html ├── background.html ├── bg-1.html ├── bg-2.html ├── bg-3.html ├── bg-4.html ├── bg-clip.html ├── images │ ├── bg1.jpg │ ├── bg2.png │ ├── bg3.png │ ├── bg4.jpg │ ├── bg5.jpg │ ├── book-icon.png │ ├── mic.png │ └── onair.png ├── linear-1.html ├── linear-2.html ├── linear-3.html ├── pattern.html ├── quiz-1.html ├── quiz-2.html ├── quiz-3.html ├── radial-1.html ├── radial-2.html ├── radial-3.html ├── radial-4.html ├── repeating.html ├── sol-1.html ├── sol-2.html └── sol-3.html ├── README.md └── sources /02/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 웹 개발 입문 6 | 7 | 8 |

웹 개발 기초

9 |

HTML

10 |

CSS

11 |

자바스크립트

12 | 13 | -------------------------------------------------------------------------------- /03/images/activity.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/03/images/activity.jpg -------------------------------------------------------------------------------- /03/images/healing.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/03/images/healing.jpg -------------------------------------------------------------------------------- /03/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | HTML 기본 문서 6 | 7 | 8 |

프런트엔드 웹 개발

9 |
10 |

HTML

11 |

CSS

12 |

자바스크립트

13 | 14 | -------------------------------------------------------------------------------- /03/myDoc-result.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 첫 문서 연습 6 | 7 | 8 |

웹 문서 만들기

9 | 10 | -------------------------------------------------------------------------------- /03/myDoc.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 첫 번째 문서 연습 7 | 8 | 9 |

웹 문서 만들기

10 | 11 | -------------------------------------------------------------------------------- /04/blockquote.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 상품 소개 페이지 6 | 7 | 8 |

레드향

9 |

껍질에 붉은 빛이 돌아 레드향이라 불린다.

10 |

레드향은 한라봉과 귤을 교배한 것으로
일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.

11 |
비타민 C와 비타민 P가 풍부해
혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.
12 |

레드향 샐러드 레시피

13 |

상품 구성

14 | 15 | -------------------------------------------------------------------------------- /04/br.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 상품 소개 페이지 6 | 7 | 8 |

레드향

9 |

껍질에 붉은 빛이 돌아 레드향이라 불린다.

10 |

레드향은 한라봉과 귤을 교배한 것으로
일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.

11 |

비타민 C와 비타민 P가 풍부해
혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.

12 |

레드향 샐러드 레시피

13 |

상품 구성

14 | 15 | -------------------------------------------------------------------------------- /04/css/poster.css: -------------------------------------------------------------------------------- 1 | #container { 2 | width:800px; /* 컨테이너 너비 */ 3 | margin:0 auto; /* 컨테이너 화면 중앙에 배치 */ 4 | } 5 | table, th, td { 6 | border:1px solid #222; /* 표 테두리 */ 7 | border-collapse: collapse; /* 테두리 1줄만 표시 */ 8 | } 9 | th, td { 10 | padding:10px; /* 셀 안쪽의 여백(패딩) */ 11 | } 12 | 13 | -------------------------------------------------------------------------------- /04/d-list.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 상품 소개 페이지 6 | 7 | 8 |

상품 구성

9 |
10 |
선물용 3kg
11 |
소과 13~16과
12 |
중과 10~12과
13 |
14 |
15 |
선물용 5kg
16 |
중과 15~19과
17 |
18 | 19 | -------------------------------------------------------------------------------- /04/em-i.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 상품 소개 페이지 6 | 7 | 8 |

레드향

9 |

껍질에 붉은 빛이 돌아 레드향이라 불린다.

10 |

레드향은 한라봉과 귤을 교배한 것으로
일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.

11 |

비타민 C와 비타민 P가 풍부해
혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.

12 |

레드향 샐러드 레시피

13 |

상품 구성

14 | 15 | -------------------------------------------------------------------------------- /04/embed.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 멀티미디어 파일 삽입하기 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /04/heading.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 상품 소개 페이지 6 | 7 | 8 |

레드향

9 |

레드향 샐러드 레시피

10 |

상품 구성

11 | 12 | -------------------------------------------------------------------------------- /04/image-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 상품 소개 페이지 6 | 7 | 8 | 레드향 9 |

레드향

10 |

껍질에 붉은 빛이 돌아 레드향이라 불린다.

11 |

레드향은 한라봉과 귤을 교배한 것으로
일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.

12 |

비타민 C와 비타민 P가 풍부해
혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.

13 |
14 |

레드향 샐러드 레시피

15 |

재료 : 레드향 1개, 아보카도 1개, 토마토 1개, 샐러드 채소 30g

16 |

드레싱 : 올리브유 1큰술, 레몬즙 2큰술, 꿀 1큰술, 소금 약간

17 |
    18 |
  1. 샐러드 채소를 씻고 물기를 제거한 후 준비합니다.
    2. 19 |
  2. 레드향과 아보카도, 토마토를 먹기 좋은 크기를 썰어둡니다.
    3. 20 |
  3. 드레싱 재료를 믹서에 갈아줍니다.
    4. 21 |
  4. 볼에 샐러드 채소와 썰어 둔 레드향, 아보카도, 토마토를 넣고 드레싱을 뿌리면 끝!
    5. 22 |
23 | 24 | -------------------------------------------------------------------------------- /04/images/link.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/04/images/link.png -------------------------------------------------------------------------------- /04/images/mic.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/04/images/mic.jpg -------------------------------------------------------------------------------- /04/images/salad.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/04/images/salad.jpg -------------------------------------------------------------------------------- /04/images/tangerines.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/04/images/tangerines.jpg -------------------------------------------------------------------------------- /04/images/top.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/04/images/top.jpg -------------------------------------------------------------------------------- /04/medias/flight.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/04/medias/flight.mp4 -------------------------------------------------------------------------------- /04/medias/flower.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/04/medias/flower.mp4 -------------------------------------------------------------------------------- /04/medias/salad.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/04/medias/salad.mp4 -------------------------------------------------------------------------------- /04/medias/spring.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/04/medias/spring.mp3 -------------------------------------------------------------------------------- /04/o-list-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 상품 소개 페이지 6 | 7 | 8 |

레드향 샐러드 레시피

9 |

재료 : 레드향 1개, 아보카도 1개, 토마토 1개, 샐러드 채소 30g

10 |

드레싱 : 올리브유 1큰술, 레몬즙 2큰술, 꿀 1큰술, 소금 약간

11 |
    12 |
  1. 샐러드 채소를 씻고 물기를 제거한 후 준비합니다.
    2. 13 |
  2. 레드향과 아보카도, 토마토를 먹기 좋은 크기를 썰어둡니다.
    3. 14 |
  3. 드레싱 재료를 믹서에 갈아줍니다.
    4. 15 |
  4. 볼에 샐러드 채소와 썰어 둔 레드향, 아보카도, 토마토를 넣고 드레싱을 뿌리면 끝!
    5. 16 |
17 | 18 | -------------------------------------------------------------------------------- /04/o-list-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 상품 소개 페이지 6 | 7 | 8 |

레드향 샐러드 레시피

9 |

재료 : 레드향 1개, 아보카도 1개, 토마토 1개, 샐러드 채소 30g

10 |

드레싱 : 올리브유 1큰술, 레몬즙 2큰술, 꿀 1큰술, 소금 약간

11 |

재료 준비

12 |
    13 |
  1. 샐러드 채소를 씻고 물기를 제거한 후 준비합니다.
    2. 14 |
  2. 레드향과 아보카도, 토마토를 먹기 좋은 크기를 썰어둡니다.
    3. 15 |
16 |

드레싱 준비

17 |
    18 |
  1. 드레싱 재료를 믹서에 갈아줍니다.
    2. 19 |
20 |

샐러드 완성

21 |
    22 |
  1. 볼에 샐러드 채소와 썰어 둔 레드향, 아보카도, 토마토를 넣고 드레싱을 뿌리면 끝!
    2. 23 |
24 | 25 | -------------------------------------------------------------------------------- /04/obj.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 멀티미디어 파일 삽입하기 6 | 7 | 8 |

웹 문서에 PDF 파일 삽입하기

9 | 10 | 11 | -------------------------------------------------------------------------------- /04/p.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 상품 소개 페이지 6 | 7 | 8 |

레드향

9 |

껍질에 붉은 빛이 돌아 레드향이라 불린다.

10 |

레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.

11 |

비타민 C와 비타민 P가 풍부해 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.

12 |

레드향 샐러드 레시피

13 |

상품 구성

14 | 15 | -------------------------------------------------------------------------------- /04/poster-list-result.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 탐라국 입춘굿 6 | 7 | 8 | 9 |
10 |

탐라국 입춘굿

11 |

탐라국 입춘굿놀이는 전국적으로 유일하게 입춘날 벌어지는 축제이자 제주도의 문화축제 중에서 유일하게 전통시대부터 존재했던 축제이다.

12 |

제주에서 입춘은 새철 드는 날.
13 | 신구간이 끝나 하늘의 1만8000신이 지상으로 내려와 새해 일들을 시작하는 때다.

14 |

일정

15 | 22 |

먹거리

23 |
24 | 25 | -------------------------------------------------------------------------------- /04/poster-list.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 탐라국 입춘굿 6 | 7 | 8 | 9 |
10 |

탐라국 입춘굿

11 |

탐라국 입춘굿놀이는 전국적으로 유일하게 입춘날 벌어지는 축제이자 제주도의 문화축제 중에서 유일하게 전통시대부터 존재했던 축제이다.

12 |

제주에서 입춘은 새철 드는 날.
13 | 신구간이 끝나 하늘의 1만8000신이 지상으로 내려와 새해 일들을 시작하는 때다. 14 |

15 |

자세한 정보 보기

16 |

일정

17 | 18 |

먹거리

19 |
20 | 21 | -------------------------------------------------------------------------------- /04/poster-table.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 탐라국 입춘굿 6 | 7 | 8 | 9 |
10 |

탐라국 입춘굿

11 |

탐라국 입춘굿놀이는 전국적으로 유일하게 입춘날 벌어지는 축제이자 제주도의 문화축제 중에서 유일하게 전통시대부터 존재했던 축제이다.

12 |

제주에서 입춘은 새철 드는 날.
13 | 신구간이 끝나 하늘의 1만8000신이 지상으로 내려와 새해 일들을 시작하는 때다. 14 |

15 |

자세한 정보 보기

16 |

일정

17 | 24 |

먹거리

25 |
26 | 27 | -------------------------------------------------------------------------------- /04/poster-text-result.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 탐라국 입춘굿 6 | 7 | 8 | 9 |
10 |

탐라국 입춘굿

11 |

탐라국 입춘굿놀이는 전국적으로 유일하게 입춘날 벌어지는 축제이자 제주도의 문화축제 중에서 유일하게 전통시대부터 존재했던 축제이다.

12 |

제주에서 입춘은 새철 드는 날.
13 | 신구간이 끝나 하늘의 1만8000신이 지상으로 내려와 새해 일들을 시작하는 때다. 14 |

15 |

자세한 정보 보기

16 |

일정

17 | 18 |

먹거리

19 |
20 | 21 | -------------------------------------------------------------------------------- /04/poster.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 탐라국 입춘굿 6 | 7 | 8 | 9 |
10 | 11 |
12 | 13 | -------------------------------------------------------------------------------- /04/product.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/04/product.pdf -------------------------------------------------------------------------------- /04/quiz-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 연습문제 1 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /04/quiz-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 연습문제 2 6 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /04/sol-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 연습문제 1 6 | 7 | 8 |

수습 국원 모집

9 |

방송에 관심 있는 새내기 여러분 환영합니다

10 |

교내 방송국에서 신입생을 대상으로 수습 국원을 모집합니다. 학부나 전공에 상관없습니다.
11 | 평소 방송에 관심있었던 여러 학우들의 지원바랍니다.

12 | 18 |

혜택

19 |
    20 |
  1. 수습기자 활동 중 소정의 활동비 지급
    2. 21 |
  2. 정기자로 진급하면 장학금 지급
    3. 22 |
23 | 24 | 25 | -------------------------------------------------------------------------------- /04/sol-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 연습문제 2 6 | 17 | 18 | 19 |

수습 국원 지원 양식

20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 |
개인정보이름
학과/학번
연락처
지원 분야
39 | 40 | -------------------------------------------------------------------------------- /04/strong.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 상품 소개 페이지 6 | 7 | 8 |

레드향

9 |

껍질에 붉은 빛이 돌아 레드향이라 불린다.

10 |

레드향은 한라봉과 귤을 교배한 것으로
일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.

11 |

비타민 C와 비타민 P가 풍부해
혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.

12 |

레드향 샐러드 레시피

13 |

상품 구성

14 | 15 | -------------------------------------------------------------------------------- /04/strong_b.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 상품 소개 페이지 6 | 7 | 8 |

레드향

9 |

껍질에 붉은 빛이 돌아 레드향이라 불린다.

10 |

레드향은 한라봉과 귤을 교배한 것으로
일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.

11 |

비타민 C와 비타민 P가 풍부해
혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.

12 |

레드향 샐러드 레시피

13 |

상품 구성

14 | 15 | -------------------------------------------------------------------------------- /04/sub_sub_ins_del.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 상품 소개 페이지 6 | 7 | 8 |

레드향

9 |

껍질에 붉은 빛이 돌아 레드향이라 불린다.

10 |

레드향은 한라봉과 귤을 교배한 것으로
일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.

11 |

비타민 C와 비타민 P가 풍부해
혈액순환1, 또는감기예방2 등에 좋은 것으로 알려져 있다.

12 |

레드향 샐러드 레시피

13 |

상품 구성

14 | 15 | -------------------------------------------------------------------------------- /04/text.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 상품 소개 페이지 6 | 7 | 8 |

레드향

9 |

껍질에 붉은 빛이 돌아 레드향이라 불린다.

10 |

레드향은 한라봉과 귤을 교배한 것으로
알맹이가 굵고 통통해 식감이 좋으며
비타민 C와 비타민 P가 풍부해
혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.

11 |
12 |

레드향 샐러드 레시피

13 |

재료 : 레드향 1개, 아보카도 1개, 토마토 1개, 샐러드 채소 30g

14 |

드레싱 : 올리브유 1큰술, 레몬즙 2큰술, 꿀 1큰술, 소금 약간

15 | 16 |
17 |

상품 구성

18 | 19 | 20 | -------------------------------------------------------------------------------- /04/u-list.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 상품 소개 페이지 6 | 7 | 8 |

레드향 샐러드 레시피

9 |

재료 : 레드향 1개, 아보카도 1개, 토마토 1개, 샐러드 채소 30g

10 |

드레싱 : 올리브유 1큰술, 레몬즙 2큰술, 꿀 1큰술, 소금 약간

11 | 17 | 18 | -------------------------------------------------------------------------------- /05/button-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 웹 폼 6 | 7 | 8 |
9 | 10 |
11 | 12 | -------------------------------------------------------------------------------- /05/css/notice.css: -------------------------------------------------------------------------------- 1 | * { /* 전체 선택자 */ 2 | box-sizing: border-box; 3 | } 4 | body{ /* 문서 본문에 대한 스타일 */ 5 | display:flex; /* 플렉스 컨테이너 */ 6 | justify-content: center; /* 주축(수평) 정렬 */ 7 | align-items: center; /* 교차축(수직) 정렬 */ 8 | margin:0; /* 마진 */ 9 | min-height: 100vh; /* 최소 높이 */ 10 | } 11 | #container{ /* 컨테이너 스타일 */ 12 | width:250px; /* 너비 */ 13 | height:375px; /* 높이 */ 14 | padding:100px 50px; /* 패딩 */ 15 | border:1px solid black; /* 테두리 */ 16 | background:url('../images/notice.jpg') no-repeat left top; /* 배경 이미지 */ 17 | background-size:auto; /* 배경 이미지 크기 */ 18 | } -------------------------------------------------------------------------------- /05/css/register.css: -------------------------------------------------------------------------------- 1 | #container { 2 | width:600px; 3 | margin:10px auto; 4 | } 5 | fieldset { 6 | margin-bottom: 20px; 7 | } 8 | ul { 9 | list-style: none; 10 | padding-left: 0; 11 | } 12 | ul li { 13 | margin:10px; 14 | } 15 | 16 | /* label 텍스트 스타일 */ 17 | li label { 18 | width:120px; 19 | line-height: 36px; 20 | float:left; 21 | font-weight:bold; 22 | } 23 | 24 | /* 텍스트 필드 스타일 */ 25 | input[type="text"], input[type="password"], input[type="email"] { 26 | width:300px; 27 | height:30px; 28 | } 29 | 30 | /* 버튼 스타일 */ 31 | #buttons { 32 | width:400px; 33 | margin:20px auto; 34 | text-align: center; 35 | } 36 | #buttons input { 37 | width:150px; 38 | height:50px; 39 | font-size:20px; 40 | } 41 | #buttons input:hover { 42 | background-color:rgb(27, 134, 221); 43 | color:#fff; 44 | border-color:#fff; 45 | } 46 | 47 | /* 드롭다운 메뉴 스타일 */ 48 | select { 49 | width:100px; 50 | height:30px; 51 | } 52 | -------------------------------------------------------------------------------- /05/datetime.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 날짜와 시간 7 | 8 | 9 |
10 |

날짜 지정하기

11 | 12 | 13 | 14 |
15 |

시간 지정하기

16 | 17 | 18 |
19 |

범위 제한하기

20 | 21 | 22 |
23 | 24 | 25 | -------------------------------------------------------------------------------- /05/fieldset.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 레드향 주문하기 6 | 7 | 8 |

레드향 주문하기

9 |
10 |
11 | 상품 선택 12 | 13 |
14 |
15 | 배송 정보 16 | 17 |
18 |
19 | 20 | -------------------------------------------------------------------------------- /05/file.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 레드향 주문하기 6 | 7 | 8 | 9 |

레드향 주문하기

10 |
11 |
12 | 반품 정보 13 |

만일 수령한 상품에 문제가 있다면 즉시 반품 신청해 주세요.

14 |

반품 신청시 상품의 상태를 사진으로 첨부해 주세요.

15 |
16 | 17 |
18 |
19 | 20 | 21 |
22 |
23 | 24 | -------------------------------------------------------------------------------- /05/hidden.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 로그인 6 | 7 | 8 |
9 |
10 | 11 | 12 | 13 | 14 |
15 |
16 | 17 | -------------------------------------------------------------------------------- /05/images/login.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/05/images/login.png -------------------------------------------------------------------------------- /05/images/notice.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/05/images/notice.jpg -------------------------------------------------------------------------------- /05/label.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | label 태그 사용하기 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 |
14 | 15 | -------------------------------------------------------------------------------- /05/login-image.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 로그인 6 | 12 | 13 | 14 |
15 |
16 | 17 | 18 | 19 |
20 |
21 | 22 | -------------------------------------------------------------------------------- /05/login.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 로그인 6 | 7 | 8 |
9 |
10 | 11 | 12 | 13 |
14 |
15 | 16 | -------------------------------------------------------------------------------- /05/multi-data.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 레드향 주문하기 6 | 11 | 12 | 13 |

여러 데이터 나열하기

14 |
15 | 16 | 17 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 |
32 | 33 | -------------------------------------------------------------------------------- /05/notice.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 공지사항 6 | 7 | 8 | 9 |
10 |

공지사항

11 |

텍스트 1

12 |

텍스트 2

13 |
14 | 15 | -------------------------------------------------------------------------------- /05/quiz-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 연습문제 1 6 | 18 | 19 | 20 |

예약 정보

21 | /* 05\sol-1.html 소스를 참고하세요. */ 22 | 23 | -------------------------------------------------------------------------------- /05/quiz-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 연습문제 2 6 | 18 | 19 | 20 |
21 |

프런트엔드 개발자 지원서

22 |

HTML, CSS, Javascript에 대한 기술적 이해와 경험이 있는 분을 찾습니다.

23 |
24 |
25 | 26 |
27 |
28 | 29 | -------------------------------------------------------------------------------- /05/register-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 회원 가입 6 | 12 | 13 | 14 |
15 |

회원 가입을 환영합니다

16 | 17 |
18 | 19 | -------------------------------------------------------------------------------- /05/sol-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 연습문제 1 6 | 14 | 15 | 16 |

예약 정보

17 |
18 | 34 |
35 | 36 | -------------------------------------------------------------------------------- /05/t-field.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 레드향 주문하기 6 | 7 | 8 |

레드향 주문하기

9 |
10 |
11 | 상품 선택 12 | 13 |
14 |
15 | 배송 정보 16 | 34 |
35 |
36 | 37 | -------------------------------------------------------------------------------- /06/06_exam.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/06/06_exam.zip -------------------------------------------------------------------------------- /06/basic-style.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 상품 소개 페이지 6 | 22 | 23 | 24 |
25 |

레드향

26 |

껍질에 붉은 빛이 돌아 레드향이라 불린다.

27 |

레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.

28 |

비타민 C와 비타민 P가 풍부해 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.

29 |
30 | 31 | -------------------------------------------------------------------------------- /06/cascading.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 상품 소개 페이지 6 | 17 | 18 | 19 |

레드향

20 |

껍질에 붉은 빛이 돌아 레드향이라 불린다.

21 |

레드향은 한라봉과 귤을 교배한 것으로

22 |

일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.

23 | 24 | -------------------------------------------------------------------------------- /06/class.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 상품 소개 페이지 6 | 18 | 19 | 20 |
21 |

레드향

22 |

껍질에 붉은 빛이 돌아 레드향이라 불린다.

23 |

레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.

24 |

비타민 C와 비타민 P가 풍부해 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.

25 |
26 | 27 | -------------------------------------------------------------------------------- /06/css/mystyle-result.css: -------------------------------------------------------------------------------- 1 | h1 { 2 | display: inline-block; 3 | font-size:1.4em; 4 | background-color:#222; 5 | color:#fff; 6 | padding:10px; 7 | } 8 | ul { 9 | list-style:none; 10 | } 11 | li { 12 | font-size:1.2em; 13 | line-height:1.5; 14 | color:blue; 15 | } -------------------------------------------------------------------------------- /06/css/register.css: -------------------------------------------------------------------------------- 1 | 2 | fieldset { 3 | margin-bottom: 20px; 4 | } 5 | ul { 6 | list-style: none; 7 | padding-left: 0; 8 | } 9 | ul li { 10 | margin:10px; 11 | } 12 | 13 | /* label 텍스트 스타일 */ 14 | li label { 15 | width:120px; 16 | line-height: 36px; 17 | float:left; 18 | font-weight:bold; 19 | } 20 | 21 | /* 텍스트 필드 스타일 */ 22 | input[type="text"], input[type="password"], input[type="email"] { 23 | width:300px; 24 | height:30px; 25 | } 26 | 27 | /* 버튼 스타일 */ 28 | #buttons { 29 | width:400px; 30 | margin:20px auto; 31 | text-align: center; 32 | } 33 | #buttons input { 34 | width:150px; 35 | height:50px; 36 | font-size:20px; 37 | } 38 | #buttons input:hover { 39 | background-color:rgb(27, 134, 221); 40 | color:#fff; 41 | border-color:#fff; 42 | } 43 | 44 | /* 드롭다운 메뉴 스타일 */ 45 | select { 46 | width:100px; 47 | height:30px; 48 | } 49 | -------------------------------------------------------------------------------- /06/css/style.css: -------------------------------------------------------------------------------- 1 | h1 { 2 | padding:10px; 3 | background-color:#222; 4 | color:#fff; 5 | } -------------------------------------------------------------------------------- /06/group.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 상품 소개 페이지 6 | 19 | 20 | 21 |
22 |

레드향

23 |

껍질에 붉은 빛이 돌아 레드향이라 불린다.

24 |

레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.

25 |

비타민 C와 비타민 P가 풍부해 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.

26 |
27 | 28 | -------------------------------------------------------------------------------- /06/id.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 상품 소개 페이지 6 | 14 | 15 | 16 |
17 |

레드향

18 |

껍질에 붉은 빛이 돌아 레드향이라 불린다.

19 |

레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.

20 |

비타민 C와 비타민 P가 풍부해 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.

21 |
22 | 23 | -------------------------------------------------------------------------------- /06/images/cat.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/06/images/cat.jpg -------------------------------------------------------------------------------- /06/inline.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 상품 소개 페이지 6 | 7 | 8 |

레드향

9 |

껍질에 붉은 빛이 돌아 레드향이라 불린다.

10 |

레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.

11 |

비타민 C와 비타민 P가 풍부해 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.

12 | 13 | -------------------------------------------------------------------------------- /06/no-style.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 상품 소개 페이지 6 | 7 | 8 |

레드향

9 |

껍질에 붉은 빛이 돌아 레드향이라 불린다.

10 |

레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.

11 |

비타민 C와 비타민 P가 풍부해 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.

12 | 13 | -------------------------------------------------------------------------------- /06/quiz-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 상품 소개 페이지 6 | 23 | 24 | 25 |

웹 기술 - 기본

26 | 31 | 32 | -------------------------------------------------------------------------------- /06/quiz-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 탐라국 입춘굿 6 | 11 | 12 | 13 |
14 |

탐라국 입춘굿

15 |

제주도의 문화축제 중에서 유일하게 전통시대부터 존재했던 축제이다.

16 |

제주에서 입춘은 새철(제주어, 샛절) 드는 날.
17 | 하늘의 1만8000신이 지상으로 내려와 새해 일들을 시작하는 때다. 18 |

19 |
20 | 21 | -------------------------------------------------------------------------------- /06/sol-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 상품 소개 페이지 6 | 7 | 8 | 9 |

웹 기술 - 기본

10 | 15 | 16 | -------------------------------------------------------------------------------- /06/sol-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 탐라국 입춘굿 6 | 21 | 22 | 23 |
24 |

탐라국 입춘굿

25 |

제주도의 문화축제 중에서 유일하게 탐라 시대부터 내려온 축제이다.

26 |

제주에서 입춘은 새철(제주어, 샛절) 드는 날이라 한다.
27 | 하늘의 1만8000신이 지상으로 내려와 새해 일들을 시작하는 때다. 28 |

29 |
30 | 31 | -------------------------------------------------------------------------------- /06/stylesheet-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 상품 소개 페이지 6 | 13 | 14 | 15 |

레드향

16 |

껍질에 붉은 빛이 돌아 레드향이라 불린다.

17 |

레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.

18 |

비타민 C와 비타민 P가 풍부해 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.

19 | 20 | -------------------------------------------------------------------------------- /06/stylesheet-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 상품 소개 페이지 6 | 7 | 8 | 9 |

레드향

10 |

껍질에 붉은 빛이 돌아 레드향이라 불린다.

11 |

레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.

12 |

비타민 C와 비타민 P가 풍부해 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.

13 | 14 | -------------------------------------------------------------------------------- /06/type.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 상품 소개 페이지 6 | 11 | 12 | 13 |
14 |

레드향

15 |

껍질에 붉은 빛이 돌아 레드향이라 불린다.

16 |

레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.

17 |

비타민 C와 비타민 P가 풍부해 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.

18 |
19 | 20 | -------------------------------------------------------------------------------- /06/universe.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 상품 소개 페이지 6 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /07/color.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 상품 소개 페이지 6 | 18 | 19 | 20 |

레드향

21 |

껍질에 붉은 빛이 돌아 레드향이라 불린다.

22 |

레드향은 한라봉과 귤을 교배한 것으로

23 |

일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.

24 | 25 | -------------------------------------------------------------------------------- /07/css/basic.css: -------------------------------------------------------------------------------- 1 | #container { 2 | width:600px; 3 | margin:0 auto; 4 | } 5 | table, th, td { 6 | border:1px solid #222; 7 | border-collapse: collapse; 8 | } 9 | th, td { 10 | padding:10px; 11 | } -------------------------------------------------------------------------------- /07/fonts/ostrich-sans-bold.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/07/fonts/ostrich-sans-bold.eot -------------------------------------------------------------------------------- /07/fonts/ostrich-sans-bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/07/fonts/ostrich-sans-bold.ttf -------------------------------------------------------------------------------- /07/fonts/ostrich-sans-bold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/07/fonts/ostrich-sans-bold.woff -------------------------------------------------------------------------------- /07/gfont-result.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 구글 폰트 사용하기 6 | 15 | 16 | 17 |

HTML+CSS+JavaScript

18 | 19 | 20 | -------------------------------------------------------------------------------- /07/gfont.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 구글 폰트 사용하기 6 | 12 | 13 | 14 |

HTML+CSS+JavaScript

15 | 16 | 17 | -------------------------------------------------------------------------------- /07/images/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/07/images/bg.jpg -------------------------------------------------------------------------------- /07/images/dot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/07/images/dot.png -------------------------------------------------------------------------------- /07/images/top.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/07/images/top.jpg -------------------------------------------------------------------------------- /07/line-height-col-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 상품 소개 페이지 6 | 19 | 20 | 21 |

HTML

22 | 23 | -------------------------------------------------------------------------------- /07/line-height-col-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 상품 소개 페이지 6 | 20 | 21 | 22 |

HTML

23 | 24 | -------------------------------------------------------------------------------- /07/line-height.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | line-height 6 | 20 | 21 | 22 |

껍질에 붉은 빛이 돌아 레드향(감평甘平)이라 불린다. 레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.

23 |

껍질에 붉은 빛이 돌아 레드향(감평甘平)이라 불린다. 레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.

24 |

껍질에 붉은 빛이 돌아 레드향(감평甘平)이라 불린다. 레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.

25 | 26 | -------------------------------------------------------------------------------- /07/link-2.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 텍스트 링크 6 | 20 | 21 | 22 |

이지스퍼블리싱

23 | 30 | 31 | -------------------------------------------------------------------------------- /07/list-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 불릿과 번호 바꾸기 6 | 14 | 15 | 16 |

도서 시리즈

17 | 22 | 23 |
    24 |
  1. Do it! 시리즈
    2. 25 |
  2. 된다 시리즈
    3. 26 |
  3. DCM 프로 사진가
    4. 27 |
28 | 29 | 30 | -------------------------------------------------------------------------------- /07/list-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 불릿 이미지 사용하기 6 | 11 | 12 | 13 |

도서 시리즈

14 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /07/list-3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 불릿 이미지 사용하기 6 | 11 | 12 | 13 |

도서 시리즈

14 | 19 | 20 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /07/list-navi-result.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 목록을 사용해 세로 메뉴 만들기 6 | 23 | 24 | 25 |

이지스퍼블리싱

26 | 34 | 35 | -------------------------------------------------------------------------------- /07/list-navi.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 목록을 사용해 세로 메뉴 만들기 6 | 11 | 12 | 13 |

이지스퍼블리싱

14 | 22 | 23 | -------------------------------------------------------------------------------- /07/quiz-1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 연습문제 1 6 | 17 | 18 | 19 |
20 |

최신 웹 디자인 트렌드

21 | 29 |
30 | 31 | -------------------------------------------------------------------------------- /07/quiz-2.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 연습문제 2 6 | 18 | 19 | 20 |
21 |

웹 개발 기초

22 |
23 | 24 | -------------------------------------------------------------------------------- /07/quiz-3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 연습문제 3 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 |
2019 국민 독서실태
구분성인독서자
종이책6.1권11.8권
전자책1.2권7.1권
오디오북0.2권5.5권
35 | 36 | 37 | -------------------------------------------------------------------------------- /07/rgba.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 상품 소개 페이지 6 | 23 | 24 | 25 |

HTML

26 |

CSS

27 | 28 | -------------------------------------------------------------------------------- /07/sol-2.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 연습문제 2 6 | 20 | 21 | 22 |
23 |

웹 개발 기초

24 |
25 | 26 | -------------------------------------------------------------------------------- /07/spacing.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 텍스트 스타일 6 | 19 | 20 | 21 |

CSS

22 |

CSS

23 |

CSS

24 | 25 | 26 | -------------------------------------------------------------------------------- /07/text-align.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | text-align 6 | 20 | 21 | 22 |

껍질에 붉은 빛이 돌아 레드향이라 불린다. 레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.

23 |

껍질에 붉은 빛이 돌아 레드향이라 불린다. 레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.

24 |

껍질에 붉은 빛이 돌아 레드향이라 불린다. 레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.

25 | 26 | 27 | -------------------------------------------------------------------------------- /07/text-decoration.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | text-decoration 6 | 7 | 8 |

text-decoration 속성

9 |

none

10 |

underline

11 |

overline

12 |

line through

13 | 14 | -------------------------------------------------------------------------------- /07/text-shadow.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | text-shadow 6 | 22 | 23 | 24 |

HTML

25 |

CSS

26 |

자바스크립트

27 | 28 | -------------------------------------------------------------------------------- /07/text-transform.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | text-transform 6 | 17 | 18 | 19 |

html

20 |

css

21 |

javascript

22 | 23 | -------------------------------------------------------------------------------- /07/tstyle-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 상품 소개 페이지 6 | 22 | 23 | 24 |

레드향

25 |

껍질에 붉은 빛이 돌아 레드향이라 불린다.

26 |

레드향은 한라봉과 귤을 교배한 것으로

27 |

일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.

28 | 29 | -------------------------------------------------------------------------------- /07/webfont.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 웹 폰트 사용하기 7 | 22 | 23 | 24 |

Using Default Fonts

25 |

Using Web Fonts

26 | 27 | -------------------------------------------------------------------------------- /08/2column-result.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CSS 레이아웃 - 2단 레이아웃 6 | 7 | 8 | 9 |
10 | 13 | 16 |
17 |

본문

18 |
19 |
23 | 24 | 25 | -------------------------------------------------------------------------------- /08/2column.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CSS 레이아웃 - 2단 레이아웃 6 | 7 | 8 | 9 |
10 | 13 | 16 |
17 |

본문

18 |
19 |
23 | 24 | 25 | -------------------------------------------------------------------------------- /08/3column-result.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | CSS 레이아웃 - 3단 레이아웃 5 | 6 | 7 | 8 | 9 |
10 | 13 | 16 |
17 |

본문

18 |
19 | 22 |
26 | 27 | -------------------------------------------------------------------------------- /08/3column.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | CSS 레이아웃 - 3단 레이아웃 5 | 6 | 7 | 8 | 9 |
10 | 13 | 16 |
17 |

본문

18 |
19 | 22 |
26 | 27 | -------------------------------------------------------------------------------- /08/block.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 블록 레벨과 인라인 레벨 6 | 15 | 16 | 17 |

시간이란...

18 |
내일 죽을 것처럼

오늘

을 살고
19 |

영원히 살 것처럼
내일을 꿈꾸어라.

20 | 21 | -------------------------------------------------------------------------------- /08/border-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 박스모델 6 | 21 | 22 | 23 |
실선 테두리
24 |
점선 테두리
25 |
점선 테두리
26 | 27 | 28 | -------------------------------------------------------------------------------- /08/border-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 박스모델 6 | 27 | 28 | 29 |
30 |
31 |
32 |
33 | 34 | 35 | -------------------------------------------------------------------------------- /08/border-3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 박스모델 6 | 21 | 22 | 23 |
24 |
25 | 26 | 27 | -------------------------------------------------------------------------------- /08/border-4.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 박스모델 6 | 16 | 17 | 18 |

박스 모델

19 |

박스 모델은 실제 콘텐츠 영역, 박스와 콘텐츠 영역 사이의 여백인 패딩(padding), 박스의 테두리(border), 그리고 여러 박스 모델 간의 여백인 마진(margin) 등의 요소로 구성되어 있습니다.

20 | 21 | 22 | -------------------------------------------------------------------------------- /08/border-5.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 박스모델 6 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /08/border-6.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 박스모델 6 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /08/border-7.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 박스모델 6 | 17 | 18 | 19 |
20 | 21 | 22 | -------------------------------------------------------------------------------- /08/box-shadow.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 박스모델 6 | 18 | 19 | 20 |
21 |
22 | 23 | 24 | -------------------------------------------------------------------------------- /08/box-sizing.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 박스모델 6 | 24 | 25 | 26 |
27 |
28 | 29 | 30 | -------------------------------------------------------------------------------- /08/box-width.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 박스모델 6 | 20 | 21 | 22 |
23 |
24 | 25 | 26 | -------------------------------------------------------------------------------- /08/boxmodel-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CSS 박스 모델 - 레이아웃 만들기 6 | 7 | 8 | 9 |
10 |
11 | 12 | 13 |
14 |
15 | 16 |
17 |
18 | 19 |
20 | 23 |
24 | 25 | -------------------------------------------------------------------------------- /08/boxmodel-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CSS 박스 모델 - 레이아웃 만들기 6 | 7 | 8 | 9 |
10 |
11 | 12 | 13 |
14 |
15 | 16 |
17 |
18 | 19 |
20 | 23 |
24 | 25 | -------------------------------------------------------------------------------- /08/boxmodel.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CSS 박스 모델 - 레이아웃 만들기 6 | 7 | 8 | 9 |
10 |
11 | 12 | 13 |
14 |
15 | 16 |
17 |
18 | 19 |
20 | 23 |
24 | 25 | -------------------------------------------------------------------------------- /08/css/2column-result.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin:0; /* 브라우저 기본 마진 리셋 */ 3 | padding:0; /* 브라우저 기본 패딩 리셋 */ 4 | box-sizing: border-box; /* 테두리까지 포함해서 박스 모델 너비로 계산 */ 5 | } 6 | #container { 7 | width:1200px; /* 내용 전체의 너비 */ 8 | margin:20px auto; /* 내용을 화면 가운데 배치하도록 좌우 마진을 auto로 */ 9 | } 10 | #header{ 11 | width:100%; /* 부모 요소의 너비와 똑같게 */ 12 | height:120px; /* 헤더의 높이 */ 13 | background-color:#acacac; 14 | } 15 | #sidebar{ 16 | width:300px; /* 사이드바의 너비 */ 17 | height:600px; /* 사이드바의 높이 */ 18 | background-color:#e9e9e9; 19 | float:left; /* 왼쪽으로 플로팅 */ 20 | } 21 | #contents { 22 | width:900px; /* 본문의 너비 */ 23 | height:600px; /* 본문의 높이 */ 24 | background-color:#f7f7f7; 25 | float:left; /* 왼쪽으로 플로팅 */ 26 | } 27 | #footer { 28 | width:100%; /* 부모 요소의 너비와 똑같게 */ 29 | height:100px; /* 푸터의 높이 */ 30 | background-color:#888888; 31 | clear:left; /* 플로팅 해제 */ 32 | } -------------------------------------------------------------------------------- /08/css/2column.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin:0; 3 | padding:0; 4 | box-sizing: border-box; 5 | } -------------------------------------------------------------------------------- /08/css/3column.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin:0; 3 | padding:0; 4 | box-sizing: border-box; 5 | } -------------------------------------------------------------------------------- /08/css/position-2.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | margin:0; 4 | padding:0; 5 | } 6 | #contents { 7 | background:url("../images/bg.jpg") no-repeat; 8 | background-size:cover; 9 | width:800px; 10 | height:500px; 11 | margin:0 auto; 12 | } 13 | h1 { 14 | color:#fff; 15 | font-size:120px; 16 | text-shadow: 2px 3px 0 #000; 17 | } -------------------------------------------------------------------------------- /08/css/position-3.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | margin:0; 4 | padding:0; 5 | } 6 | #contents { 7 | background:url("../images/bg.jpg") no-repeat; 8 | background-size:cover; 9 | width:800px; 10 | height:500px; 11 | margin:0 auto; 12 | position:relative; 13 | } 14 | h1 { 15 | color:#fff; 16 | font-size:120px; 17 | text-shadow: 2px 3px 0 #000; 18 | position:absolute; 19 | right:100px; 20 | bottom:100px; 21 | } -------------------------------------------------------------------------------- /08/css/product-result.css: -------------------------------------------------------------------------------- 1 | table, th, td { 2 | border:1px solid #ccc; 3 | border-collapse: collapse; 4 | } 5 | th, td { 6 | padding:10px 20px; 7 | } 8 | #container { 9 | width:600px; /* 컨테이너의 너비 */ 10 | border:none; /* 테두리 없앰 */ 11 | margin:0 auto; /* 화면 중앙에 배치 */ 12 | } 13 | div { 14 | border:1px dotted #222; /* 테두리 */ 15 | padding:20px; /* 패딩 */ 16 | margin:20px; /* 마진 */ 17 | } 18 | #description { 19 | border-top-left-radius:30px; /* 왼쪽 위 모서리 라운딩 */ 20 | border-top-right-radius:30px; /* 오른쪽 위 모서리 라운딩 */ 21 | } 22 | #package { 23 | border-bottom-left-radius:30px; /* 왼쪽 아래 모서리 라운딩 */ 24 | border-bottom-right-radius:30px; /* 오른쪽 아래 모서리 라운딩 */ 25 | } -------------------------------------------------------------------------------- /08/css/product-tmp.css: -------------------------------------------------------------------------------- 1 | table, th, td { 2 | border:1px solid #ccc; 3 | border-collapse: collapse; 4 | } 5 | th, td { 6 | padding:10px 20px; 7 | } 8 | div { 9 | border:1px solid #222; /* 테두리 */ 10 | } 11 | #container { 12 | width:600px; /* 컨테이너의 너비 */ 13 | border:none; /* 테두리 없앰 */ 14 | } -------------------------------------------------------------------------------- /08/css/product.css: -------------------------------------------------------------------------------- 1 | table, th, td { 2 | border:1px solid #ccc; 3 | border-collapse: collapse; 4 | } 5 | th, td { 6 | padding:10px 20px; 7 | } -------------------------------------------------------------------------------- /08/css/style-1.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | /* 컨테이너 - 내용 전체를 묶음 */ 6 | #container { 7 | width:1200px; 8 | } 9 | 10 | /* 헤더 - 로고와 메뉴 포함 */ 11 | header { 12 | width:100%; 13 | height:80px; 14 | border:1px solid #000; 15 | } 16 | /* 내용 1 - 이미지 */ 17 | #content1 { 18 | width:100%; 19 | height:600px; 20 | border:1px solid #000; 21 | } 22 | 23 | /* 내용 2 - 이미지와 텍스트 3개 */ 24 | #content2 { 25 | width: 100%; 26 | height:300px; 27 | border:1px solid #000; 28 | } 29 | 30 | /* 푸터 - SNS 링크 포함 */ 31 | footer { 32 | width:100%; 33 | height:60px; 34 | border:1px solid #000; 35 | } -------------------------------------------------------------------------------- /08/css/style-2.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | margin:0; 4 | padding:0; 5 | } 6 | 7 | /* 컨테이너 - 내용 전체를 묶음 */ 8 | #container { 9 | width:1200px; 10 | margin:0 auto; 11 | } 12 | 13 | /* 헤더 - 로고와 메뉴 포함 */ 14 | header { 15 | width:100%; 16 | height:80px; 17 | border:1px solid #000; 18 | margin-bottom: 20px; 19 | } 20 | /* 내용 1 - 이미지 */ 21 | #content1 { 22 | width:100%; 23 | height:600px; 24 | border:1px solid #000; 25 | } 26 | 27 | /* 내용 2 - 이미지와 텍스트 3개 */ 28 | #content2 { 29 | width: 100%; 30 | height:300px; 31 | border:1px solid #000; 32 | } 33 | 34 | /* 푸터 - SNS 링크 포함 */ 35 | footer { 36 | width:100%; 37 | height:60px; 38 | border:1px solid #000; 39 | margin-top:20px; 40 | } -------------------------------------------------------------------------------- /08/css/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/08/css/style.css -------------------------------------------------------------------------------- /08/display.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CSS display 속성 6 | 20 | 21 | 22 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /08/float-3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 박스모델 6 | 27 | 28 | 29 |
박스1
30 |
박스2
31 |
박스3
32 |
박스4
33 | 34 | 35 | -------------------------------------------------------------------------------- /08/images/bear.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/08/images/bear.jpg -------------------------------------------------------------------------------- /08/images/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/08/images/bg.jpg -------------------------------------------------------------------------------- /08/images/cat.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/08/images/cat.jpg -------------------------------------------------------------------------------- /08/images/guitar-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/08/images/guitar-bg.jpg -------------------------------------------------------------------------------- /08/images/photo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/08/images/photo.jpg -------------------------------------------------------------------------------- /08/images/tangerines.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/08/images/tangerines.jpg -------------------------------------------------------------------------------- /08/images/tree.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/08/images/tree.png -------------------------------------------------------------------------------- /08/inline.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 블록 레벨과 인라인 레벨 6 | 15 | 16 | 17 |

시간이란...

18 |
내일 죽을 것처럼 오늘을 살고
19 |

영원히 살 것처럼
내일을 꿈꾸어라.

20 | 21 | -------------------------------------------------------------------------------- /08/margin-1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 박스모델 - 마진 6 | 29 | 30 | 31 |
32 |
33 |
34 |
35 |
36 | 37 | 38 | -------------------------------------------------------------------------------- /08/margin-overlap.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 박스모델 - 마진 중첩 6 | 25 | 26 | 27 |
28 |
29 |
30 | 31 | 32 | -------------------------------------------------------------------------------- /08/padding.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 박스 모델 - 패딩 6 | 21 | 22 | 23 |

레드향

24 |

레드향

25 |

레드향

26 |

레드향

27 | 28 | -------------------------------------------------------------------------------- /08/position-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CSS float 속성 6 | 7 | 8 | 9 |
10 |

CSS3

11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /08/position-3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CSS position 속성 6 | 7 | 8 | 9 |
10 |

CSS3

11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /08/quiz-1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 6 | 연습문제 1 7 | 13 | 14 | 15 |
16 | 곰인형 사진 17 |
18 | 19 | 20 | -------------------------------------------------------------------------------- /08/quiz-3.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 연습문제 3 6 | 16 | 17 | 18 | 26 | 27 | -------------------------------------------------------------------------------- /08/sol-1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 6 | 연습문제 1 7 | 18 | 19 | 20 |
21 | 곰인형 사진 22 |
23 | 24 | 25 | -------------------------------------------------------------------------------- /08/sol-3.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 연습문제 3 6 | 27 | 28 | 29 | 37 | 38 | -------------------------------------------------------------------------------- /09/background-result.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 배경 이미지 6 | 19 | 20 | 21 |

Do it!

22 | 23 | -------------------------------------------------------------------------------- /09/background.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 배경 이미지 6 | 13 | 14 | 15 |

Do it!

16 | 17 | -------------------------------------------------------------------------------- /09/bg-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 배경 이미지 6 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /09/bg-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 불릿 바꾸기 6 | 19 | 20 | 21 |

이지스퍼블리싱

22 | 29 | 30 | -------------------------------------------------------------------------------- /09/images/bg1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/09/images/bg1.jpg -------------------------------------------------------------------------------- /09/images/bg2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/09/images/bg2.png -------------------------------------------------------------------------------- /09/images/bg3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/09/images/bg3.png -------------------------------------------------------------------------------- /09/images/bg4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/09/images/bg4.jpg -------------------------------------------------------------------------------- /09/images/bg5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/09/images/bg5.jpg -------------------------------------------------------------------------------- /09/images/book-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/09/images/book-icon.png -------------------------------------------------------------------------------- /09/images/mic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/09/images/mic.png -------------------------------------------------------------------------------- /09/images/onair.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/09/images/onair.png -------------------------------------------------------------------------------- /09/linear-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 선형 그러데이션 6 | 17 | 18 | 19 |
20 | 21 | -------------------------------------------------------------------------------- /09/linear-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 선형 그러데이션 6 | 17 | 18 | 19 |
20 | 21 | -------------------------------------------------------------------------------- /09/linear-3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 선형 그러데이션 6 | 16 | 17 | 18 |
19 | 20 | -------------------------------------------------------------------------------- /09/pattern.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 원형 그러데이션 반복 6 | 23 | 24 | 25 |
26 |
27 | 28 | -------------------------------------------------------------------------------- /09/quiz-1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 연습문제 1 6 | 16 | 17 | 18 |

웹 디자인 트렌드를 따라잡는 비법 대공개!

19 |

그래픽 프로그램으로 웹 디자인 요소를 일일이 만들어 웹사이트를 제작하는 시대는 지났다. 이제 모바일, 태블릿, PC 등 멀티 디바이스에 한 번에 적용할 수 있는 웹 디자인 방법을 알아야 한다. 바로 코딩을 이용한 웹 디자인이다.

20 | 21 | -------------------------------------------------------------------------------- /09/quiz-2.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 연습문제 2 6 | 20 | 21 | 22 |
23 |

웹 디자인 트렌드를 따라잡는 비법 대공개!

24 |

그래픽 프로그램으로 웹 디자인 요소를 일일이 만들어 웹사이트를 제작하는 시대는 지났다. 이제 모바일, 태블릿, PC 등 멀티 디바이스에 한 번에 적용할 수 있는 웹 디자인 방법을 알아야 한다. 바로 코딩을 이용한 웹 디자인이다.

25 |
26 | 27 | -------------------------------------------------------------------------------- /09/radial-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 원형 그러데이션 6 | 25 | 26 | 27 |
28 |
29 | 30 | -------------------------------------------------------------------------------- /09/radial-3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 원형 그러데이션 6 | 18 | 19 | 20 |
21 | 22 | -------------------------------------------------------------------------------- /09/radial-4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 원형 그러데이션 6 | 21 | 22 | 23 |
24 |
25 | 26 | -------------------------------------------------------------------------------- /09/repeating.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 그러데이션 반복 6 | 23 | 24 | 25 |
26 |
27 | 28 | -------------------------------------------------------------------------------- /09/sol-1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 연습문제 1 6 | 21 | 22 | 23 |

웹 디자인 트렌드를 따라잡는 비법 대공개!

24 |

그래픽 프로그램으로 웹 디자인 요소를 일일이 만들어 웹사이트를 제작하는 시대는 지났다. 이제 모바일, 태블릿, PC 등 멀티 디바이스에 한 번에 적용할 수 있는 웹 디자인 방법을 알아야 한다. 바로 코딩을 이용한 웹 디자인이다.

25 | 26 | -------------------------------------------------------------------------------- /09/sol-2.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 연습문제 2 6 | 22 | 23 | 24 |
25 |

웹 디자인 트렌드를 따라잡는 비법 대공개!

26 |

그래픽 프로그램으로 웹 디자인 요소를 일일이 만들어 웹사이트를 제작하는 시대는 지났다. 이제 모바일, 태블릿, PC 등 멀티 디바이스에 한 번에 적용할 수 있는 웹 디자인 방법을 알아야 한다. 바로 코딩을 이용한 웹 디자인이다.

27 |
28 | 29 | -------------------------------------------------------------------------------- /10/adj.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 고급 선택자 6 | 26 | 27 | 28 |
29 |

예약 방법 & 이용 요금

30 |

아직 온라인 예약 신청이 준비되어 있지 않습니다.
전화(xxx-xxxx-xxxx)로 문의 바랍니다.

31 |

가족실(2~4인) : 60,000원/일

32 |

도미토리(4인 공용) : 25,000원/일

33 |
34 | 35 | 36 | -------------------------------------------------------------------------------- /10/attr-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 속성 선택자 6 | 27 | 28 | 29 | 30 | 37 | 38 | -------------------------------------------------------------------------------- /10/attr-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 속성 선택자 6 | 23 | 24 | 25 | 26 | 31 | 32 | -------------------------------------------------------------------------------- /10/attr-3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 속성 선택자 6 | 28 | 29 | 30 | 36 | 37 | -------------------------------------------------------------------------------- /10/attr-6.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 속성 선택자 6 | 26 | 27 | 28 | 29 |

회사 소개 파일 다운 받기

30 | 34 | 35 | -------------------------------------------------------------------------------- /10/attr-7.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 속성 선택자 6 | 23 | 24 | 25 | 26 |

HTML5 참고 사이트

27 |

(아래 링크 중 파란색 배경의 링크는 W3C 사이트로 연결됩니다.)

28 | 33 | 34 | -------------------------------------------------------------------------------- /10/child.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 고급 선택자 6 | 25 | 26 | 27 |
28 |

예약 방법 & 사용 요금

29 |

아직 온라인 예약 신청이 준비되어 있지 않습니다.
전화(xxx-xxxx-xxxx)로 문의 바랍니다.

30 |
31 |

가족실(2~4인) : 60,000원/일

32 |

도미토리(4인 공용) : 25,000원/일

33 |
34 | 35 | 36 | -------------------------------------------------------------------------------- /10/css/attr.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | body { 7 | background: #ccc; 8 | padding: 20px; 9 | } 10 | 11 | form { 12 | background:#fff; 13 | border:1px solid #222; 14 | border-radius: 5px; 15 | padding: 20px; 16 | width: 400px; 17 | margin:30px auto; 18 | } 19 | 20 | fieldset { 21 | border: 1px solid #ccc; 22 | margin-bottom: 30px; 23 | } 24 | 25 | legend { 26 | font-size: 16px; 27 | font-weight: bold; 28 | padding-left:5px; 29 | padding-bottom: 10px; 30 | } 31 | 32 | form ul li { 33 | line-height: 30px; 34 | list-style: none; 35 | padding: 5px 10px; 36 | margin-bottom: 2px; 37 | } 38 | 39 | form label { 40 | float: left; 41 | font-size: 13px; 42 | width: 110px; 43 | } 44 | 45 | form button { 46 | border: 1px solid #222; 47 | border-radius: 20px; 48 | display: block; 49 | font: 16px; 50 | letter-spacing: 1px; 51 | margin: auto; 52 | padding: 7px 25px; 53 | } 54 | -------------------------------------------------------------------------------- /10/css/register.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | body { 7 | background: #ccc; 8 | padding: 20px; 9 | } 10 | 11 | #signup { 12 | background:#fff; 13 | border:1px solid #222; 14 | border-radius: 5px; 15 | padding: 20px; 16 | width: 400px; 17 | margin:30px auto; 18 | } 19 | 20 | #signup fieldset { 21 | border: 1px solid #ccc; 22 | margin-bottom: 30px; 23 | } 24 | 25 | #signup legend { 26 | font-size: 16px; 27 | font-weight: bold; 28 | padding-left:5px; 29 | padding-bottom: 10px; 30 | } 31 | 32 | #signup ul li { 33 | line-height: 30px; 34 | list-style: none; 35 | padding: 5px 10px; 36 | margin-bottom: 2px; 37 | } 38 | 39 | #signup button { 40 | border: 1px solid #222; 41 | border-radius: 20px; 42 | display: block; 43 | font-size: 16px 맑은고딕,굴림,돋움; 44 | letter-spacing: 1px; 45 | margin: auto; 46 | padding: 7px 25px; 47 | } -------------------------------------------------------------------------------- /10/descendant.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 고급 선택자 6 | 25 | 26 | 27 |
28 |

예약 방법 & 사용 요금

29 |

아직 온라인 예약 신청이 준비되어 있지 않습니다.
전화(xxx-xxxx-xxxx)로 문의 바랍니다.

30 |
31 |

가족실(2~4인) : 60,000원/일

32 |

도미토리(4인 공용) : 25,000원/일

33 |
34 | 35 | 36 | -------------------------------------------------------------------------------- /10/images/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/10/images/1.jpg -------------------------------------------------------------------------------- /10/images/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/10/images/2.jpg -------------------------------------------------------------------------------- /10/images/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/10/images/3.jpg -------------------------------------------------------------------------------- /10/images/ch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/10/images/ch.png -------------------------------------------------------------------------------- /10/images/excel_icon.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/10/images/excel_icon.gif -------------------------------------------------------------------------------- /10/images/hwp_icon.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/10/images/hwp_icon.gif -------------------------------------------------------------------------------- /10/images/jp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/10/images/jp.png -------------------------------------------------------------------------------- /10/images/newwindow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/10/images/newwindow.png -------------------------------------------------------------------------------- /10/images/us.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/10/images/us.png -------------------------------------------------------------------------------- /10/ps-4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 가상 요소 6 | 24 | 25 | 26 | 27 |
28 |

제품 목록

29 | 35 |
36 | 37 | 38 | -------------------------------------------------------------------------------- /10/quiz-1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 연습문제 1 6 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /10/sibling.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 고급 선택자 6 | 26 | 27 | 28 |
29 |

예약 방법 & 이용 요금

30 |

아직 온라인 예약 신청이 준비되어 있지 않습니다.
전화(xxx-xxxx-xxxx)로 문의 바랍니다.

31 |

가족실(2~4인) : 60,000원/일

32 |

도미토리(4인 공용) : 25,000원/일

33 |
34 | 35 | 36 | -------------------------------------------------------------------------------- /10/sol-1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 연습문제 1 6 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /11/ani-3.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | Animation 6 | 26 | 27 | 28 | 29 |
30 | 31 | -------------------------------------------------------------------------------- /11/css/animate.css: -------------------------------------------------------------------------------- 1 | .box { 2 | width: 60px; 3 | height: 60px; 4 | margin: 60px; 5 | animation: rotate 1.5s infinite, background 1.5s infinite alternate; 6 | } 7 | 8 | @keyframes rotate { 9 | from { transform: perspective(120px) rotateX(0deg) rotateY(0deg); } 10 | 50% { transform: perspective(120px) rotateX(-180deg) rotateY(0deg); } 11 | to { transform: perspective(120px) rotateX(-180deg) rotateY(-180deg); } 12 | } 13 | 14 | @keyframes background { 15 | from { background: red; } 16 | 50% { background-color: green } 17 | to { background-color: blue; } 18 | } -------------------------------------------------------------------------------- /11/css/product.css: -------------------------------------------------------------------------------- 1 | #container { 2 | width:1000px; 3 | margin:20px auto; 4 | } 5 | h1 { 6 | text-align:center; 7 | } 8 | .prod-list { 9 | list-style:none; 10 | padding:0; 11 | } 12 | .prod-list li { 13 | float: left; 14 | padding: 0; 15 | margin: 10px; 16 | overflow: hidden; 17 | } 18 | .prod-list img { 19 | margin:0; 20 | padding:0; 21 | float:left; 22 | z-index:5; 23 | } -------------------------------------------------------------------------------- /11/images/bear.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/11/images/bear.jpg -------------------------------------------------------------------------------- /11/images/prod1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/11/images/prod1.jpg -------------------------------------------------------------------------------- /11/images/prod2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/11/images/prod2.jpg -------------------------------------------------------------------------------- /11/images/prod3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/11/images/prod3.jpg -------------------------------------------------------------------------------- /11/images/sunset.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/11/images/sunset.jpg -------------------------------------------------------------------------------- /11/images/tree.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/11/images/tree.jpg -------------------------------------------------------------------------------- /11/quiz-2.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 6 | 연습문제 2 7 | 18 | 19 | 20 | 21 |
22 | 곰인형 사진 23 |
24 | 25 | 26 | -------------------------------------------------------------------------------- /11/rotate.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | Transform:rotate 6 | 25 | 26 | 27 |
28 |
29 | 30 |
31 |
32 | 33 |
34 | 35 | 36 | -------------------------------------------------------------------------------- /11/skew-2.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | Transform 6 | 22 | 23 | 24 |
25 |

CSS 변형 함수 익히기

26 |
27 | 28 | 29 | -------------------------------------------------------------------------------- /11/sol-2.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 6 | 연습문제 2 7 | 26 | 27 | 28 |
29 | 곰인형 사진 30 |
31 | 32 | 33 | -------------------------------------------------------------------------------- /11/tr-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Transition 6 | 21 | 22 | 23 | 24 |
25 | 26 | -------------------------------------------------------------------------------- /11/tr-2.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | Transition 6 | 22 | 23 | 24 | 25 |
26 | 27 | -------------------------------------------------------------------------------- /11/tr-samples.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | Transition 6 | 30 | 31 | 32 | 33 |
34 |
35 | 36 | -------------------------------------------------------------------------------- /11/transform.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | Transform 6 | 26 | 27 | 28 | 29 |
30 | 31 | -------------------------------------------------------------------------------- /12/center.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 세로로 중앙에 배치하기 7 | 29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /12/css/gallery-result.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | body { 5 | background-color:#eee; 6 | font-size:16px; 7 | } 8 | #wrapper{ 9 | display:grid; 10 | grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); 11 | grid-gap:1rem; 12 | } 13 | .card { 14 | background-color:#fff; 15 | box-shadow:0px 1px 5px #222; 16 | } 17 | .card > header { 18 | font-size:1.5rem; 19 | padding:0.5rem; 20 | } 21 | .card > p { 22 | padding:0.5rem; 23 | line-height:1.6em; 24 | } 25 | .card > img { 26 | max-width:100%; 27 | } 28 | -------------------------------------------------------------------------------- /12/css/gallery.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | body { 5 | background-color:#eee; 6 | font-size:16px; 7 | } 8 | .card { 9 | background-color:#fff; 10 | box-shadow:0px 1px 5px #222; 11 | } 12 | .card > header { 13 | font-size:1.5rem; 14 | padding:0.5rem; 15 | } 16 | .card > p { 17 | padding:0.5rem; 18 | line-height:1.6em; 19 | } 20 | img { 21 | max-width:100%; 22 | } -------------------------------------------------------------------------------- /12/images/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/12/images/1.jpg -------------------------------------------------------------------------------- /12/images/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/12/images/2.jpg -------------------------------------------------------------------------------- /12/images/bg0.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/12/images/bg0.jpg -------------------------------------------------------------------------------- /12/images/bg1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/12/images/bg1.jpg -------------------------------------------------------------------------------- /12/images/bg2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/12/images/bg2.jpg -------------------------------------------------------------------------------- /12/images/bg3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/12/images/bg3.jpg -------------------------------------------------------------------------------- /12/images/bg5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/12/images/bg5.jpg -------------------------------------------------------------------------------- /12/images/cup-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/12/images/cup-1.jpg -------------------------------------------------------------------------------- /12/images/cup-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/12/images/cup-2.jpg -------------------------------------------------------------------------------- /12/images/cup-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/12/images/cup-3.jpg -------------------------------------------------------------------------------- /12/images/cup-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/12/images/cup-4.jpg -------------------------------------------------------------------------------- /12/images/cup-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/12/images/cup-5.jpg -------------------------------------------------------------------------------- /12/images/cup-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/12/images/cup-6.jpg -------------------------------------------------------------------------------- /12/images/cup-7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/12/images/cup-7.jpg -------------------------------------------------------------------------------- /12/images/cup-8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/12/images/cup-8.jpg -------------------------------------------------------------------------------- /12/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | INSPIRATIONAL QUOTES 7 | 8 | 9 | 10 |
11 |
12 | 13 |
14 |

일 분 전만큼 먼 시간은 없다.

15 |

- Jim Bishop

16 |
17 |
18 |
19 | 20 |
21 |

낡은 옷은 그냥 입고 새 책을 사라.

22 |

- Austin Phelps

23 |
24 |
25 |
26 | 27 | -------------------------------------------------------------------------------- /12/vw.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | viewport units 7 | 13 | 14 | 15 |

안녕하세요?

16 | 17 | -------------------------------------------------------------------------------- /13/alert.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | alert문 7 | 8 | 9 | 12 | 13 | -------------------------------------------------------------------------------- /13/confirm.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | confirm 7 | 8 | 9 | 12 | 13 | -------------------------------------------------------------------------------- /13/console-log.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Welcome 7 | 8 | 9 |

어서오세요

10 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /13/document-write.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | document.write 7 | 8 | 9 | 12 | 13 | -------------------------------------------------------------------------------- /13/greeting.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Welcome 7 | 8 | 9 |

어서오세요

10 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /13/js-time-result.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | What time is it? 7 | 13 | 14 | 15 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /13/js-time.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | What time is it? 7 | 13 | 14 | 15 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /13/js/change-color.js: -------------------------------------------------------------------------------- 1 | var heading = document.querySelector('#heading'); 2 | heading.onclick = function() { 3 | heading.style.color = "red"; 4 | } 5 | -------------------------------------------------------------------------------- /13/js/myscript.js: -------------------------------------------------------------------------------- 1 | var heading = document.querySelector('#heading'); 2 | heading.onclick = function () { 3 | heading.style.color = "red"; 4 | } -------------------------------------------------------------------------------- /13/prompt-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | prompt 7 | 8 | 9 | 12 | 13 | -------------------------------------------------------------------------------- /13/prompt-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | prompt 7 | 8 | 9 | 12 | 13 | -------------------------------------------------------------------------------- /13/script-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 글자색 바꾸기 7 | 15 | 16 | 17 |

자바스크립트

18 |

위 텍스트를 클릭해 보세요

19 | 20 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /13/script-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 글자색 바꾸기 7 | 15 | 16 | 17 |

자바스크립트

18 |

위 텍스트를 클릭해 보세요

19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /14/age-result.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 나이 계산하기 7 | 8 | 9 | 19 | 20 | -------------------------------------------------------------------------------- /14/age.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 나이 계산하기 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /14/and.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 조건문 7 | 8 | 9 | 18 | 19 | -------------------------------------------------------------------------------- /14/css/gugudan-table.css: -------------------------------------------------------------------------------- 1 | table { 2 | margin:20px; 3 | float:left; 4 | } 5 | table, th { 6 | border:1px solid #ccc; 7 | border-collapse:collapse; 8 | } 9 | th,td { padding:10px 15px;} 10 | th { background:#eee;} 11 | td { border:1px dotted #222;} -------------------------------------------------------------------------------- /14/css/gugudan.css: -------------------------------------------------------------------------------- 1 | div { 2 | display:inline-block; 3 | padding:0 20px 30px 20px; 4 | margin:15px; 5 | border:1px solid #ccc; 6 | line-height:2; 7 | } 8 | div h3 { 9 | text-align:center; 10 | font-weight:bold; 11 | } -------------------------------------------------------------------------------- /14/css/switch.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color:#0c3268; 3 | color:rgb(243, 243, 243); 4 | } 5 | 6 | p { 7 | margin-top:80px; 8 | font-size:2em; 9 | font-weight:700; 10 | text-align: center; 11 | text-shadow:1px 2px 1px #000; 12 | } 13 | 14 | p strong { 15 | font-size:2.2em; 16 | color:yellow; 17 | } -------------------------------------------------------------------------------- /14/even.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 짝수 더하기 7 | 13 | 14 | 15 |

짝수끼리 더하기

16 | 29 | 30 | -------------------------------------------------------------------------------- /14/factorial.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 팩토리얼 계산하기 7 | 13 | 14 | 15 |

while문을 사용한 팩토리얼 계산

16 | 17 | 36 | 37 | -------------------------------------------------------------------------------- /14/gugudan-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 구구단 - for문 7 | 8 | 9 |

구구단

10 | 20 | 21 | -------------------------------------------------------------------------------- /14/gugudan-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 구구단 - for문 7 | 8 | 9 | 10 |

구구단

11 | 23 | 24 | -------------------------------------------------------------------------------- /14/gugudan-3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 구구단 - for문 7 | 8 | 9 | 10 |

구구단

11 | 25 | 26 | -------------------------------------------------------------------------------- /14/gugudan-table.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 구구단 - for문 7 | 8 | 9 |

구구단

10 | 22 | 23 | -------------------------------------------------------------------------------- /14/if-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 조건문 7 | 8 | 9 | 17 | 18 | -------------------------------------------------------------------------------- /14/if-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 조건문 7 | 8 | 9 | 21 | 22 | -------------------------------------------------------------------------------- /14/if-3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 조건문 7 | 8 | 9 | 17 | 18 | -------------------------------------------------------------------------------- /14/not.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 조건문 7 | 8 | 9 | 23 | 24 | -------------------------------------------------------------------------------- /14/or.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 조건문 7 | 8 | 9 | 18 | 19 | -------------------------------------------------------------------------------- /14/quiz-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 연습문제 1 7 | 8 | 9 |

4의 배수일까 아닐까

10 | 11 | 14 | 15 | -------------------------------------------------------------------------------- /14/quiz-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 연습문제 2 7 | 13 | 14 | 15 |

3의 배수 찾기

16 | 17 | -------------------------------------------------------------------------------- /14/repeat-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 1에서 5까지 더하기 7 | 14 | 15 | 16 | 26 | 27 | -------------------------------------------------------------------------------- /14/repeat-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 1에서 5까지 더하기 7 | 14 | 15 | 16 | 25 | 26 | -------------------------------------------------------------------------------- /14/repeat-3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 1에서 1000까지 더하기 7 | 14 | 15 | 16 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /14/seat-1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 6 | 자리 배치도 7 | 8 | 9 |

자리 배치도

10 | 21 | 22 | -------------------------------------------------------------------------------- /14/seat.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 6 | 자리 배치도 7 | 8 | 9 |

자리 배치도

10 | 11 | 12 | -------------------------------------------------------------------------------- /14/sol-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 연습문제 1 7 | 13 | 14 | 15 |

4의 배수일까 아닐까

16 | 17 | 27 | 28 | -------------------------------------------------------------------------------- /14/sol-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 연습문제 2 7 | 17 | 18 | 19 |

3의 배수 찾기

20 | 21 | 36 | 37 | -------------------------------------------------------------------------------- /14/switch.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 세션 선택 - switch문 7 | 8 | 9 | 10 | 23 | 24 | -------------------------------------------------------------------------------- /15/addNumber-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 함수 7 | 13 | 14 | 15 | 23 | 24 | -------------------------------------------------------------------------------- /15/addNumber-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 함수 7 | 13 | 14 | 15 | 22 | 23 | -------------------------------------------------------------------------------- /15/addNumber-3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 함수 7 | 13 | 14 | 15 | 21 | 22 | -------------------------------------------------------------------------------- /15/addNumber-4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 즉시 실행 함수 7 | 13 | 14 | 15 | 21 | 22 | -------------------------------------------------------------------------------- /15/arrow-1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 6 | Arrow Fuctions 7 | 8 | 9 | 20 | 21 | -------------------------------------------------------------------------------- /15/arrow-2.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 6 | Arrow Fuctions 7 | 8 | 9 | 20 | 21 | -------------------------------------------------------------------------------- /15/arrow-3.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 6 | Arrow Fuctions 7 | 8 | 9 | 20 | 21 | -------------------------------------------------------------------------------- /15/calcSum-result.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 1부터 n까지 더하기 7 | 8 | 9 | 27 | 28 | -------------------------------------------------------------------------------- /15/calcSum.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 1부터 n까지 더하기 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /15/const-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Function - Variable 7 | 8 | 9 | 15 | 16 | -------------------------------------------------------------------------------- /15/const-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Function - Variable 7 | 8 | 9 | 15 | 16 | -------------------------------------------------------------------------------- /15/css/event.css: -------------------------------------------------------------------------------- 1 | #item { 2 | position:relative; 3 | width:500px; 4 | height:auto; 5 | padding:15px 20px; 6 | margin:auto; 7 | } 8 | button { 9 | background-color:rgba(255,255,255,0.7);; 10 | padding:5px; 11 | border:1px solid #ccc; 12 | font-size:0.8em; 13 | } 14 | .over { 15 | position:absolute; 16 | left:30px; 17 | bottom:30px; 18 | } 19 | .detail { 20 | width:400px; 21 | text-align:left; 22 | line-height:1.8; 23 | display:none; 24 | } -------------------------------------------------------------------------------- /15/css/function.css: -------------------------------------------------------------------------------- 1 | a:link, a:visited { 2 | color:black; 3 | text-decoration: none; 4 | } 5 | ul { 6 | list-style: none; 7 | width:500px; 8 | margin:10px auto; 9 | padding:0; 10 | } 11 | li { 12 | display:inline-block; 13 | width:120px; 14 | border:1px solid #ccc; 15 | padding:10px 15px; 16 | font-size:16px; 17 | text-align:center; 18 | } 19 | #result { 20 | width:500px; 21 | height:300px; 22 | margin:30px auto; 23 | border:2px solid #ccc; 24 | border-radius:15px; 25 | } 26 | p { 27 | width:80%; 28 | padding:10px; 29 | line-height: 2em; 30 | } -------------------------------------------------------------------------------- /15/event-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 자바스크립트 이벤트 7 | 8 | 9 | 10 | 15 |
16 | 17 | -------------------------------------------------------------------------------- /15/event-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 자바스크립트 이벤트 7 | 8 | 9 | 10 | 15 |
16 | 17 | 23 | 24 | -------------------------------------------------------------------------------- /15/event.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 자바스크립트 이벤트 7 | 8 | 9 | 10 |
11 | 12 | 13 |
14 |

등심붓꽃

15 |

북아메리카 원산으로 각지에서 관상초로 흔히 심고 있는 귀화식물이다. 길가나 잔디밭에서 흔히 볼 수 있다. 아주 작은 씨앗을 무수히 많이 가지고 있는데 바람을 이용해 씨앗들을 날려보내거나, 뿌리줄기를 통해 동일한 개체들을 많이 만들어 냄으로써 번식한다.

16 | 17 |
18 |
19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /15/function.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 함수 7 | 18 | 19 | 20 | 26 | 27 | -------------------------------------------------------------------------------- /15/images/flower.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/15/images/flower.jpg -------------------------------------------------------------------------------- /15/images/flower1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/15/images/flower1.jpg -------------------------------------------------------------------------------- /15/let-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Function - Variable 7 | 8 | 9 | 19 | 20 | -------------------------------------------------------------------------------- /15/let-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Function - Variable 7 | 8 | 9 | 19 | 20 | -------------------------------------------------------------------------------- /15/let-3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Function - Variable 7 | 8 | 9 | 20 | 21 | -------------------------------------------------------------------------------- /15/let-4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Function - Variable 7 | 8 | 9 | 20 | 21 | -------------------------------------------------------------------------------- /15/let-5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Function - Variable 7 | 8 | 9 | 19 | 20 | -------------------------------------------------------------------------------- /15/no-function.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 함수 7 | 13 | 14 | 15 | 21 | 22 | -------------------------------------------------------------------------------- /15/quiz-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 연습문제 1 7 | 8 | 9 | 12 | 13 | -------------------------------------------------------------------------------- /15/quiz-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 연습문제 2 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /15/scope.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 변수 적용 범위(scope) 7 | 8 | 9 | 23 | 24 | -------------------------------------------------------------------------------- /15/sol-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 연습문제 1 7 | 8 | 9 | 20 | 21 | -------------------------------------------------------------------------------- /15/sol-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 연습문제 2 7 | 8 | 9 | 27 | 28 | -------------------------------------------------------------------------------- /15/using-function.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 함수 7 | 8 | 9 | 18 | 19 | -------------------------------------------------------------------------------- /15/var-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | var 예약어로 지역 변수 선언하기 7 | 8 | 9 | 16 | 17 | -------------------------------------------------------------------------------- /15/var-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | var 예약어를 사용한 지역 변수와 전역 변수 7 | 8 | 9 | 17 | 18 | -------------------------------------------------------------------------------- /15/var-3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 변수 호이스팅 7 | 8 | 9 | 19 | 20 | -------------------------------------------------------------------------------- /15/var-4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | var 예약어를 사용한 지역 변수와 전역 변수 7 | 8 | 9 | 20 | 21 | -------------------------------------------------------------------------------- /16/array-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Array 7 | 13 | 14 | 15 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /16/array-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Array 7 | 12 | 13 | 14 |

배열의 각 요소

15 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /16/array-5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Array 객체의 메서드 7 | 8 | 9 |

slice 메서드 사용하기

10 | 19 | 20 | -------------------------------------------------------------------------------- /16/center-result.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Window 객체 7 | 8 | 9 |

문서를 열면 팝업 창이 표시됩니다

10 | 19 | 20 | -------------------------------------------------------------------------------- /16/center.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Window 객체 7 | 8 | 9 |

문서를 열면 팝업 창이 표시됩니다

10 | 13 | 14 | -------------------------------------------------------------------------------- /16/close.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 6 | Window 객체 7 | 19 | 20 | 21 |
22 | 23 | 24 |
25 | 26 | 35 | 36 | -------------------------------------------------------------------------------- /16/day.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 독서 챌린지 7 | 26 | 27 | 28 |
29 |

책 읽기

30 |

일 연속으로
책 읽기를 달성했군요.

31 |

축하합니다!

32 |
33 | 34 | 35 | -------------------------------------------------------------------------------- /16/doit-event-result.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 6 | 이벤트 공지 7 | 16 | 17 | 18 |
19 |

이벤트 공지

20 | 21 |

자세히 보기

22 |
23 | 24 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /16/doit-event.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 6 | 이벤트 공지 7 | 16 | 17 | 18 |
19 |

이벤트 공지

20 | 21 |

자세히 보기

22 |
23 | 24 | -------------------------------------------------------------------------------- /16/doit-main.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Do it! 7 | 14 | 15 | 16 |
17 | 18 |
19 | 20 | -------------------------------------------------------------------------------- /16/event-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 당첨자 발표 6 | 13 | 14 | 15 |

당첨자 발표

16 | 27 | 28 | -------------------------------------------------------------------------------- /16/event-result.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 당첨자 발표 6 | 13 | 14 | 15 |

당첨자 발표

16 | 24 | 25 | -------------------------------------------------------------------------------- /16/event.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 당첨자 발표 6 | 14 | 15 | 16 |

당첨자 발표

17 | 18 | -------------------------------------------------------------------------------- /16/images/doit.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/16/images/doit.jpg -------------------------------------------------------------------------------- /16/main-result.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 6 | 팝업 창 열기 7 | 8 | 9 |

문서를 열면 팝업 창이 표시됩니다.

10 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /16/main.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 6 | 팝업 창 열기 7 | 8 | 9 |

문서를 열면 팝업 창이 표시됩니다.

10 | 13 | 14 | -------------------------------------------------------------------------------- /16/notice.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 공지사항 6 | 23 | 24 | 25 |
26 |

공지사항

27 | 34 | 35 |
36 | 37 | 38 | -------------------------------------------------------------------------------- /16/popup-check.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Window 객체 7 | 8 | 9 |

문서를 열면 팝업 창이 표시됩니다

10 | 11 | 21 | 22 | -------------------------------------------------------------------------------- /16/popup.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 6 | Window 객체 7 | 8 | 9 |

문서를 열면 팝업 창이 표시됩니다

10 | 13 | 14 | -------------------------------------------------------------------------------- /16/popupname.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Window 객체 7 | 8 | 9 |

문서를 열면 팝업 창이 표시됩니다

10 | 13 | 14 | -------------------------------------------------------------------------------- /16/position.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Window 객체 7 | 8 | 9 |

왼쪽에서 100픽셀, 위에서 200픽셀 떨어진 위치에
팝업 창이 표시됩니다

10 | 13 | 14 | -------------------------------------------------------------------------------- /16/quiz-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 현재 시각은? 7 | 19 | 20 | 21 |

현재 시각

22 | 25 | 26 | -------------------------------------------------------------------------------- /16/quiz-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 현재 시간 보기 7 | 18 | 19 | 20 |
21 | 22 |
23 | 24 | 34 | 35 | -------------------------------------------------------------------------------- /16/time-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | What time is it? 7 | 13 | 14 | 15 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /16/time-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | What time is it? 7 | 13 | 14 | 15 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /17/acessDom.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | DOM에 접근하기 8 | 9 | 10 | 11 |
12 |

에디오피아 게뎁

13 |
14 | 에디오피아 게뎁 15 |
16 |
17 |

Information

18 |

2차 세계대전 이후 설립된 게뎁농장은 유기농 인증 농장으로 여성의 고용 창출과 지역사회 발전에 기여하며 3대째 이어져 내려오는 오랜 역사를 가진 농장입니다. 게뎁 농장은 SCAA 인증을 받은 커피 품질관리 실험실을 갖추고 있어 철처한 관리를 통해 스페셜티커피를 생산합니다.

19 |

Flavor Note

20 |

은은하고 다채로운 꽃향, 망고, 다크 체리, 달달함이 입안 가득.

21 |
22 |
23 | 24 | -------------------------------------------------------------------------------- /17/css/nameList.css: -------------------------------------------------------------------------------- 1 | body { 2 | width:500px; 3 | margin:0 auto; 4 | } 5 | .del { 6 | font-size:10px; 7 | color:#ccc; 8 | background:transparent; 9 | padding:5px; 10 | border:1px solid #ccc; 11 | float:right; 12 | margin-right:10px; 13 | } 14 | .del:hover { 15 | color:#222; 16 | border:1px solid #222; 17 | } -------------------------------------------------------------------------------- /17/css/nodelist.css: -------------------------------------------------------------------------------- 1 | *{ 2 | box-sizing:border-box; 3 | } 4 | #container { 5 | width:500px; 6 | margin:20px auto; 7 | padding:20px; 8 | } 9 | input[type="text"] { 10 | width:370px; 11 | float:left; 12 | height:30px; 13 | padding-left:30px; 14 | } 15 | button { 16 | width:90px; 17 | height:30px; 18 | float:right; 19 | background:#222; 20 | color:#fff; 21 | border:none; 22 | } 23 | hr { clear:both; display:none; } 24 | ul { list-style:none; padding-top:50px;} 25 | li { line-height: 2.5; } 26 | li:hover { cursor:pointer;} -------------------------------------------------------------------------------- /17/dom.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 |
11 |

상품 정보

12 | 20 |

상세 설명

21 |

2차 세계대전 이후 설립된 게뎁 농장은 유기농 인증 농장으로 여성의 고용 창출과 지역사회 발전에 기여하며 3대째 이어져 내려오는 오랜 역사를 가진 농장입니다. 게뎁 농장은 SCAA 인증을 받은 커피 22 | 품질관리 실험실을 갖추고 있어 철처한 관리를 통해 스페셜티 커피를 생산합니다.

23 |

커피의 풍미

24 |

은은하고 다채로운 꽃향, 망고, 다크 체리, 달달함이 입안 가득.

25 |
26 | 27 | 28 | -------------------------------------------------------------------------------- /17/domNode-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | DOM 6 | 7 | 8 |
9 |

DOM을 공부합시다

10 | 더 보기 11 |
12 |
13 | 14 | -------------------------------------------------------------------------------- /17/domNode-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | DOM 6 | 16 | 17 | 18 |
19 |

DOM을 공부합시다

20 | 더 보기 21 |
22 |
23 | 31 | 32 | -------------------------------------------------------------------------------- /17/domNode.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | DOM Tree 알아보기 5 | 6 | 7 |

DOM을 공부합시다

8 | 9 | 10 | -------------------------------------------------------------------------------- /17/domTree.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | DOM Tree 알아보기 6 | 7 | 8 |

Do it!

9 | 공부하는 이미지 10 | 11 | -------------------------------------------------------------------------------- /17/event-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | DOM event 객체 7 | 13 | 14 | 15 |
16 | 17 |
18 | 19 | 25 | 26 | -------------------------------------------------------------------------------- /17/event-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | DOM event 객체 7 | 13 | 14 | 15 |
16 | 17 |
18 | 19 | 27 | 28 | -------------------------------------------------------------------------------- /17/event-3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | DOM event 객체 7 | 13 | 14 | 15 |
16 | 17 |
18 | 19 | 25 | 26 | -------------------------------------------------------------------------------- /17/event-4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | DOM event 객체 7 | 13 | 14 | 15 |
16 | 17 |
18 | 19 | 25 | 26 | -------------------------------------------------------------------------------- /17/event-5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | DOM event 객체 7 | 13 | 14 | 15 |
16 | 17 |
18 | 19 | 31 | 32 | -------------------------------------------------------------------------------- /17/event-6.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | DOM event 객체 7 | 13 | 14 | 15 |
16 | 17 |
18 | 19 | 29 | 30 | -------------------------------------------------------------------------------- /17/images/coffee-blue.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/17/images/coffee-blue.jpg -------------------------------------------------------------------------------- /17/images/coffee-gray.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/17/images/coffee-gray.jpg -------------------------------------------------------------------------------- /17/images/coffee-pink.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/17/images/coffee-pink.jpg -------------------------------------------------------------------------------- /17/images/cup-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/17/images/cup-1.png -------------------------------------------------------------------------------- /17/images/cup-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/17/images/cup-2.png -------------------------------------------------------------------------------- /17/images/doit.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/17/images/doit.jpg -------------------------------------------------------------------------------- /17/images/dom.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/17/images/dom.jpg -------------------------------------------------------------------------------- /17/images/easys-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/17/images/easys-1.jpg -------------------------------------------------------------------------------- /17/images/easys-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/17/images/easys-2.jpg -------------------------------------------------------------------------------- /17/images/tree-1-thumb.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/17/images/tree-1-thumb.jpg -------------------------------------------------------------------------------- /17/images/tree-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/17/images/tree-1.jpg -------------------------------------------------------------------------------- /17/images/tree-2-thumb.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/17/images/tree-2-thumb.jpg -------------------------------------------------------------------------------- /17/images/tree-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/17/images/tree-2.jpg -------------------------------------------------------------------------------- /17/images/tree-3-thumb.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/17/images/tree-3-thumb.jpg -------------------------------------------------------------------------------- /17/images/tree-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/17/images/tree-3.jpg -------------------------------------------------------------------------------- /17/images/tree-4-thumb.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/17/images/tree-4-thumb.jpg -------------------------------------------------------------------------------- /17/images/tree-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/17/images/tree-4.jpg -------------------------------------------------------------------------------- /17/images/tree-5-thumb.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/17/images/tree-5-thumb.jpg -------------------------------------------------------------------------------- /17/images/tree-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/17/images/tree-5.jpg -------------------------------------------------------------------------------- /17/images/tree-6-thumb.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/17/images/tree-6-thumb.jpg -------------------------------------------------------------------------------- /17/images/tree-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eun-Sook-Kim/doit_html_css_javascript/8462e208fea29bba4b13eab4bf1b27fc67810199/17/images/tree-6.jpg -------------------------------------------------------------------------------- /17/inner.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | innerText, innerHTML 프로퍼티 7 | 8 | 9 | 10 | 11 |

현재 시각:

12 |
13 | 14 | 24 | 25 | -------------------------------------------------------------------------------- /17/nodeCreate.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Web Programming 7 | 8 | 9 | 10 |
11 |

Web Programming

12 |

공부할 주제를 기록해 보세요

13 |
14 | 15 | 16 |
17 |
18 | 19 |
20 | 21 | -------------------------------------------------------------------------------- /17/nodeList.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Web Programming 7 | 8 | 9 | 10 |

Web Programming

11 | 16 | 17 | -------------------------------------------------------------------------------- /17/quiz-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 연습문제 1 7 | 24 | 25 | 26 |

할 일 목록

27 | 34 | 35 | -------------------------------------------------------------------------------- /17/quiz-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 연습문제 2 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 《Do it! HTML+CSS+자바스크립트 웹 표준의 정석》 2 | 3 | ![Do it! HTML+CSS+자바스크립트 웹 표준의 정석](http://easyspub.co.kr/upload/BOOK/421/20210106120238670408B.png) 4 | 5 | 6 | ## 실습 파일 사용 방법 7 | 8 | - 깃허브 계정을 가지고 있다면 Fork 해서 사용할 수 있습니다. 9 | 10 | - 목록 위에 있는 [Code] 버튼을 클릭한 후 [Download ZIP]을 선택하면 압축 파일로 다운로드할 수 있습니다. 11 | 12 | 13 | 14 | ## 책 소개 페이지 15 | 16 | http://easyspub.co.kr/20_Menu/BookView/421/PUB 17 | 18 | 19 | 20 | ## 동영상 강의 21 | 22 | https://www.youtube.com/watch?v=lpneo53Jarw&list=PLG7te9eYUi7tS_nx58Z1Zi9Iqt0JEQ1Is 23 | -------------------------------------------------------------------------------- /sources: -------------------------------------------------------------------------------- 1 | 2 | --------------------------------------------------------------------------------