├── 10 ├── css │ ├── layout-result.css │ ├── layout.css │ ├── style.css │ ├── style1.css │ ├── style2.css │ └── style3.css ├── footer-address.html ├── header-nav.html ├── html5doc.html ├── html5shiv-test.html ├── iframe.html ├── images │ ├── 1.jpg │ ├── 1.png │ ├── 2.jpg │ ├── 2.png │ ├── 3.png │ ├── 4.jpg │ ├── 4.png │ ├── banner2.png │ ├── bg-note.png │ ├── bg.png │ ├── bg2.png │ ├── nav2.png │ └── top-bg.jpg ├── js │ └── html5shiv.js ├── layout-css.html ├── layout1-result.html ├── layout1.html ├── layout2-result.html ├── layout2.html └── section-article-aside.html ├── 11 ├── CalmBay.swf ├── audio1.html ├── audio2.html ├── fullvideo-result.html ├── fullvideo.html ├── images │ ├── bg2.jpg │ └── flame.jpg ├── media │ ├── Beach.mp4 │ ├── Beach.webm │ ├── Fireworks.mp4 │ ├── Fireworks.webm │ ├── Painting.mp4 │ ├── Painting.vtt │ ├── Painting.webm │ ├── Wildlife.mp4 │ ├── Wildlife.webm │ ├── bali.mp4 │ ├── bali.vtt │ ├── bali.webm │ ├── bgsound.mp3 │ ├── bgsound2.mp3 │ └── flame.mp4 ├── myTrack-result.html ├── myTrack.html ├── myVideo-result.html ├── myVideo.html ├── quiz-1.html ├── quiz-2.html ├── sol-1.html ├── sol-2.html ├── video1.html ├── video2.html ├── video3.html ├── video4.html └── video5.html ├── 12 ├── adjacent.html ├── after.html ├── attr1.html ├── attr2.html ├── attr3.html ├── attr4.html ├── attr5.html ├── attr6.html ├── attr7.html ├── child.html ├── descendant.html ├── html-basic.html ├── images │ ├── ch.png │ ├── excel_icon.gif │ ├── header-bg.png │ ├── hwp_icon.gif │ ├── jp.png │ ├── naples.png │ ├── newwindow.png │ ├── rio.png │ ├── sydney.png │ ├── tangerines.jpg │ └── us.png ├── navi.html ├── nth.html ├── quiz-1.html ├── quiz-2.html ├── rounded-navi.html ├── sibling.html ├── sol-1.html ├── sol-2.html └── states.html ├── 13 ├── ani-count.html ├── ani-keyframes.html ├── ani-name.html ├── animation.html ├── back-visibility.html ├── images │ ├── bus.jpg │ ├── coffee.jpg │ ├── fruit.jpg │ ├── lamp.jpg │ ├── prod1.jpg │ ├── prod2.jpg │ ├── prod3.jpg │ ├── rose.jpg │ └── sunset.jpg ├── perspective.html ├── product-result.html ├── product.html ├── quiz-1.html ├── quiz-2.html ├── quiz-3.html ├── rotate.html ├── rotate3d.html ├── scale.html ├── skew.html ├── sol-1.html ├── sol-2.html ├── sol-3.html ├── tr-delay.html ├── tr-function.html ├── tr-origin.html ├── tr-samples.html ├── tr-style.html ├── tr1.html ├── tr2.html ├── tr3.html ├── tr4.html ├── transform.html └── translate.html ├── 14 ├── cars.mp4 ├── css │ └── style.css ├── fixed-layout.html ├── fluid-font1.html ├── fluid-font2.html ├── fluid-font3.html ├── fluid-grid.html ├── fluid-img1.html ├── fluid-img2.html ├── fluid-img3.html ├── fluid-img4.html ├── fluid-video.html ├── images │ ├── coffee.jpg │ ├── fireworks.png │ ├── header.jpg │ ├── ice.jpg │ ├── map.jpg │ ├── pencil-hd.jpg │ ├── pencil-min.jpg │ ├── pencil.jpg │ ├── shop-large.jpg │ ├── shop-medium.jpg │ ├── shop-small.jpg │ └── shop.jpg └── index.html ├── 15 ├── css │ ├── style-result.css │ └── style.css ├── images │ ├── 1.jpg │ ├── 2.jpg │ ├── 3.jpg │ ├── bg0.jpg │ ├── bg1.jpg │ ├── bg2.jpg │ └── bg3.jpg ├── index-result.html ├── index.html ├── mq-orientation.html └── mq.html ├── 16 ├── css │ ├── style-result.css │ └── style.css ├── flex-align-content.html ├── flex-align-items.html ├── flex-align-self.html ├── flex-flex.html ├── flex-justify-content.html ├── flex-order.html ├── flex1.html ├── flex2.html ├── flex3.html ├── flex4.html ├── images │ ├── dish1.jpg │ ├── dish2.jpg │ ├── dish3.jpg │ ├── dish4.jpg │ ├── dish5.jpg │ └── food.jpg ├── index-result.html └── index.html ├── 01 ├── basic.html ├── first-result.html ├── images │ ├── first.jpg │ ├── petit.jpg │ └── watch.jpg ├── web.html └── web.txt ├── 02 ├── colgroup.html ├── css │ └── style.css ├── dl.html ├── images │ └── symbol.gif ├── index-table-result.html ├── index-table.html ├── index-text-result.html ├── index-text.html ├── ol.html ├── quiz-1.html ├── quiz-2.txt ├── quiz-3.html ├── quiz-4.html ├── sol-1.html ├── sol-2.html ├── sol-3.html ├── sol-4.html ├── table-1.html ├── table-2.html ├── table-3.html ├── table-4.html ├── table-5.html ├── table-6.html ├── text-1.html ├── text-2.html ├── text-3.html ├── text-4.html ├── text-5.html ├── text-6.html └── ul.html ├── 03 ├── anchor.html ├── check-svg.html ├── child.html ├── css │ └── style.css ├── event-result.html ├── event.html ├── figcaption.html ├── images │ ├── automobile.svg │ ├── cover.jpg │ ├── easyspub.jpg │ ├── event.jpg │ ├── fantasy.jpg │ ├── git.jpg │ ├── gugudan-2.jpg │ ├── gugudan.jpg │ ├── kids.jpg │ ├── muffin.png │ ├── muffin.svg │ ├── pf.jpg │ ├── prod.jpg │ ├── umbrella.jpg │ └── webd.png ├── img-1.html ├── img-2.html ├── img-3.html ├── index-img-result.html ├── index-img.html ├── index-result.html ├── index.html ├── insert-svg.html ├── link-css.html ├── link.html ├── map.html ├── modernizr-custom.js ├── parent.html ├── precoding.html ├── quiz-1.html ├── quiz-2.html ├── quiz-3.html ├── sol-1.html ├── sol-2.html ├── sol-3.html └── target.html ├── 04 ├── 1min.html ├── attribute.html ├── button-css.html ├── button.html ├── color.html ├── datalist.html ├── date.html ├── fieldset.html ├── form.html ├── id-pw.html ├── images │ ├── login.jpg │ └── tick.png ├── join.html ├── meter.html ├── number-range.html ├── order-result.html ├── order.html ├── output.html ├── progress-js.html ├── progress.html ├── quiz-1.html ├── quiz-2.html ├── radio-checkbox.html ├── select1.html ├── select2.html ├── sol-1.html ├── sol-2.html ├── submit-image.html ├── submit-reset.html ├── textarea.html ├── time.html ├── url-email-tel.html └── withlabel.html ├── 05 ├── css-comment.html ├── css │ └── style.css ├── external.html ├── group-selector.html ├── inherit.html ├── inline.html ├── internal.html ├── precoding.html ├── prefixfree.min.js ├── priority.html ├── selector.html ├── tag-selector.html ├── transform-prefix-free.html └── transform.html ├── 06 ├── bullet.html ├── color.html ├── font-size.html ├── font-style.html ├── font-vary.html ├── font.html ├── image-bullet.html ├── images │ ├── book.png │ ├── dot.png │ ├── galic.jpg │ └── top.jpg ├── letter-spacing.html ├── line-height.html ├── link1.html ├── link2.html ├── list-position.html ├── market-result.html ├── market.html ├── nobullet.html ├── ordered.html ├── quiz-1.html ├── quiz-2.html ├── quiz-3.html ├── quiz-4.html ├── sol-1.html ├── sol-2.html ├── sol-3.html ├── sol-4.html ├── spacing.html ├── text-align.html ├── text-decoration.html ├── text-indent.html ├── text-overflow.html ├── text-shadow1.html ├── text-shadow2.html ├── text-transform.html ├── trana.eot ├── trana.ttf ├── trana.woff ├── webfont1.html └── webfont2.html ├── 07 ├── bg-attachment.html ├── bg-clip.html ├── bg-color.html ├── bg-img.html ├── bg-origin.html ├── bg-position.html ├── bg-size.html ├── color.html ├── colorstop.html ├── css │ └── mail.css ├── event-mail-table.html ├── event-mail.html ├── ex1.html ├── images │ ├── apple-bg.jpg │ ├── bg1.png │ ├── bg3.jpg │ ├── bg4.jpg │ ├── bottom-bg.jpg │ ├── light.png │ ├── logo.png │ ├── mail.jpg │ └── newBook.png ├── linear-degree.html ├── linear-position.html ├── precoding.html ├── quiz-1.html ├── quiz-2.html ├── quiz-3.html ├── radial-color.html ├── radial-default.html ├── radial-position.html ├── radial-size.html ├── repeat-gradient1.html ├── repeat-gradient2.html ├── repeat-gradient3.html ├── sol-1.html ├── sol-2.html └── sol-3.html ├── 08 ├── border-1.html ├── border-2.html ├── border-3.html ├── box-result.html ├── box-shadow.html ├── box.html ├── boxmodel.html ├── display-1.html ├── display-2.html ├── display-3.html ├── images │ ├── bg.png │ ├── pet.png │ ├── pic1.jpg │ ├── pic2.jpg │ └── pic3.jpg ├── inline-block.html ├── layout.css ├── margin-center.html ├── margin-overlap.html ├── margin-overlap2.html ├── margin.html ├── padding.html ├── quiz-2.html ├── radius-1.html ├── radius-2.html ├── radius-3.html ├── sol-2.html └── width-height.html ├── 09 ├── 2-layout-css.html ├── 2-layout-markup.html ├── 2-layout.html ├── 3-layout.html ├── absolute.html ├── box-sizing.html ├── col-break.html ├── col-count.html ├── col-rule.html ├── col-span.html ├── col-width.html ├── fixed.html ├── float-1.html ├── float-2.html ├── float-3.html ├── images │ ├── cover.jpg │ ├── pic1.jpg │ ├── pic2.jpg │ ├── pic3.jpg │ └── tomato.jpg ├── quiz-1.html ├── quiz-2.html ├── relative.html ├── sol-1.html ├── sol-2.html ├── table-align.html ├── table-css1.html ├── table-css2.html ├── table-css3.html ├── table-css4.html ├── table-layout1.html ├── table-layout2.html ├── table-width.html ├── visibility.html └── z-index.html ├── README.md └── images ├── download.png └── fork.png /01/basic.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 기본 HTML 문서 6 | 7 | 8 |

시간이란..

9 | 10 |

내일 죽을 것처럼 오늘을 살고 영원히 살 것처럼 내일을 꿈꾸어라.

11 | 12 | -------------------------------------------------------------------------------- /01/first-result.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 내가 처음 만드는 HTML 문서 8 | 9 | 10 |

시간이란...

11 |

내일 죽을 것처럼 오늘을 살고
12 | 영원히 살 것처럼 내일을 꿈꾸어라.

