├── .gitignore ├── README.md ├── 01-mix-html-css ├── style.css ├── contact-me.html └── index.html ├── .gitattributes ├── 02-box-model ├── box-model.gif └── index.html ├── 12-media-queries └── index.html ├── 09-transitions └── index.html ├── 10-transformations └── index.html ├── 03-inline-block-inline-block └── index.html ├── 08-css-state └── index.html ├── 11-animations └── index.html ├── 05-flex └── index.html ├── 06-selectors └── index.html └── 04-position └── index.html /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # kakao-clone-examples 2 | -------------------------------------------------------------------------------- /01-mix-html-css/style.css: -------------------------------------------------------------------------------- 1 | h1 { 2 | color: green; 3 | } 4 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto -------------------------------------------------------------------------------- /02-box-model/box-model.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nomadcoders/kakao-clone-examples/HEAD/02-box-model/box-model.gif -------------------------------------------------------------------------------- /01-mix-html-css/contact-me.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Contact Me 8 | 9 | 10 | 11 |

Contact me Title

12 | 13 | 14 | -------------------------------------------------------------------------------- /01-mix-html-css/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Home 8 | 9 | 10 | 11 | 16 | 17 | 18 |

Home Title

19 | 20 | 21 | -------------------------------------------------------------------------------- /12-media-queries/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Media Queries 8 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /09-transitions/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Transitions 8 | 19 | 20 | 21 | 22 | Text 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /10-transformations/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Transformations 8 | 19 | 20 | 21 |
22 | 23 | 24 | -------------------------------------------------------------------------------- /03-inline-block-inline-block/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Inline Example 8 | 17 | 18 | 19 | 1 20 | 1 21 | 1 22 | 23 | 24 | -------------------------------------------------------------------------------- /08-css-state/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CSS States 8 | 26 | 27 | 28 | 29 | lalalalalala 30 | Naver 31 | 32 | 33 | -------------------------------------------------------------------------------- /11-animations/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Transformations 8 | 37 | 38 | 39 |
11
40 | 41 | 42 | -------------------------------------------------------------------------------- /02-box-model/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Box Model 8 | 33 | 34 | 35 |
36 |
37 |
38 | 39 | 40 | -------------------------------------------------------------------------------- /05-flex/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Flex 8 | 31 | 32 | 33 |
34 |
1
35 |
2
36 |
3
37 |
4
38 |
5
39 |
6
40 |
7
41 |
8
42 |
9
43 |
10
44 |
45 | 46 | 47 | -------------------------------------------------------------------------------- /06-selectors/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Selectors and Pseudo Selectors 8 | 31 | 32 | 33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 | 47 | 48 |
49 |
50 | 51 | 52 | -------------------------------------------------------------------------------- /04-position/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Position 8 | 50 | 51 | 52 |
53 |
54 |
55 | 62 | 63 | 64 | --------------------------------------------------------------------------------