13 | 14 | 15 | -------------------------------------------------------------------------------- /01/images/first.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/01/images/first.jpg -------------------------------------------------------------------------------- /01/images/petit.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/01/images/petit.jpg -------------------------------------------------------------------------------- /01/images/watch.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/01/images/watch.jpg -------------------------------------------------------------------------------- /01/web.html: -------------------------------------------------------------------------------- 1 |

웹 개발 기초

2 | 3 | -------------------------------------------------------------------------------- /01/web.txt: -------------------------------------------------------------------------------- 1 | 웹 개발 기초 2 | 3 | HTML 4 | CSS 5 | Javascript -------------------------------------------------------------------------------- /02/colgroup.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 표 만들기 6 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 |
colgroup 연습
37 | 38 | -------------------------------------------------------------------------------- /02/dl.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 제주 올레 6 | 11 | 12 | 13 |

제주 올레

14 |
15 |
올레 1코스
16 |
코스 : 시흥 초등학교 옆 - 광치기 해변
17 |
거리 : 14.6km(4~5시간)
18 |
난이도 : 중
19 |
올레 2코스
20 |
코스 : 광치기 해변 - 온평 포구
21 |
거리 : 14.5km(4~5시간)
22 |
난이도 : 중
23 |
24 | 25 | -------------------------------------------------------------------------------- /02/images/symbol.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/02/images/symbol.gif -------------------------------------------------------------------------------- /02/ol.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 1박 2일 가족 여행 코스 6 | 7 | 8 |

1박 2일 가족 여행 코스

9 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /02/quiz-1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 서울특별시 6 | 7 | 8 |
9 | 서울특별시 휘장 10 |
11 |
12 | 서울특별시 13 | 서울의 지향 이미지 : 역사와 활력의 인간도시 14 | 휘장은 한글 '서울'을 서울의 산, 해, 한강으로 나타내면서 전체적으로는 신명나는 사람의 모습을 형상화한 것으로 인간 중심도시를 지향하는 서울을 상징합니다. 자연 - 인간 - 도시의 맥락 속에서 녹색 산은 환경사랑, 청색 한강은 역사와 활력, 가운데 해는 미래의 비전과 희망을 함축하고, 이 세가지 요소를 붓터치로 자연스럽게 연결하여 서울의 이미지와 사람의 활력을 친근하게 느낄 수 있도록 하였습니다. 15 |
16 | 17 | -------------------------------------------------------------------------------- /02/quiz-2.txt: -------------------------------------------------------------------------------- 1 | 이지스퍼블리싱 신입 사원 모집 공고 2 | 3 | IT 기획, 편집 부서에서 함께 할 신입 사원을 모집합니다. 4 | 5 | 모집 직군 : 편집 기획 부서 6 | 7 | 직무 내용 : 도서 프로듀싱 업무 (신입 지원 가능) 8 | - 도서 기획, 편집 9 | - 도서 홍보, 독자 소통 10 | 접수 마감일 : 2016.3.6. 11 | 12 | 자세한 내용은 공지 게시판을 참고하세요. -------------------------------------------------------------------------------- /02/quiz-3.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 커피 드립 순서 6 | 7 | 8 |

커피 드립 순서 - 아라비아 숫자

9 | 필터접기 10 | 분쇄 11 | 불림 12 | 추출 13 |

커피 드립 순서 - 알파벳 소문자

14 | 필터접기 15 | 분쇄 16 | 불림 17 | 추출 18 | 19 | -------------------------------------------------------------------------------- /02/quiz-4.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 주요 SNS 서비스별 이용률 6 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /02/sol-1.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 | -------------------------------------------------------------------------------- /02/sol-2.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 신입 사원 모집 공고 6 | 7 | 8 |

이지스퍼블리싱 신입 사원 모집 공고

9 |

IT 기획, 편집 부서에서 함께 할 신입 사원을 모집합니다.

10 | 20 |

자세한 내용은 공지 게시판을 참고하세요.

21 | 22 | -------------------------------------------------------------------------------- /02/sol-3.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 커피 드립 순서 6 | 7 | 8 |

커피 드립 순서 - 아라비아 숫자

9 |
    10 |
  1. 필터접기
    2. 11 |
  2. 분쇄
    3. 12 |
  3. 불림
    4. 13 |
  4. 추출
    5. 14 |
15 |

커피 드립 순서 - 알파벳 소문자

16 |
    17 |
  1. 필터접기
    2. 18 |
  2. 분쇄
    3. 19 |
  3. 불림
    4. 20 |
  4. 추출
    5. 21 |
22 | 23 | -------------------------------------------------------------------------------- /02/sol-4.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 주요 SNS 서비스별 이용률 6 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 |
주요 SNS 서비스별 이용률(%)
페이스북카카오스토리밴드인스타그램트위터
2015년77.158.332.416.722.1
2016년73.851.040.128.114.7
50 | 51 | -------------------------------------------------------------------------------- /02/table-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 표 만들기 6 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |
제목 셀1행 2열1행 3열
제목 셀2행 2열2행 2열
28 | 29 | -------------------------------------------------------------------------------- /02/table-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 표 만들기 6 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 |
이름연락처
주소
자기소개
38 | 39 | -------------------------------------------------------------------------------- /02/table-3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 표 만들기 6 | 14 | 15 | 16 | 17 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 |
18 | Modern Browser 19 |

국내에서 자주 사용하는 모던 브라우저

20 |
브라우저제조업체다운로드
크롬(Chrome)Googlehttps://www.google.com/chrome/
파이어폭스(Firfox)Mozillahttps://www.mozilla.org/ko/firefox/
엣지(Edge) Microsoft https://www.microsoft.com/ko-kr/windows/microsoft-edge
42 | 43 | 44 | -------------------------------------------------------------------------------- /02/table-4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 표 만들기 6 | 14 | 15 | 16 |
17 |
18 |

국내에서 자주 사용하는 모던 브라우저

19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 |
브라우저제조업체다운로드
크롬(Chrome)Googlehttps://www.google.com/chrome/
파이어폭스(Firfox)Mozillahttps://www.mozilla.org/ko/firefox/
엣지(Edge) Microsoft https://www.microsoft.com/ko-kr/windows/microsoft-edge
42 |
43 | 44 | -------------------------------------------------------------------------------- /02/table-5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 표 만들기 6 | 14 | 15 | 16 |

다음 표는 HTMl5를 지원하는 모던(Modern Browser)를 정리한 것입니다. 최신 버전일수록 HTML5를 좀더 많이 지원하기 때문에 최신 버전을 다운로드하는 것이 좋습니다.

17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 |
Modern Browser
브라우저제조업체다운로드
크롬(Chrome)Googlehttps://www.google.com/chrome/
파이어폭스(Firfox)Mozillahttps://www.mozilla.org/ko/firefox/
엣지(Edge) Microsoft https://www.microsoft.com/ko-kr/windows/microsoft-edge
40 | 41 | -------------------------------------------------------------------------------- /02/text-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 제주 이색 여행지 6 | 7 | 8 |

제주 이색 여행지

9 |

야외 텐트를 닮은 건축물 "테쉬폰"

10 |

아일랜드 출신 임피제 신부가 1954년 제주에 오면서 목장 숙소로 짓기 시작한 후 사료공장, 성당으로 활용됐습니다.

11 |

제주에서 점차 다른 지방으로 보급됐지만 현재 제주에만 건축물이 남아있는데,
12 | 국내 근현대 건축사의 한 페이지를 보여주는 가치를 지닌다고 전문가들은 평가합니다.

13 |
14 |
성이시돌목장은 제주특별자치도 제주시 한림읍 금악리에 있는 목장이다. 특히 이시돌목장은 제주 지역 최초의 전기업목장(全企業牧場)으로 1961년 11월 말 제주시 한림읍 금악리에 세워 양돈 사업을 실시하였으며 면양을 사육하였던 것으로 알려져 있다. 이시돌목장의 특색있는 건축양식으로 테쉬폰도 유명하다. (출처:향토문화전자대전)
15 | 16 | -------------------------------------------------------------------------------- /02/text-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 로컬 스토리지(Local Storage)를 저장하는 함수 6 | 7 | 8 |

로컬 스토리지(Local Storage)를 저장하는 함수 :

9 | 
10 |      function savetheLocal(){
11 |           var second = document.getElementById("second");
12 |           var thevalue = second.value;
13 |           localStorage.setItem(1, thevalue);
14 |           gettheLocal();
15 |      }    
16 |
17 | 18 | -------------------------------------------------------------------------------- /02/text-3.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 제주 이색 여행지 6 | 12 | 13 | 14 |

제주 이색 여행지 - 이중섭 거리

15 |

주말마다 '서귀포문화예술디자인시장'이 열립니다.

16 |

'아트마켓'이라고도 부르는데, 문화예술체험이나 공연관람을 할 수도 있고
17 | 작가들이 직접 만든 창작예술품 등을 판매하기도 합니다.

18 | 19 | -------------------------------------------------------------------------------- /02/text-4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 웹 접근성(Web Accessibility) 6 | 7 | 8 |

웹 접근성

9 |

웹의 창시자인 팀 버너스 리 (Tim Berners-Lee)의 웹의 힘은 보편성에 있다. 장애에 구애없이 모든 사람이 접근할 수 있는 것이 필수적인 요소이다.라는 말로 웹 접근성을 설명한다.

10 | 11 | -------------------------------------------------------------------------------- /02/text-5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 제주 이색 여행지 6 | 7 | 8 |

야외 텐트를 닮은 건축물 "테쉬폰"

9 |

아일랜드 출신 임피제 신부가 1954년 제주에 오면서 목장 숙소로 짓기 시작한 후 사료공장, 성당으로 활용됐습니다. 제주에서 점차 다른 지방으로 보급됐지만 현재 제주에만 건축물이 남아있으며, 국내 근현대 건축사의 한 페이지를 보여주는 가치를 지닌다고 전문가들은 평가합니다.

10 | 11 | -------------------------------------------------------------------------------- /02/text-6.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Ruby 6 | 7 | 8 |

루비(Ruby)는 1995년, 일본의 프로그래머인 마츠모토 유키히로 (松本行弘まつもとゆきひろ)가 만든 프로그래밍 언어입니다.

9 | 10 | 11 | -------------------------------------------------------------------------------- /02/ul.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 제주 관광 안내 6 | 7 | 8 |

관광 안내 전화

9 |

한국관광공사에서는 전국의 관광안내소와 공동으로 여러분의 여행편의를 위해 관광안내전화 1330 서비스를 연중무휴 실시하고 있습니다.

10 |

1330에는 해당 지역의 지도와 관광 가이드북, 관광안내소를 대신할 수 있을 정도의 다양한 정보가 있습니다. 원하는 관광지는 물론이며 숙박, 교통, 음식점 등의 자세한 정보를 한국어를 비롯한 영어, 중국어, 일어의 3개 국어로도 이용 가능합니다.

11 | 15 | 16 | -------------------------------------------------------------------------------- /03/check-svg.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Insert SVG 6 | 7 | 8 | 9 |

SVG 이미지 삽입하기

10 | 11 | 16 | 17 | -------------------------------------------------------------------------------- /03/child.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 프런트엔드 웹 디자인 입문 6 | 15 | 16 | 17 | 두잇, 지옥에서 온 문서 관리자 깃 and 깃허브 입문 18 |

19 |

문서 지옥, 깃&깃허브로 하루 안에 탈출한다!

20 |

1시간이면 초보 탈출, 5시간이면 기본 활용법 완전 정복!

21 |

자주 쓰는 기능을 모두 담아 한 권에 끝낸다!

22 |

도서 상세 보기(현재 화면에)

23 |

도서 상세 보기(전체 화면에)

24 | 25 | -------------------------------------------------------------------------------- /03/event-result.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 이벤트 페이지 6 | 7 | 8 | 신간 안내 9 | 10 | 시간 소개 페이지로 가기 11 | 본문 PDF 다운로드 페이지로 가기 12 | 13 | 14 | -------------------------------------------------------------------------------- /03/event.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 이벤트 페이지 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /03/figcaption.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 이미지 삽입하기 8 | 16 | 17 | 18 |

제품 선택

19 |
20 | 예멘 모카 마타리 21 |
예멘 모카 마타리(Yemen Mocha Mattari)
22 |
23 | 24 | -------------------------------------------------------------------------------- /03/images/cover.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/03/images/cover.jpg -------------------------------------------------------------------------------- /03/images/easyspub.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/03/images/easyspub.jpg -------------------------------------------------------------------------------- /03/images/event.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/03/images/event.jpg -------------------------------------------------------------------------------- /03/images/fantasy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/03/images/fantasy.jpg -------------------------------------------------------------------------------- /03/images/git.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/03/images/git.jpg -------------------------------------------------------------------------------- /03/images/gugudan-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/03/images/gugudan-2.jpg -------------------------------------------------------------------------------- /03/images/gugudan.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/03/images/gugudan.jpg -------------------------------------------------------------------------------- /03/images/kids.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/03/images/kids.jpg -------------------------------------------------------------------------------- /03/images/muffin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/03/images/muffin.png -------------------------------------------------------------------------------- /03/images/pf.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/03/images/pf.jpg -------------------------------------------------------------------------------- /03/images/prod.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/03/images/prod.jpg -------------------------------------------------------------------------------- /03/images/umbrella.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/03/images/umbrella.jpg -------------------------------------------------------------------------------- /03/images/webd.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/03/images/webd.png -------------------------------------------------------------------------------- /03/img-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 이미지 삽입하기 8 | 9 | 10 |

바빠 시리즈

11 | 빠른연산 12 | 13 | -------------------------------------------------------------------------------- /03/img-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 이미지 삽입하기 8 | 9 | 10 |

이미지 크기 조절

11 | 바빠구구단 12 | 바빠구구단 13 | 14 | -------------------------------------------------------------------------------- /03/img-3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 이미지 삽입하기 8 | 9 | 10 | 배 두 척이 있는 강 위로 열기구가 떠 있는 사진 11 | 12 | -------------------------------------------------------------------------------- /03/insert-svg.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Insert SVG 6 | 7 | 8 |

SVG 이미지 삽입하기

9 | 10 | 11 | -------------------------------------------------------------------------------- /03/link-css.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 링크 만들기 6 | 12 | 13 | 14 |

텍스트 링크 만들기

15 | 이지스퍼블리싱 홈페이지 16 |

이미지 링크 만들기

17 | 18 | 이지스퍼블리싱 홈페이지로 가기 19 | 20 | 21 | -------------------------------------------------------------------------------- /03/link.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 링크 만들기 6 | 7 | 8 |

텍스트 링크 만들기

9 | 이지스퍼블리싱 홈페이지 10 |

이미지 링크 만들기

11 | 12 | 이지스퍼블리싱 홈페이지로 가기 13 | 14 | 15 | -------------------------------------------------------------------------------- /03/map.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 이미지맵 6 | 11 | 12 | 13 | 14 | 15 | 16 | do it html5 네이버 카페로 가기 17 | do it html5 페이스북 페이지로 가기 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /03/parent.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Do it! 지옥에서 온 문서 관리자 깃 & 깃허브 입문 6 | 14 | 15 | 16 |

Do it! 지옥에서 온 문서 관리자 깃 & 깃허브 입문

17 |

아래 화면은 iframe 태그를 이용해 외부 문서를 현재 문서에 삽입한 것입니다.

18 |

19 | 20 | 21 | -------------------------------------------------------------------------------- /03/precoding.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 맛보기 손코딩 6 | 7 | 8 |

가을날의 외출

9 | 10 |

담양 죽녹원(새 창 열기)

11 | 12 | 13 | -------------------------------------------------------------------------------- /03/quiz-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 이미지 삽입하기 6 | 7 | 8 |

이미지 삽입하기

9 | 10 | -------------------------------------------------------------------------------- /03/quiz-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 링크 사용하기 6 | 7 | 8 |

포털 사이트 Daum으로 연결하기

9 | 10 | -------------------------------------------------------------------------------- /03/quiz-3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 링크 사용하기 6 | 7 | 8 |

포털 사이트 Daum으로 연결하기

9 | Daum 10 | 11 | -------------------------------------------------------------------------------- /03/sol-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 이미지 삽입하기 6 | 7 | 8 |

이미지 삽입하기

9 | 우산 이미지 10 | 11 | -------------------------------------------------------------------------------- /03/sol-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 링크 사용하기 6 | 7 | 8 |

포털 사이트 Daum으로 연결하기

9 | Daum 10 | 11 | -------------------------------------------------------------------------------- /03/sol-3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 링크 사용하기 6 | 7 | 8 |

포털 사이트 Daum으로 연결하기

9 | 10 | Daum 11 | 12 | 13 | -------------------------------------------------------------------------------- /03/target.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 텍스트 링크 6 | 12 | 13 | 14 |

텍스트 링크 만들기

15 |

이지스퍼블리싱 홈페이지(현재 화면)

16 |

이지스퍼블리싱 홈페이지(새 창 또는 새 탭)

17 | 18 | -------------------------------------------------------------------------------- /04/1min.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 1분 복습 8 | 9 | 10 |
11 |

색상 선택

12 | 17 |
18 | 19 | -------------------------------------------------------------------------------- /04/button-css.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 웹 폼 6 | 26 | 27 | 28 | 29 |
30 | 33 |
34 | 35 | 36 | -------------------------------------------------------------------------------- /04/button.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 폼 버튼 6 | 7 | 8 |
9 | 10 |
11 | 12 | -------------------------------------------------------------------------------- /04/color.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 웹 폼 6 | 7 | 8 |
9 |
10 | 과 티셔츠 설문 11 |

올해 과 티(T)를 만들려고 합니다. 원하는 색상을 추천해 주세요.

12 | 13 |
14 | 15 |
16 | 17 | -------------------------------------------------------------------------------- /04/date.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | date 7 | 8 | 9 |
10 |

조회기간 선택

11 | 12 | 13 |
14 | 15 | -------------------------------------------------------------------------------- /04/fieldset.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | filedset과 legend 태그 7 | 22 | 23 | 24 |
25 |
26 | 개인 정보 27 | 37 |
38 |
39 | 로그인 정보 40 | 50 |
51 |
52 | 53 | -------------------------------------------------------------------------------- /04/form.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | HTML5 폼 7 | 8 | 9 |
10 | 11 | 12 |
13 | 14 | -------------------------------------------------------------------------------- /04/id-pw.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 웹 폼 7 | 17 | 18 | 19 |
20 |
21 | 22 | 23 | 24 |
25 |
26 | 27 | -------------------------------------------------------------------------------- /04/images/login.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/04/images/login.jpg -------------------------------------------------------------------------------- /04/images/tick.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/04/images/tick.png -------------------------------------------------------------------------------- /04/join.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 웹 폼 7 | 15 | 16 | 17 |

회원 가입을 환영합니다

18 |
19 | 26 |
27 | 28 | -------------------------------------------------------------------------------- /04/meter.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 웹 폼 6 | 16 | 17 | 18 | 40 | 41 | -------------------------------------------------------------------------------- /04/order.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 주문서 작성하기 6 | 7 | 8 |
9 |

상품 주문서

10 | 11 |
12 | 13 | -------------------------------------------------------------------------------- /04/output.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 웹 폼 6 | 7 | 8 | 9 |
10 | 11 | + 12 | = 13 |
14 | 15 | 16 | -------------------------------------------------------------------------------- /04/progress-js.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 웹 폼 6 | 16 | 17 | 18 | 37 | 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /04/progress.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 웹 폼 6 | 16 | 17 | 18 | 30 | 31 | -------------------------------------------------------------------------------- /04/quiz-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 예약 접수 6 | 18 | 19 | 20 |

예약 정보

21 | 22 | 23 | -------------------------------------------------------------------------------- /04/quiz-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 프런트엔드 개발자 지원서 6 | 18 | 19 | 20 |
21 |

프런트엔드 개발자 지원서

22 |

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

23 |
24 |
25 | 26 |
27 |
28 | 29 | -------------------------------------------------------------------------------- /04/sol-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 예약 접수 6 | 18 | 19 | 20 |

예약 정보

21 |
22 | 38 |
39 | 40 | -------------------------------------------------------------------------------- /04/submit-image.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 6 | 이미지 버튼 7 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 |
28 | 29 | -------------------------------------------------------------------------------- /04/submit-reset.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 전송 - 리셋 7 | 12 | 13 | 14 |

메일링 리스트 등록

15 |
16 | 17 | 18 | 19 |
20 | 21 | -------------------------------------------------------------------------------- /04/time.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | time 속성 7 | 8 | 9 |
10 |

대관시간을 선택하세요(오늘)

11 | , 12 | 13 | 14 |

대관시간을 선택하세요(다른날짜)

15 | , 16 | 17 |
18 | 19 | -------------------------------------------------------------------------------- /04/withlabel.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | label 태그 사용 7 | 15 | 16 | 17 |
18 |

수강 분야(다수 선택 가능)

19 | 24 |

수강 과목(1과목만 선택 가능)

25 | 36 |
37 | 38 | -------------------------------------------------------------------------------- /05/css-comment.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CSS 적용해 보기 6 | 19 | 20 | 21 |

CSS

22 |

웹 문서의 디자인과 내용을 분리합니다

23 |

웹 표준에 의한 웹 문서는 디자인과 내용이 분리되어 있습니다.

24 |

내용은 HTML을 이용해 구성하고, 디자인은 CSS를 이용해 꾸미는 것입니다.

25 | 26 | -------------------------------------------------------------------------------- /05/css/style.css: -------------------------------------------------------------------------------- 1 | h2 { 2 | color:blue; /* 글자 색 */ 3 | } 4 | p { 5 | font-size:0.9em; /* 글자 크기 */ 6 | line-height: 2.0; /* 줄간격 */ 7 | } 8 | -------------------------------------------------------------------------------- /05/external.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 온라인 프로필 5 | 6 | 13 | 14 | 15 | 16 | 17 |
18 | 19 |
20 |

Who am I?

21 |

프런트엔드 웹 기술(Front-end Web Tech.)에 관심이 많습니다.
22 | 현재 제주의 한 시골 마을에서 코딩 중입니다.

23 |
24 |
25 | 26 | -------------------------------------------------------------------------------- /05/group-selector.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 블루베리(Blueberry) 5 | 14 | 15 | 16 |

블루베리에 관한 연구

17 |

블루베리와 항산화 효능

18 |

블루베리는 항산화제인 안토시아닌과 폴리페놀을 다량 포함하고 있습니다.

19 |

매사츄세츠 보스톤에 있는 USDA 노화에 관한 인류 영양 연구센터 (the USDA Human Nutrition Research Center on Aging)의 자료에 의하면 블루베리는 과일 중에서 가장 항산화 작용이 뛰어난 과일이라고 합니다. 

20 |

블루베리와 노화

21 |

USDA 인류 영양 연구센터(the USDA Human Nutrition Research Center) 신경과학자들은 쥐들에게 블루베리를 먹임으로써 노화에 의한 인지능력의 손실을 예방해 준다는 사실을 발견하였습니다.

22 | 23 | -------------------------------------------------------------------------------- /05/inherit.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 스타일 상속 6 | 15 | 16 | 17 |

CSS

18 |

웹 문서의 디자인과 내용을 분리합니다

19 |

웹 표준에 의한 웹 문서는 디자인과 내용이 분리되어 있습니다.

20 |

내용은 HTML을 이용해 구성하고, 디자인은 CSS를 이용해 꾸미는 것입니다.

21 | 22 | -------------------------------------------------------------------------------- /05/inline.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 인라인스타일 7 | 8 | 9 |

블루베리와 항산화 효능

10 |

블루베리는 항산화제인 안토시아닌과 폴리페놀을 다량 포함하고 있습니다.

11 |

 매사츄세츠 보스톤에 있는 USDA 노화에 관한 인류 영양 연구센터 (the USDA Human Nutrition Research Center on Aging) 의 자료에 의하면 12 | 블루베리는 과일 중에서 가장 항산화 작용이 뛰어난 과일이라고 합니다. 

13 | 14 | -------------------------------------------------------------------------------- /05/internal.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 온라인 프로필 5 | 6 | 13 | 14 | 15 | 16 |
17 | 18 |
19 |

Who am I?

20 |

프런트엔드 웹 기술(Front-end Web Tech.)에 관심이 많습니다.
21 | 현재 제주의 한 시골 마을에서 코딩 중입니다.

22 |
23 |
24 | 25 | -------------------------------------------------------------------------------- /05/precoding.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 맛보기 손코딩 6 | 12 | 13 | 14 |
15 |

표준 웹 기술

16 |

HTML

17 |

CSS

18 |

Javascript

19 |
20 | 21 | 22 | -------------------------------------------------------------------------------- /05/priority.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 온라인 프로필 5 | 6 | 22 | 23 | 24 | 25 |
26 |

이지스퍼블리싱의 미션

27 |

사람에게 구체적으로 도움을 주는 책,
28 | 우리는 열심히 사는 사람들에게 도움이 되고 싶습니다.
29 |

우리는 책을 출간하기 전에 질문할 것입니다.

30 |

"이 책이 사람들에게 도움이 됩니까?"

31 |
32 | 33 | -------------------------------------------------------------------------------- /05/tag-selector.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 블루베리(Blueberry) 6 | 15 | 16 | 17 |

블루베리에 관한 연구

18 |

블루베리와 항산화 효능

19 |

블루베리는 항산화제인 안토시아닌과 폴리페놀을 다량 포함하고 있습니다.

20 |

매사츄세츠 보스톤에 있는 USDA 노화에 관한 인류 영양 연구센터 (the USDA Human Nutrition Research Center on Aging) 의 자료에 의하면 21 | 블루베리는 과일 중에서 가장 항산화 작용이 뛰어난 과일이라고 합니다. 

22 |

블루베리와 노화

23 |

USDA 인류 영양 연구센터(the USDA Human Nutrition Research Center) 실험실에서 신경과학자들은 쥐들에게 블루베리를 먹임으로써 24 | 노화에 의한 인지능력의 손실을 예방해 준다는 사실을 발견하였습니다.

25 | 26 | -------------------------------------------------------------------------------- /05/transform-prefix-free.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Transform 6 | 7 | 23 | 24 | 25 | 26 |
Mouse Over
27 | 28 | 29 | -------------------------------------------------------------------------------- /05/transform.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Transform 6 | 26 | 27 | 28 | 29 |
Mouse Over
30 | 31 | 32 | -------------------------------------------------------------------------------- /06/bullet.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 불릿 바꾸기 6 | 14 | 15 | 16 |

이지스퍼블리싱

17 | 18 | 25 | 26 | 27 | 34 | 35 | -------------------------------------------------------------------------------- /06/color.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 뉴욕타임즈 10대 식품 6 | 15 | 16 | 17 |

세계 10대 슈퍼푸드

18 | 19 |

마늘(Garlic)

20 |

일해백리(一害百利)는 마늘의 별명이다. 한가지 해가 있고 백가지 이로움이 있다는 뜻이다. 21 | 그 한 가지 해란, 아린 맛으로 인해 위에 부담을 준다는 것이다.

22 |

마늘 특유의 아린 맛은 알리신이라는 성분 때문으로, 살균 및 항균 작용을 하며 23 | 마늘에 들어 있는 아연이 피로 회복에 도움을 준다.

24 | 25 | 26 | -------------------------------------------------------------------------------- /06/font-size.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 폰트 크기 7 | 15 | 16 | 17 |

3em의 크기를 가진 제목

18 |

1em의 크기를 가진 단락

19 | 20 | -------------------------------------------------------------------------------- /06/font-style.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 폰트 스타일 6 | 10 | 11 | 12 |

세계 3대 미항

13 |

시드니(Sydney), 호주

14 |

리우데자네이루(Rio de Janeiro), 브라질

15 |

나폴리(Naples), 이탈리아

16 | 17 | -------------------------------------------------------------------------------- /06/font-vary.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Font Variant & Weight 6 | 12 | 13 | 14 |

세계 3대 미항

15 |

시드니(Sydney), 호주

16 |

리우데자네이루(Rio de Janeiro), 브라질

17 |

나폴리(Naples), 이탈리아

18 | 19 | -------------------------------------------------------------------------------- /06/font.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 6 | 글꼴 스타일 7 | 12 | 13 | 14 |

여러 요소가 함께 사용된 웹 문서 안에서 텍스트가 눈에 띄게 하려면 내용에 맞는 글꼴과 글자 크기, 그리고 글자색을 선택하는 것이 중요합니다.

15 |

이럴 때 사용할 수 있는 것이 글꼴 속성입니다.

16 |

[font:caption] 캡션에 어울리는 글꼴 스타일

17 |

[font:icon] 아이콘에 어울리는 글꼴 스타일

18 |

[font:menu] 드롭다운 메뉴에 어울리는 글꼴 스타일

19 |

[font:message-box] 대화 상자에 어울리는 글꼴 스타일

20 |

[font:small-caption] 작은 캡션에 어울리는 글꼴 스타일

21 |

[font:status-bar] 상태표시줄에 어울리는 글꼴 스타일

22 | 23 | -------------------------------------------------------------------------------- /06/image-bullet.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 불릿 바꾸기 6 | 11 | 12 | 13 |

이지스퍼블리싱

14 | 21 | 22 | -------------------------------------------------------------------------------- /06/images/book.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/06/images/book.png -------------------------------------------------------------------------------- /06/images/dot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/06/images/dot.png -------------------------------------------------------------------------------- /06/images/galic.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/06/images/galic.jpg -------------------------------------------------------------------------------- /06/images/top.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/06/images/top.jpg -------------------------------------------------------------------------------- /06/letter-spacing.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | letter-spacing와 word-spacing 6 | 15 | 16 | 17 |

HTML5

18 |

HTML5

19 |

HTML5

20 | 21 | -------------------------------------------------------------------------------- /06/line-height.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 줄 간격 6 | 20 | 21 | 22 |

블루베리(Blueberry)

23 |

블루베리의 대표적인 기능은 항산화로 비타민A, C, E가 풍부하고 안토니시아민, 페놀 등이 활성 산소를 없애 노화를 억제한다. 24 | 이밖에 블루베리의 안토니시아민은 눈의 피로와 시력 저하를 회복시키는 효능을 가지고 있다.

25 |

블루베리의 대표적인 기능은 항산화로 비타민A, C, E가 풍부하고 안토니시아민, 페놀 등이 활성 산소를 없애 노화를 억제한다. 26 | 이밖에 블루베리의 안토니시아민은 눈의 피로와 시력 저하를 회복시키는 효능을 가지고 있다.

27 |

블루베리의 대표적인 기능은 항산화로 비타민A, C, E가 풍부하고 안토니시아민, 페놀 등이 활성 산소를 없애 노화를 억제한다. 28 | 이밖에 블루베리의 안토니시아민은 눈의 피로와 시력 저하를 회복시키는 효능을 가지고 있다.

29 | 30 | -------------------------------------------------------------------------------- /06/link1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 텍스트 링크 6 | 17 | 18 | 19 |

이지스퍼블리싱

20 | 27 | 28 | -------------------------------------------------------------------------------- /06/link2.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 텍스트 링크 6 | 32 | 33 | 34 |

이지스퍼블리싱

35 | 42 | 43 | -------------------------------------------------------------------------------- /06/list-position.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 불릿 바꾸기 6 | 11 | 12 | 13 |

list-style-position을 지정하지 않음

14 | 21 |

list-style-position : inside

22 | 29 | 30 | -------------------------------------------------------------------------------- /06/market.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | market 6 | 17 | 18 | 19 | 20 |
21 | 가정용 꿀사과 - 흠집이 있고 약간은 못생겼지만 맛과 영양은 그대로입니다. 질좋은 사과를 저렴하게 즐겨보세요 22 |
23 |

확인하세요

24 |

주문 및 배송

25 |

오후 2시 이전 주문건은 당일 발송합니다
26 | 2시 이후 주문건은 다음날 발송합니다(주말 제외)

27 |
28 |

교환 및 환불

29 |

불만족시 100% 환불해 드립니다
30 | 고객센터로 전화주세요

31 |
32 |

고객센터

33 |

0000-0000
34 | 상담시간 : 오전 9시 ~ 오후 6시 (토/일, 공휴일 휴무)

35 |
36 |
37 | 38 | 39 | -------------------------------------------------------------------------------- /06/nobullet.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 불릿 바꾸기 6 | 11 | 12 | 13 |

이지스퍼블리싱

14 | 21 | 22 | -------------------------------------------------------------------------------- /06/ordered.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 불릿 바꾸기 6 | 14 | 15 | 16 |

도서 시리즈

17 |
    18 |
  1. Do it! 시리즈
    2. 19 |
  2. 된다 시리즈
    3. 20 |
  3. DCM 프로 사진가
    4. 21 |
  4. 데이터과학 시리즈
    5. 22 |
23 | 24 |
    25 |
  1. Do it! 시리즈
    2. 26 |
  2. 된다 시리즈
    3. 27 |
  3. DCM 프로 사진가
    4. 28 |
  4. 데이터과학 시리즈
    5. 29 |
30 | 31 | -------------------------------------------------------------------------------- /06/quiz-1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 텍스트 스타일 6 | 13 | 14 | 15 |
16 |

최신 웹 디자인 트렌드

17 |

반응형 웹 디자인 - 다양한 화면 크기에 최적화하다

18 |

플랫 디자인 - 입체에서 평면으로

19 |

풀스크린 배경 - 콘텐츠에 집중

20 |

원 페이지 사이트 - 한 페이지에 모든 내용을 담다

21 |

패럴랙스 스크롤링 - 동적인 효과로 강한 인상을!

22 |

웹 폰트 - 웹 타이포그래피를 받쳐주는 기술

23 |
24 | 25 | -------------------------------------------------------------------------------- /06/quiz-2.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 텍스트 스타일 6 | 17 | 18 | 19 |
20 |

최신 웹 디자인 트렌드

21 | 29 |
30 | 31 | -------------------------------------------------------------------------------- /06/quiz-3.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 텍스트 스타일 6 | 14 | 15 | 16 |
17 |

최신 웹 디자인 트렌드

18 |
19 | 20 | -------------------------------------------------------------------------------- /06/sol-1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 텍스트 스타일 6 | 17 | 18 | 19 |
20 |

최신 웹 디자인 트렌드

21 |

반응형 웹 디자인 - 다양한 화면 크기에 최적화하다

22 |

플랫 디자인 - 입체에서 평면으로

23 |

풀스크린 배경 - 콘텐츠에 집중

24 |

원 페이지 사이트 - 한 페이지에 모든 내용을 담다

25 |

패럴랙스 스크롤링 - 동적인 효과로 강한 인상을!

26 |

웹 폰트 - 웹 타이포그래피를 받쳐주는 기술

27 |
28 | 29 | -------------------------------------------------------------------------------- /06/sol-2.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 텍스트 스타일 6 | 24 | 25 | 26 |
27 |

최신 웹 디자인 트렌드

28 | 36 |
37 | 38 | -------------------------------------------------------------------------------- /06/spacing.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | letter-spacing와 word-spacing 6 | 14 | 15 | 16 |

HTML5와 CSS3

17 |

HTML5와 CSS3

18 |

HTML5와 CSS3

19 | 20 | -------------------------------------------------------------------------------- /06/text-decoration.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 웹 표준 기술 살펴보기 6 | 11 | 12 | 13 |

HTML5

14 |

다양한 기기로 인터넷에 접속할 수 있는 요즘,
15 | HTML4 HTML5를 공부해야 할 때입니다.

16 |

HTML5 표준 규약 살펴보기

17 | 18 | -------------------------------------------------------------------------------- /06/text-indent.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 뉴욕타임즈 10대 식품 6 | 15 | 16 | 17 |

블루베리(Blueberry)

18 |

블루베리는 비타민A, C, E가 풍부하고 안토니시아민, 페놀 등이 활성 산소를 없애 노화를 억제하고 블루베리의 안토니시아민은 눈의 피로와 시력 저하를 회복시키는 효능을 가지기도 한다.

19 |

블루베리는 비타민A, C, E가 풍부하고 안토니시아민, 페놀 등이 활성 산소를 없애 노화를 억제하고 블루베리의 안토니시아민은 눈의 피로와 시력 저하를 회복시키는 효능을 가지기도 한다.

20 |

블루베리는 비타민A, C, E가 풍부하고 안토니시아민, 페놀 등이 활성 산소를 없애 노화를 억제하고 블루베리의 안토니시아민은 눈의 피로와 시력 저하를 회복시키는 효능을 가지기도 한다.

21 | 22 | -------------------------------------------------------------------------------- /06/text-overflow.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 슈퍼푸드 6 | 18 | 19 | 20 |

귀리(Oat)

21 |

귀리는 베타글루칸(항암 및 면역증강작용을 가지고 있는 불소화성 다당류) 성분을 포함하고 있다.

22 | 23 | -------------------------------------------------------------------------------- /06/text-shadow1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | text-transform 6 | 23 | 24 | 25 |

HTML5

26 |

HTML5

27 |

HTML5

28 | 29 | -------------------------------------------------------------------------------- /06/text-shadow2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | text-transform 6 | 18 | 19 | 20 |

HTML5

21 | 22 | -------------------------------------------------------------------------------- /06/text-transform.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | text-transform 6 | 10 | 11 | 12 |

Have to study

13 | 18 | 19 | -------------------------------------------------------------------------------- /06/trana.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/06/trana.eot -------------------------------------------------------------------------------- /06/trana.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/06/trana.ttf -------------------------------------------------------------------------------- /06/trana.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/06/trana.woff -------------------------------------------------------------------------------- /06/webfont1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 웹 폰트 사용하기 7 | 22 | 23 | 24 |

Using Default Fonts

25 |

Using Trana Fonts

26 | 27 | -------------------------------------------------------------------------------- /06/webfont2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 웹 폰트 사용하기 7 | 16 | 17 | 18 |

브라우저 기본 글꼴 사용

19 |

나눔고딕 웹 폰트 사용

20 | 21 | -------------------------------------------------------------------------------- /07/bg-color.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 배경색 6 | 20 | 21 | 22 |
23 |

초콜릿(Chocolate)

24 |

초콜릿은 카카오 콩을 재료로 가공한 식품이다. 25 | 숙성한 카카오 콩을 볶은 뒤 이를 갈아서 만든 카카오 매스와 지방 성분만으로 만들어진 코코아 버터를 혼합하여 만드는데, 26 | 설탕 등의 다른 재료를 더 넣어 만들기도 한다. 27 | 카카오 매스의 함량에 따라 다크 초콜릿, 밀크 초콜릿, 화이트 초콜릿으로 구분한다.

28 |
29 | 30 | -------------------------------------------------------------------------------- /07/bg-img.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 배경 이미지 6 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /07/bg-origin.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 배경 이미지 6 | 27 | 28 | 29 |
30 |
31 |
32 | 33 | -------------------------------------------------------------------------------- /07/bg-position.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 배경 이미지 6 | 33 | 34 | 35 |
36 | 39 |
40 |
41 | 44 |
45 | 46 | 47 | -------------------------------------------------------------------------------- /07/color.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Color in Web 7 | 24 | 25 | 26 |

HTML5+CSS3

27 |

HTML5+CSS3

28 |

HTML5+CSS3

29 |

HTML5+CSS3

30 | 31 | -------------------------------------------------------------------------------- /07/colorstop.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 선형 그러데이션 6 | 19 | 20 | 21 |
22 | 23 | -------------------------------------------------------------------------------- /07/ex1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 6 | 배경 그러데이션 7 | 12 | 13 | 14 |
15 | 16 | -------------------------------------------------------------------------------- /07/images/apple-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/07/images/apple-bg.jpg -------------------------------------------------------------------------------- /07/images/bg1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/07/images/bg1.png -------------------------------------------------------------------------------- /07/images/bg3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/07/images/bg3.jpg -------------------------------------------------------------------------------- /07/images/bg4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/07/images/bg4.jpg -------------------------------------------------------------------------------- /07/images/bottom-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/07/images/bottom-bg.jpg -------------------------------------------------------------------------------- /07/images/light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/07/images/light.png -------------------------------------------------------------------------------- /07/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/07/images/logo.png -------------------------------------------------------------------------------- /07/images/mail.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/07/images/mail.jpg -------------------------------------------------------------------------------- /07/images/newBook.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/07/images/newBook.png -------------------------------------------------------------------------------- /07/linear-degree.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 선형 그러데이션 6 | 20 | 21 | 22 |
23 | 24 | -------------------------------------------------------------------------------- /07/linear-position.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 선형 그러데이션 6 | 20 | 21 | 22 |
23 | 24 | -------------------------------------------------------------------------------- /07/precoding.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 맛보기 손코딩 6 | 20 | 21 | 22 |
23 |

background-image 속성을 사용하면 원하는 곳에 배경 이미지를 삽입할 수 있습니다.background-image 속성을 사용하면 원하는 곳에 배경 이미지를 삽입할 수 있습니다.background-image 속성을 사용하면 원하는 곳에 배경 이미지를 삽입할 수 있습니다.

24 |

background-image 속성을 사용하면 원하는 곳에 배경 이미지를 삽입할 수 있습니다.background-image 속성을 사용하면 원하는 곳에 배경 이미지를 삽입할 수 있습니다.background-image 속성을 사용하면 원하는 곳에 배경 이미지를 삽입할 수 있습니다.

25 |
26 | 27 | 28 | -------------------------------------------------------------------------------- /07/quiz-1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 배경 스타일 6 | 24 | 25 | 26 |
27 |

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

28 |

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

29 |
30 | 31 | -------------------------------------------------------------------------------- /07/quiz-2.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 배경 스타일 6 | 25 | 26 | 27 |
28 |

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

29 |

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

30 |
31 | 32 | -------------------------------------------------------------------------------- /07/quiz-3.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 배경 스타일 6 | 35 | 36 | 37 |
38 |
39 |

하루 한 알의 사과는 의사를 멀리 한다

40 |
41 |
42 | 43 | -------------------------------------------------------------------------------- /07/radial-color.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 원형 그러데이션 6 | 27 | 28 | 29 |
30 |
31 | 32 | -------------------------------------------------------------------------------- /07/radial-default.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 원형 그러데이션 6 | 27 | 28 | 29 |
30 |
31 | 32 | -------------------------------------------------------------------------------- /07/radial-position.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 원형 그러데이션 6 | 20 | 21 | 22 |
23 | 24 | -------------------------------------------------------------------------------- /07/repeat-gradient1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 선형 그러데이션 반복 6 | 23 | 24 | 25 |
26 | 27 | -------------------------------------------------------------------------------- /07/repeat-gradient2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 선형 그러데이션 반복 6 | 22 | 23 | 24 |
25 | 26 | -------------------------------------------------------------------------------- /07/sol-1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 배경 스타일 6 | 25 | 26 | 27 |
28 |

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

29 |

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

30 |
31 | 32 | -------------------------------------------------------------------------------- /07/sol-2.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 배경 스타일 6 | 29 | 30 | 31 |
32 |

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

33 |

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

34 |
35 | 36 | -------------------------------------------------------------------------------- /07/sol-3.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 배경 스타일 6 | 36 | 37 | 38 |
39 |
40 |

하루 한 알의 사과는 의사를 멀리 한다

41 |
42 |
43 | 44 | -------------------------------------------------------------------------------- /08/border-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 박스모델 6 | 18 | 19 | 20 |
21 |
22 |
23 | 24 | 25 | -------------------------------------------------------------------------------- /08/border-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 박스모델 6 | 18 | 19 | 20 |
21 |
22 | 23 | 24 | -------------------------------------------------------------------------------- /08/border-3.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 박스모델 6 | 16 | 17 | 18 |

박스 모델

19 |

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

20 | 21 | 22 | -------------------------------------------------------------------------------- /08/box-shadow.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 박스모델 6 | 18 | 19 | 20 |
21 |
22 | 23 | 24 | -------------------------------------------------------------------------------- /08/display-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | display 속성 6 | 20 | 21 | 22 |
23 | 24 | 25 | 26 |
27 |
28 | 29 | 30 | 31 |
32 | 33 | -------------------------------------------------------------------------------- /08/display-2.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | display 속성 6 | 24 | 25 | 26 | 34 | 35 | -------------------------------------------------------------------------------- /08/display-3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | display 속성 6 | 24 | 25 | 26 | 35 | 36 | -------------------------------------------------------------------------------- /08/images/bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/08/images/bg.png -------------------------------------------------------------------------------- /08/images/pet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/08/images/pet.png -------------------------------------------------------------------------------- /08/images/pic1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/08/images/pic1.jpg -------------------------------------------------------------------------------- /08/images/pic2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/08/images/pic2.jpg -------------------------------------------------------------------------------- /08/images/pic3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/08/images/pic3.jpg -------------------------------------------------------------------------------- /08/inline-block.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 블록 레벨과 인라인 레벨 6 | 7 | 8 |

시간이란...

9 |

내일 죽을 것처럼 오늘을 살고

10 |

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

11 | 12 | -------------------------------------------------------------------------------- /08/margin-center.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 박스모델 6 | 14 | 15 | 16 |
17 | 18 | 19 | -------------------------------------------------------------------------------- /08/margin-overlap.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 박스모델 6 | 25 | 26 | 27 |
28 |
29 |
30 | 31 | 32 | -------------------------------------------------------------------------------- /08/margin-overlap2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 박스모델 6 | 26 | 27 | 28 |
29 |
30 |
31 | 32 | 33 | -------------------------------------------------------------------------------- /08/margin.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 박스모델 6 | 17 | 18 | 19 |
20 |
21 |
22 |
23 | 24 | 25 | -------------------------------------------------------------------------------- /08/padding.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 박스모델 6 | 19 | 20 | 21 |
패딩(padding)이란 콘텐츠 영역과 테두리 사이의 여백을 말합니다.
22 |
패딩(padding)이란 콘텐츠 영역과 테두리 사이의 여백을 말합니다.
23 |
패딩(padding)이란 콘텐츠 영역과 테두리 사이의 여백을 말합니다.
24 | 25 | 26 | -------------------------------------------------------------------------------- /08/quiz-2.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | display 속성 6 | 12 | 13 | 14 | 22 | 23 | -------------------------------------------------------------------------------- /08/radius-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 박스모델 6 | 22 | 23 | 24 |
25 |
26 | 27 | 28 | -------------------------------------------------------------------------------- /08/radius-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 박스모델 6 | 20 | 21 | 22 |
23 |
24 | 25 | 26 | -------------------------------------------------------------------------------- /08/radius-3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 박스모델 6 | 19 | 20 | 21 |
22 |
23 |
24 | 25 | 26 | -------------------------------------------------------------------------------- /08/sol-2.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | display 속성 6 | 21 | 22 | 23 | 31 | 32 | -------------------------------------------------------------------------------- /08/width-height.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 박스모델 6 | 21 | 22 | 23 |
24 |
25 | 26 | 27 | -------------------------------------------------------------------------------- /09/2-layout-markup.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 6 | 2단 레이아웃 7 | 8 | 9 |
10 | 13 | 20 |
21 |

본문

22 |

재산권의 행사는 공공복리에 적합하도록 하여야 한다. 정부는 회계연도마다 예산안을 편성하여 회계연도 개시 90일전까지 국회에 제출하고, 국회는 회계연도 개시 30일전까지 이를 의결하여야 한다.

23 | 24 |

대통령의 임기가 만료되는 때에는 임기만료 70일 내지 40일전에 후임자를 선거한다. 제2항과 제3항의 처분에 대하여는 법원에 제소할 수 없다. 언론·출판에 대한 허가나 검열과 집회·결사에 대한 허가는 인정되지 아니한다.

25 |
26 | 30 |
31 | 32 | -------------------------------------------------------------------------------- /09/2-layout.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 2단 레이아웃 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /09/absolute.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CSS 포지셔닝 6 | 25 | 26 | 27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 | 35 | 36 | -------------------------------------------------------------------------------- /09/box-sizing.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | box-sizing 7 | 29 | 30 | 31 |
box-sizing = "content-box"
32 |
box-sizing = "border-box"
33 | 34 | -------------------------------------------------------------------------------- /09/col-count.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | HTML5 레이아웃 6 | 16 | 17 | 18 |
19 |

건강에 좋은 식품 - Super Food

20 |
21 |
22 |

코코넛 오일 : 남미 파나마에서는 “코코넛오일 한 컵이면 모든 병이 낫는다”라고 이야기할 정도로 그 효능이 뛰어나다. 코코넛 오일에 들어있는 중사슬 지방산은 콜레스테롤 수치에 나쁜 영향을 주지 않는 건강한 지방산이다. 또 라우르산이 풍부해 세균을 물리치고 염증을 가라앉히는 효과가 있다. 하루 권장량은 성인기준 2~4스푼(30~40mL) 정도이다.

23 |

블루베리 : 블루베리는 우리 몸이 산화하는 현상을 막아주는 '항산화 물질'이 가장 많은 식품으로 알려졌다. 미국 농무부 인간영양연구소에서 밝힌 자료에 따르면 블루베리의 '안토시아닌'이라는 물질은 시력 향상에 뛰어난 효과가 있다. 그뿐만 아니라 다이어트에도 좋다. 블루베리의 폴리페놀 성분은 체내 지방세포를 녹여주는 역할을 한다. 하루 권장량은 성인기준 50g 전후로, 20~30알 정도이다.

24 |

아몬드 : 혈관질환에 좋은 오메가3, 섬유소, 비타민 E가 풍부해 항산화 효과가 높으며 콜레스테롤 수치를 낮추는 L-아르기닌 등의 좋은 영양소도 들어 있다. 또한, 식욕을 감소시키고 뇌 내 행복감을 촉진하는 세로토닌 분비를 증가시키는 것으로 나타났다. 특히 껍질에 비타민 E, 플라보노이드, 카테킨 등의 항산화 성분이 풍부하니 껍질째 먹는 것이 좋다. 하루 권장량은 30g(23알 내외) 정도이며, 과도하게 섭취하면 장의 흡수기능이 저하되니 주의해야 한다.

25 |
26 | 27 | 28 | -------------------------------------------------------------------------------- /09/col-width.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | HTML5 레이아웃 6 | 17 | 18 | 19 |
20 |

건강에 좋은 식품 - Super Food

21 |
22 |
23 |

코코넛 오일 : 남미 파나마에서는 “코코넛오일 한 컵이면 모든 병이 낫는다”라고 이야기할 정도로 그 효능이 뛰어나다. 코코넛 오일에 들어있는 중사슬 지방산은 콜레스테롤 수치에 나쁜 영향을 주지 않는 건강한 지방산이다. 또 라우르산이 풍부해 세균을 물리치고 염증을 가라앉히는 효과가 있다. 하루 권장량은 성인기준 2~4스푼(30~40mL) 정도이다.

24 |

블루베리 : 블루베리는 우리 몸이 산화하는 현상을 막아주는 '항산화 물질'이 가장 많은 식품으로 알려졌다. 미국 농무부 인간영양연구소에서 밝힌 자료에 따르면 블루베리의 '안토시아닌'이라는 물질은 시력 향상에 뛰어난 효과가 있다. 그뿐만 아니라 다이어트에도 좋다. 블루베리의 폴리페놀 성분은 체내 지방세포를 녹여주는 역할을 한다. 하루 권장량은 성인기준 50g 전후로, 20~30알 정도이다.

25 |

아몬드 : 혈관질환에 좋은 오메가3, 섬유소, 비타민 E가 풍부해 항산화 효과가 높으며 콜레스테롤 수치를 낮추는 L-아르기닌 등의 좋은 영양소도 들어 있다. 또한, 식욕을 감소시키고 뇌 내 행복감을 촉진하는 세로토닌 분비를 증가시키는 것으로 나타났다. 특히 껍질에 비타민 E, 플라보노이드, 카테킨 등의 항산화 성분이 풍부하니 껍질째 먹는 것이 좋다. 하루 권장량은 30g(23알 내외) 정도이며, 과도하게 섭취하면 장의 흡수기능이 저하되니 주의해야 한다.

26 |
27 | 28 | 29 | -------------------------------------------------------------------------------- /09/fixed.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CSS 포지셔닝 6 | 18 | 19 | 20 |
21 |
22 |

fixed 값을 사용하는 요소 역시 absolute 값을 사용하는 요소처럼 문서 흐름과는 상관 없이 좌표로 위치를 결정하지만, 기준이 되는 요소가 부모 요소가 아니라 브라우저 창이 기준이 됩니다. 브라우저 창의 왼쪽 위 모서리 부분을 원점으로 좌표가 계산되고 한번 배치되면 fixed라는 이름처럼 브라우저 창을 스크롤하더라도 계속 고정되어 표시됩니다.

23 |

fixed 값을 사용하는 요소 역시 absolute 값을 사용하는 요소처럼 문서 흐름과는 상관 없이 좌표로 위치를 결정하지만, 기준이 되는 요소가 부모 요소가 아니라 브라우저 창이 기준이 됩니다. 브라우저 창의 왼쪽 위 모서리 부분을 원점으로 좌표가 계산되고 한번 배치되면 fixed라는 이름처럼 브라우저 창을 스크롤하더라도 계속 고정되어 표시됩니다.

24 |
25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /09/float-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 박스모델 6 | 20 | 21 | 22 |
23 | 24 |

바쁜 3, 4학년을 위한 빠른 분수

25 |

3, 4학년이 꼭 알아야 할 분수를 한 권에 모았어요!​

26 |

한국 교육과정평가원이 최근 발표한 보고서에 따르면 ‘수포자’는 초등 3학년 때 분수를 배우면서 시작된다고 합니다. 분수를 어려워하는 이유는 분모와 분자, 2개의 수가 나와 낯설기 때문입니다. 이렇게 낯설고 어려운 분수, 어떻게 공부해야 할까요?

27 |
28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /09/float-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 박스모델 6 | 31 | 32 | 33 |
박스1
34 |
박스2
35 |
박스3
36 |
박스4
37 | 38 | 39 | -------------------------------------------------------------------------------- /09/float-3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 박스모델 6 | 27 | 28 | 29 |
박스1
30 |
박스2
31 |
박스3
32 |
박스4
33 | 34 | 35 | -------------------------------------------------------------------------------- /09/images/cover.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/09/images/cover.jpg -------------------------------------------------------------------------------- /09/images/pic1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/09/images/pic1.jpg -------------------------------------------------------------------------------- /09/images/pic2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/09/images/pic2.jpg -------------------------------------------------------------------------------- /09/images/pic3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/09/images/pic3.jpg -------------------------------------------------------------------------------- /09/images/tomato.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/09/images/tomato.jpg -------------------------------------------------------------------------------- /09/quiz-2.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 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 |
2015 국민 독서실태
구분성인학생
독서율65.3%94.9%
연평균 독서량9.1권29.8권
공공도서관 이용률28.2%64.9%
35 | 36 | 37 | -------------------------------------------------------------------------------- /09/relative.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | CSS 포지셔닝 6 | 24 | 25 | 26 |
박스1
27 |
박스2
28 | 29 | 30 | -------------------------------------------------------------------------------- /09/sol-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 표 스타일 6 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 |
2015 국민 독서실태
구분성인학생
독서율65.3%94.9%
연평균 독서량9.1권29.8권
공공도서관 이용률28.2%64.9%
52 | 53 | 54 | -------------------------------------------------------------------------------- /09/table-align.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Table CSS 6 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |
vertical-alignment
alignmentalignmentalignment
28 | 29 | 30 | -------------------------------------------------------------------------------- /09/table-css1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 표 스타일 6 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 |
프로축구 경기 일정
울산울산 vs 인천
부산부산 vs 대전
서울서울 vs 강원
36 | 37 | 38 | -------------------------------------------------------------------------------- /09/table-css2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 표 스타일 6 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 |
프로축구 경기 일정
울산울산 vs 인천
부산부산 vs 대전
서울서울 vs 강원
37 | 38 | 39 | -------------------------------------------------------------------------------- /09/table-layout1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 표 스타일 6 | 21 | 22 | 23 |

Table Layout

24 | 25 | 26 | 29 | 32 | 33 |
27 | 한글로띄어쓰기없기길게붙여쓰기 28 | 30 | long_description_without_space 31 |
34 | 35 | 36 | -------------------------------------------------------------------------------- /09/table-layout2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 표 스타일 6 | 26 | 27 | 28 |

Table Layout

29 | 30 | 31 | 34 | 37 | 38 |
32 | 한글로띄어쓰기없기길게붙여쓰기 33 | 35 | long_description_without_space 36 |
39 | 40 | 41 | -------------------------------------------------------------------------------- /09/table-width.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 표 스타일 6 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 |
프로축구 경기 일정
울산울산 vs 인천
부산부산 vs 대전
서울서울 vs 강원
35 | 36 | 37 | -------------------------------------------------------------------------------- /09/visibility.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | visibility 속성 6 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /09/z-index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | z-index 속성 6 | 36 | 37 | 38 |
39 |
1
40 |
2
41 |
3
42 |
43 | 44 | -------------------------------------------------------------------------------- /10/header-nav.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 요안도라 6 | 9 | 10 | 11 | 12 |
13 |
14 |

Joandora

15 |

가장 제주다운 수산리집

16 |
17 | 25 | 26 |
27 | 28 | 29 | -------------------------------------------------------------------------------- /10/html5doc.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 내가 처음 만드는 HTML 문서 6 | 7 | 8 |
9 |

애완견 종류

10 | 18 |
19 |
20 |

활달한 강아지

21 |
22 |

요크셔테리어

23 |

생기있고 활달한 성질을 가지고 있으며 자신보다 몸집이 큰 개나 집에 들어온 침입자를 겁내는 일이 없어 좋은 번견이고 우리나라 최고의의 가정견으로 자리 잡고 있다.

24 |
25 |
26 |

말티즈

27 |

애정이 많고, 충실하며 활발한 성격을 소유하고있다. 이 종은 1급 가정견으로 요크셔테리어와 함께 우리나라 최고의 가정견으로 자리잡고 있다.

28 |
29 |
30 |

포메라이언

31 |

활기차고 명랑한 개로 유명하고, 걷는 모습이 우아하다.충실하고 우호적인 성격이 가장 먼저 거론된다.

32 |
33 |
34 |

골든 리트리버

35 |

이 견종은 충성심이 강하고 성격이 활달하여 어린아이나 여성이 상대하기에 적합한 견종이다.참을성 또한 강하여 현재는실내에서도 많이 길러지고 있다.

36 |
37 |
38 | 41 | 42 | -------------------------------------------------------------------------------- /10/iframe.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | iframe 6 | 13 | 16 | 17 | 18 | 19 |
20 |

iframe 태그를 이용해 외부 문서(사이트) 포함시키기

21 |
22 | 23 |
24 | 25 |
26 | 27 | 28 | -------------------------------------------------------------------------------- /10/images/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/10/images/1.jpg -------------------------------------------------------------------------------- /10/images/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/10/images/1.png -------------------------------------------------------------------------------- /10/images/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/10/images/2.jpg -------------------------------------------------------------------------------- /10/images/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/10/images/2.png -------------------------------------------------------------------------------- /10/images/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/10/images/3.png -------------------------------------------------------------------------------- /10/images/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/10/images/4.jpg -------------------------------------------------------------------------------- /10/images/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/10/images/4.png -------------------------------------------------------------------------------- /10/images/banner2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/10/images/banner2.png -------------------------------------------------------------------------------- /10/images/bg-note.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/10/images/bg-note.png -------------------------------------------------------------------------------- /10/images/bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/10/images/bg.png -------------------------------------------------------------------------------- /10/images/bg2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/10/images/bg2.png -------------------------------------------------------------------------------- /10/images/nav2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/10/images/nav2.png -------------------------------------------------------------------------------- /10/images/top-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/10/images/top-bg.jpg -------------------------------------------------------------------------------- /11/CalmBay.swf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/11/CalmBay.swf -------------------------------------------------------------------------------- /11/audio1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 오디오 재생하기 7 | 15 | 16 | 17 | 18 |
19 | 20 | -------------------------------------------------------------------------------- /11/audio2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 오디오 재생하기 7 | 15 | 16 | 17 | 18 |
19 | 20 | -------------------------------------------------------------------------------- /11/fullvideo.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 동영상 배경 6 | 25 | 28 | 29 | 30 | 31 |
32 |

사람을 구체적으로 도와주는 책

33 |

이지스퍼블리싱

34 |
35 | 36 | 37 | -------------------------------------------------------------------------------- /11/images/bg2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/11/images/bg2.jpg -------------------------------------------------------------------------------- /11/images/flame.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/11/images/flame.jpg -------------------------------------------------------------------------------- /11/media/Beach.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/11/media/Beach.mp4 -------------------------------------------------------------------------------- /11/media/Beach.webm: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/11/media/Beach.webm -------------------------------------------------------------------------------- /11/media/Fireworks.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/11/media/Fireworks.mp4 -------------------------------------------------------------------------------- /11/media/Fireworks.webm: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/11/media/Fireworks.webm -------------------------------------------------------------------------------- /11/media/Painting.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/11/media/Painting.mp4 -------------------------------------------------------------------------------- /11/media/Painting.vtt: -------------------------------------------------------------------------------- 1 | WEBVTT 2 | 3 | 00:00.000 --> 00:02.172 4 | 예술이란 5 | 6 | 00:02.172 --> 00:05.719 7 | 자연이 인간에 투영된 것입니다 8 | 9 | 00:05.719 --> 00:07.716 10 | 중요한 것은 11 | 12 | 00:07.716 --> 00:11.061 13 | 깨끗하게 투영될 수 있도록 14 | 15 | 00:11.061 --> 00:20.879 16 | 늘 깨끗하게 거울을 닦는 일입니다 -------------------------------------------------------------------------------- /11/media/Painting.webm: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/11/media/Painting.webm -------------------------------------------------------------------------------- /11/media/Wildlife.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/11/media/Wildlife.mp4 -------------------------------------------------------------------------------- /11/media/Wildlife.webm: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/11/media/Wildlife.webm -------------------------------------------------------------------------------- /11/media/bali.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/11/media/bali.mp4 -------------------------------------------------------------------------------- /11/media/bali.vtt: -------------------------------------------------------------------------------- 1 | WEBVTT 2 | 3 | 00:00.000 --> 00:10.058 4 | [자카르타/따만미니] 인도네시아 여러 섬의 삶의 모습을 보여주는 곳 5 | 6 | 00:10.058 --> 00:34.146 7 | [발리/울루와뜨 사원] 싸롱을 걸쳐야 하며 원숭이가 사방에 ... 8 | 9 | 00:34.146 --> 00:48.506 10 | [발리/짐바란 비치] 석양을 보며 씨푸드를 즐길 수 있는 짐바란 비치 11 | 12 | 00:48.506 --> 00:55.646 13 | [발리/따나롯 사원] 바다를 가로질러 가야 닿을 수 있는 해상 사원 14 | 15 | 00:55.646 --> 01:09.466 16 | [발리/울룬다누 사원] 산 정상의 브라딴 호수에 있는 물 위의 사원 17 | 18 | 01:09.466 --> 01:16.546 19 | 해질녘의 바닷가. 모든 걱정은 내일로 미루고 ... 20 | -------------------------------------------------------------------------------- /11/media/bali.webm: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/11/media/bali.webm -------------------------------------------------------------------------------- /11/media/bgsound.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/11/media/bgsound.mp3 -------------------------------------------------------------------------------- /11/media/bgsound2.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/11/media/bgsound2.mp3 -------------------------------------------------------------------------------- /11/media/flame.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/11/media/flame.mp4 -------------------------------------------------------------------------------- /11/myTrack-result.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 비디오 재생하기 7 | 13 | 14 | 15 | 17 | 22 | 23 | -------------------------------------------------------------------------------- /11/myTrack.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 비디오 재생하기 7 | 13 | 14 | 15 | 17 | 20 | 21 | -------------------------------------------------------------------------------- /11/myVideo-result.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 비디오 삽입하기 7 | 14 | 15 | 16 |

밤 하늘을 수놓는 불꽃

17 | 22 | 23 | -------------------------------------------------------------------------------- /11/myVideo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 비디오 삽입하기 6 | 13 | 14 | 15 |

밤 하늘을 수놓는 불꽃

16 | 17 | -------------------------------------------------------------------------------- /11/quiz-1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 6 | 멀티미디어 재생하기 7 | 14 | 15 | 16 |
17 |

오디오 재생하기

18 | 19 |
20 | 21 | -------------------------------------------------------------------------------- /11/quiz-2.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 6 | 멀티미디어 재생하기 7 | 14 | 15 | 16 |
17 |

SUMMER BEACH

18 | 19 |
20 | 21 | -------------------------------------------------------------------------------- /11/sol-1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 6 | 멀티미디어 재생하기 7 | 14 | 15 | 16 |
17 |

오디오 재생하기

18 | 19 |
20 | 21 | -------------------------------------------------------------------------------- /11/sol-2.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 6 | 멀티미디어 재생하기 7 | 14 | 15 | 16 |
17 |

SUMMER BEACH

18 | 22 |
23 | 24 | -------------------------------------------------------------------------------- /11/video1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 비디오 재생하기 6 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /11/video2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 비디오 재생하기 6 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /11/video3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 비디오 재생하기 6 | 12 | 13 | 14 | 18 | 19 | -------------------------------------------------------------------------------- /11/video4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 비디오 재생하기 6 | 12 | 13 | 14 | 19 | 20 | -------------------------------------------------------------------------------- /11/video5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 비디오 재생하기 6 | 12 | 13 | 14 | 19 | 20 | -------------------------------------------------------------------------------- /12/adjacent.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 요안도라 6 | 12 | 13 | 14 | 15 |
16 |

예약 방법 및 요금

17 | 21 | 27 |
28 | 29 | 30 | -------------------------------------------------------------------------------- /12/after.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | link 스타일 6 | 24 | 27 | 28 | 29 | 30 |
31 |

제품 목록

32 | 38 |
39 | 40 | 41 | -------------------------------------------------------------------------------- /12/attr1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 속성 선택자 6 | 25 | 26 | 27 | 28 | 35 | 36 | -------------------------------------------------------------------------------- /12/attr2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 속성 선택자 6 | 23 | 24 | 25 | 26 |

HTML5 표준안 사이트

27 | 32 | 33 | -------------------------------------------------------------------------------- /12/attr3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 속성 선택자 6 | 29 | 30 | 31 | 32 | 38 | 39 | -------------------------------------------------------------------------------- /12/attr4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 속성 선택자 6 | 29 | 30 | 31 | 32 | 38 | 39 | -------------------------------------------------------------------------------- /12/attr5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 속성 선택자 6 | 33 | 34 | 35 | 36 | 42 | 43 | -------------------------------------------------------------------------------- /12/attr6.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 속성 선택자 6 | 26 | 27 | 28 | 29 |

회사 소개 파일 다운 받기

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

HTML5 참고 사이트

27 |

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

28 | 34 | 35 | -------------------------------------------------------------------------------- /12/child.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 요안도라 6 | 11 | 12 | 13 | 14 |
15 |

예약 방법 및 요금

16 |

요안도라에 예약하려면?

17 | 33 |
34 | 35 | 36 | -------------------------------------------------------------------------------- /12/descendant.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 요안도라 6 | 11 | 12 | 13 | 14 |
15 |

예약 방법 및 요금

16 |

요안도라에 예약하려면? 17 |

33 |
34 | 35 | 36 | -------------------------------------------------------------------------------- /12/html-basic.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CSS 적용해 보기 6 | 7 | 8 |

CSS

9 |

웹 문서의 디자인과 내용을 분리합니다

10 |

웹 표준에 의한 웹 문서는 디자인과 내용이 분리되어 있습니다.

11 |

내용은 HTML을 이용해 구성하고, 디자인은 CSS를 이용해 꾸미는 것입니다.

12 | 13 | -------------------------------------------------------------------------------- /12/images/ch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/12/images/ch.png -------------------------------------------------------------------------------- /12/images/excel_icon.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/12/images/excel_icon.gif -------------------------------------------------------------------------------- /12/images/header-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/12/images/header-bg.png -------------------------------------------------------------------------------- /12/images/hwp_icon.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/12/images/hwp_icon.gif -------------------------------------------------------------------------------- /12/images/jp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/12/images/jp.png -------------------------------------------------------------------------------- /12/images/naples.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/12/images/naples.png -------------------------------------------------------------------------------- /12/images/newwindow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/12/images/newwindow.png -------------------------------------------------------------------------------- /12/images/rio.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/12/images/rio.png -------------------------------------------------------------------------------- /12/images/sydney.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/12/images/sydney.png -------------------------------------------------------------------------------- /12/images/tangerines.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/12/images/tangerines.jpg -------------------------------------------------------------------------------- /12/images/us.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/12/images/us.png -------------------------------------------------------------------------------- /12/nth.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 가상 클래스 6 | 29 | 30 | 31 |
32 |

건강에 좋은 건강 식품

33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 |
블루베리
귀리
토마토
시금치
적포도주
견과류
브로콜리
연어
마늘
녹차
65 |
66 | 67 | -------------------------------------------------------------------------------- /12/quiz-1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | CSS 선택자 6 | 7 | 8 |

이미지 위로 마우스 포인터를 올려보세요

9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /12/quiz-2.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | CSS 선택자 6 | 22 | 23 | 24 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /12/sibling.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 요안도라 6 | 12 | 13 | 14 | 15 |
16 |

예약 방법 및 요금

17 | 21 | 27 |
28 | 29 | 30 | -------------------------------------------------------------------------------- /12/sol-1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | CSS 선택자 6 | 11 | 12 | 13 |

이미지 위로 마우스 포인터를 올려보세요

14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /12/sol-2.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | CSS 선택자 6 | 31 | 32 | 33 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /12/states.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 가상 클래스 6 | 25 | 26 | 27 |
28 |
29 | 사용자 정보 30 | 31 |
32 |
33 | 신청 과목 34 |

이 달에 신청할 과목을 선택하세요

35 | 36 | 37 | 38 |
39 |
40 | 41 | -------------------------------------------------------------------------------- /13/images/bus.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/13/images/bus.jpg -------------------------------------------------------------------------------- /13/images/coffee.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/13/images/coffee.jpg -------------------------------------------------------------------------------- /13/images/fruit.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/13/images/fruit.jpg -------------------------------------------------------------------------------- /13/images/lamp.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/13/images/lamp.jpg -------------------------------------------------------------------------------- /13/images/prod1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/13/images/prod1.jpg -------------------------------------------------------------------------------- /13/images/prod2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/13/images/prod2.jpg -------------------------------------------------------------------------------- /13/images/prod3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/13/images/prod3.jpg -------------------------------------------------------------------------------- /13/images/rose.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/13/images/rose.jpg -------------------------------------------------------------------------------- /13/images/sunset.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/13/images/sunset.jpg -------------------------------------------------------------------------------- /13/quiz-1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | CSS 애니메이션 6 | 9 | 22 | 23 | 24 | 25 |
26 | 27 | -------------------------------------------------------------------------------- /13/quiz-2.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | CSS 애니메이션 6 | 9 | 18 | 19 | 20 | 21 |
22 | 23 |
24 | 25 | -------------------------------------------------------------------------------- /13/quiz-3.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | CSS3 트랜스폼과 트랜지션 6 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /13/rotate.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | Transform 6 | 29 | 30 | 31 |
32 |
33 | 34 |
35 |
36 |
37 |
38 | 39 |
40 |
41 | 42 | 43 | -------------------------------------------------------------------------------- /13/sol-1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | CSS 애니메이션 6 | 9 | 29 | 30 | 31 | 32 |
33 | 34 | -------------------------------------------------------------------------------- /13/sol-2.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | CSS 애니메이션 6 | 9 | 27 | 28 | 29 | 30 |
31 | 32 |
33 | 34 | -------------------------------------------------------------------------------- /13/sol-3.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | CSS 애니메이션 6 | 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /13/tr-samples.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | Transform 6 | 33 | 34 | 35 | 36 |
37 |
38 | 39 | -------------------------------------------------------------------------------- /13/tr1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Transform 6 | 27 | 28 | 29 | 30 |
31 | 32 | -------------------------------------------------------------------------------- /13/tr2.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | Transform 6 | 36 | 37 | 38 | 39 |

!

40 | 41 | -------------------------------------------------------------------------------- /13/tr3.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | Transform 6 | 28 | 29 | 30 | 31 |
32 | 33 | -------------------------------------------------------------------------------- /13/tr4.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | Transform 6 | 27 | 28 | 29 | 30 |
31 | 32 | -------------------------------------------------------------------------------- /14/cars.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/14/cars.mp4 -------------------------------------------------------------------------------- /14/fluid-font2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Fluid Grid Layout 6 | 7 | 21 | 22 | 23 | 24 |
25 |
26 |

가변 그리드 레이아웃

27 |

가변 폰트

28 |
29 |
30 | 31 | -------------------------------------------------------------------------------- /14/fluid-font3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Fluid Grid Layout 6 | 7 | 24 | 25 | 26 | 27 |
28 |
29 |

가변 그리드 레이아웃

30 |

가변 폰트

31 |
32 |
33 | 34 | -------------------------------------------------------------------------------- /14/fluid-img3.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | Fluid Image 6 | 7 | 8 | 9 | 10 | 색연필 제품 이미지 11 | 12 | -------------------------------------------------------------------------------- /14/fluid-img4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Fluid Image 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | fill with coffee 15 | 16 | 17 | -------------------------------------------------------------------------------- /14/fluid-video.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | Fluid Image 6 | 7 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /14/images/coffee.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/14/images/coffee.jpg -------------------------------------------------------------------------------- /14/images/fireworks.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/14/images/fireworks.png -------------------------------------------------------------------------------- /14/images/header.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/14/images/header.jpg -------------------------------------------------------------------------------- /14/images/ice.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/14/images/ice.jpg -------------------------------------------------------------------------------- /14/images/map.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/14/images/map.jpg -------------------------------------------------------------------------------- /14/images/pencil-hd.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/14/images/pencil-hd.jpg -------------------------------------------------------------------------------- /14/images/pencil-min.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/14/images/pencil-min.jpg -------------------------------------------------------------------------------- /14/images/pencil.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/14/images/pencil.jpg -------------------------------------------------------------------------------- /14/images/shop-large.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/14/images/shop-large.jpg -------------------------------------------------------------------------------- /14/images/shop-medium.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/14/images/shop-medium.jpg -------------------------------------------------------------------------------- /14/images/shop-small.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/14/images/shop-small.jpg -------------------------------------------------------------------------------- /14/images/shop.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/14/images/shop.jpg -------------------------------------------------------------------------------- /15/css/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin:0; 3 | padding:0; 4 | box-sizing: border-box; 5 | } 6 | body { 7 | background:rgb(9, 100, 160); 8 | } 9 | #container { 10 | width:320px; 11 | margin:50px auto; 12 | } 13 | .card { 14 | position:relative; 15 | width:300px; 16 | height:500px; 17 | margin:20px 10px; 18 | border:1px solid #0f0f0f33; 19 | background-color:#ffffff; 20 | } 21 | .words { 22 | position:absolute; 23 | left:10px; /* 텍스트 left 위치 */ 24 | top:300px; /* 텍스트 top 위치 */ 25 | padding:10px; 26 | text-align:center; 27 | } -------------------------------------------------------------------------------- /15/images/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/15/images/1.jpg -------------------------------------------------------------------------------- /15/images/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/15/images/2.jpg -------------------------------------------------------------------------------- /15/images/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/15/images/3.jpg -------------------------------------------------------------------------------- /15/images/bg0.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/15/images/bg0.jpg -------------------------------------------------------------------------------- /15/images/bg1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/15/images/bg1.jpg -------------------------------------------------------------------------------- /15/images/bg2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/15/images/bg2.jpg -------------------------------------------------------------------------------- /15/images/bg3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/15/images/bg3.jpg -------------------------------------------------------------------------------- /15/index-result.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | INSPIRATIONAL QUOTES 8 | 9 | 10 | 11 |
12 |
13 | 14 |
15 |

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

16 |

- Jim Bishop

17 |
18 |
19 |
20 | 21 |
22 |

웃음은 마음의 조깅이다.

23 |

- Norman Cousins

24 |
25 |
26 |
27 | 28 |
29 |

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

30 |

- Austin Phelps

31 |
32 |
33 |
34 | 35 | -------------------------------------------------------------------------------- /15/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | INSPIRATIONAL QUOTES 8 | 9 | 10 | 11 |
12 |
13 | 14 |
15 |

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

16 |

- Jim Bishop

17 |
18 |
19 |
20 | 21 |
22 |

웃음은 마음의 조깅이다.

23 |

- Norman Cousins

24 |
25 |
26 |
27 | 28 |
29 |

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

30 |

- Austin Phelps

31 |
32 |
33 |
34 | 35 | 36 | -------------------------------------------------------------------------------- /15/mq-orientation.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Media Queries 6 | 7 | 19 | 20 | 21 | 22 |

Meida Query

23 | 24 | -------------------------------------------------------------------------------- /15/mq.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Media Queries 6 | 7 | 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /16/flex-align-self.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 6 | 플렉스 박스 7 | 33 | 34 | 35 |
36 |

1

37 |

2

38 |

3

39 |
40 | 41 | 42 | -------------------------------------------------------------------------------- /16/flex-flex.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 6 | 플렉스 박스 7 | 41 | 42 | 43 |
44 |

1

45 |

2

46 |

3

47 |
48 | 49 | 50 | -------------------------------------------------------------------------------- /16/flex-order.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 플렉스 박스 7 | 35 | 36 | 37 |
38 |

box1

39 |

box2

40 |

box3

41 |
42 | 43 | -------------------------------------------------------------------------------- /16/flex1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 플렉스 박스 7 | 26 | 27 | 28 |
29 |

1

30 |

2

31 |

3

32 |
33 | 34 | -------------------------------------------------------------------------------- /16/flex2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 플렉스 박스 7 | 27 | 28 | 29 |
30 |

1

31 |

2

32 |

3

33 |
34 | 35 | -------------------------------------------------------------------------------- /16/flex3.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 6 | 플렉스 박스 7 | 29 | 30 | 31 |
32 |

1

33 |

2

34 |

3

35 |
36 | 37 | -------------------------------------------------------------------------------- /16/flex4.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 6 | 플렉스 박스 7 | 29 | 30 | 31 |
32 |

1

33 |

2

34 |

3

35 |
36 | 37 | -------------------------------------------------------------------------------- /16/images/dish1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/16/images/dish1.jpg -------------------------------------------------------------------------------- /16/images/dish2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/16/images/dish2.jpg -------------------------------------------------------------------------------- /16/images/dish3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/16/images/dish3.jpg -------------------------------------------------------------------------------- /16/images/dish4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/16/images/dish4.jpg -------------------------------------------------------------------------------- /16/images/dish5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/16/images/dish5.jpg -------------------------------------------------------------------------------- /16/images/food.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/16/images/food.jpg -------------------------------------------------------------------------------- /16/index-result.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 6 | 솔로의 식탁 7 | 8 | 9 | 10 |
11 |
12 |

솔로의 식탁

13 |
14 | 31 |
32 | 33 |
34 | 37 |
38 | 39 | -------------------------------------------------------------------------------- /16/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 솔로의 식탁 6 | 7 | 8 | 9 | 10 |
11 |
12 |

솔로의 식탁

13 |
14 | 31 |
32 | 33 |
34 | 37 |
38 | 39 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ### (2020년판) 2 | 3 | ![](https://user-images.githubusercontent.com/5915404/159109194-e5e30071-773c-441e-9075-d8be93e9d6a8.jpeg) 4 | 5 | 6 | # [Do it! HTML5+CSS3 웹 표준의 정석] 소스 파일 다운로드 방법 7 | 8 | 9 | --------------------------------------------- 10 | 11 | **현재 리포지토리에 올라와 있는 파일은 2020년판, [Do it! HTML5+CSS3 웹 표준의 정석]의 실습 파일입니다.** 12 | 13 | 1. 파일 목록 오른쪽 위에 있는 [Colone or download]를 클릭합니다. 14 | 2. [Download ZIP]을 클릭합니다. 15 | 3. 다운로드한 파일의 이름은 html5-css3-master.zip입니다. 적절한 이름으로 바꿔서 사용하세요. 16 | 4. 다운로드한 파일의 압축을 풉니다. 17 | 18 | ![](images/download.png) 19 | 20 | ---------------------------------------------- 21 | -------------------------------------------------------------------------------- /images/download.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/images/download.png -------------------------------------------------------------------------------- /images/fork.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/funnycom/html5-css3/1c4413938c4b8174e8bedc8ae404f73ea355ae78/images/fork.png --------------------------------------------------------------------------------