[Clone Coding] KAKAO Talk on HTML
1. 파일과 폴더 생성
구성할 화면 6가지
- Friend
- Chats
- Find
- More
- Chat
- profile
구성할 화면이 6가지라는 의미는 6개의 html 파일을 만들어야 한다는 것이다.
6개의 html 파일과 2개의 폴더를 아래와 같이 만든다.
2. 헤더 만들기
헤더는 바로 맨 위에 프로필명 있는 구획을 의미한다.
index.html
Header
1// head
2<!DOCTYPE html>
3<html lang="en">
4<head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <title>Friends</title>
9</head>
헤더 안에 2개의 div 만든다.
- Top Header : 맨 상단(와이파이, 시간 표시된 곳)
- Bottom Header : manage, Friends라고 작성된 헤더
Top Header에는 column이 3개 있으므로 만들어준다.
1<div class="header__top"></div>
2 <div class="header__column"></div>
3 <div class="header__column"></div>
4 <div class="header__column"></div>
5<div class="header__bottom"></div>
Top Header
첫번째 Header column에는 비행기, 와이파이 아이콘이 필요.
두번째 Header column에는 header__time이라는 span 만듦.
세번째 Header column에는 달 아이콘, 블루투스 아이콘, header__battery라는 span 만듦
1<header>
2 <div class="header__top"></div>
3 <div class="header__column"></div>
4 <!-- plane icon -->
5 <!-- wifi icon -->
6 <div class="header__column"></div>
7 <span class="header__time">18:38</span>
8 <div class="header__column"></div>
9 <!-- moon icon -->
10 <!-- bluetooth icon -->
11 <span class="header__battery">66% <!--battery icon--> </span>
12 <div class="header__bottom"></div>
13</header>
아이콘 가져오기
fontawesome(https://fontawesome.com/icons?from=io)이라는 사이트에서 css를 이용하여 다양한 아이콘을 가져올 수 있다.
https://fontawesome.com/get-started 참고해서 링크를 문서에 붙여넣기 한다. 이 링크를 붙이고 나면, fontawesome에 있는 다양한 아이콘들을 불러와서 쓸 수 있다.
위치 : 상단 head > meat > 다음 줄
1<head>
2 <meta charset="UTF-8">
3 <meta name="viewport" content="width=device-width, initial-scale=1.0">
4 <meta http-equiv="X-UA-Compatible" content="ie=edge">
5 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
6 ....
7</head>
적절한 아이콘을 찾아서 제공하는 링크를 붙여 넣는다.
1<div class="header__top">
2 <div class="header__column">
3 <i class="fas fa-plane"></i> <!-- plane icon -->
4 <i class="fas fa-wifi"></i> <!-- wifi icon -->
5 </div>
6 <div class="header__column">
7 <span class="header__time">18:38</span>
8 </div>
9 <div class="header__column">
10 <i class="fas fa-moon"></i> <!-- moon icon -->
11 <i class="fab fa-bluetooth-b"></i> <!-- bluetooth icon -->
12 <span class="header__battery">100% <i class="fas fa-battery-full"></i>
13 </span>
14 </div>
15</div>
Bottom Header
화면을 살펴보면 중앙에 큰 텍스트가 있고, 왼쪽, 오른쪽에 아이콘이 있다.
div column을 3개 만든다.
column1 : manaege
column2 : Friends
column3 : setting
1<div class="header__bottom">
2 <div class="header__column">
3 <span class="header__text">Manage</span>
4 </div>
5 <div class="header__column">
6 <span class="header__text">Friends <span class="header__number">1</span></span>
7 </div>
8 <div class="header__column">
9 <i class="fa fa-cog fa-lg"></i>
10 </div>
11</div>
전체코드
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
8 <title>Friends</title>
9</head>
10
11<body>
12 <header>
13 <div class="header__top">
14 <div class="header__column">
15 <i class="fas fa-plane"></i> <!-- plane icon -->
16 <i class="fas fa-wifi"></i> <!-- wifi icon -->
17 </div>
18 <div class="header__column">
19 <span class="header__time">18:38</span>
20 </div>
21 <div class="header__column">
22 <i class="fas fa-moon"></i> <!-- moon icon -->
23 <i class="fab fa-bluetooth-b"></i> <!-- bluetooth icon -->
24 <span class="header__battery">100%<i class="fas fa-battery-full"></i>
25 </span>
26 </div>
27 </div>
28 <div class="header__bottom">
29 <div class="header__column">
30 <span class="header__text">Manage</span>
31 </div>
32 <div class="header__column">
33 <span class="header__text">Friends <span class="header__number">1</span></span>
34 </div>
35 <div class="header__column">
36 <i class="fa fa-cog fa-lg"></i>
37 </div>
38 </div>
39 </header>
40</body>
41</html>
- 결과
chats.html
index.html 내용을 복사 붙여넣기 한 후 수정한다.
title -> Chats
숫자 span -> 화살표 아이콘
컬럼이 3개가 아니라 두개.
Manage -> Edit
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
8 <title>Chats</title>
9</head>
10
11<body>
12 <header>
13 <div class="header__top">
14 <div class="header__column">
15 <i class="fas fa-plane"></i> <!-- plane icon -->
16 <i class="fas fa-wifi"></i> <!-- wifi icon -->
17 </div>
18 <div class="header__column">
19 <span class="header__time">18:38</span>
20 </div>
21 <div class="header__column">
22 <i class="fas fa-moon"></i> <!-- moon icon -->
23 <i class="fab fa-bluetooth-b"></i> <!-- bluetooth icon -->
24 <span class="header__battery">100%<i class="fas fa-battery-full"></i>
25 </span>
26 </div>
27 </div>
28 <div class="header__bottom">
29 <div class="header__column">
30 <span class="header__text">Edit</span>
31 </div>
32 <div class="header__column">
33 <span class="header__text">Chats<i class="fa fa-caret-down"></i></span>
34 </div>
35 </div>
36 </header>
37</body>
38</html>
- 결과
Find.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
8 <title>Find</title>
9</head>
10
11<body>
12 <header>
13 <div class="header__top">
14 <div class="header__column">
15 <i class="fas fa-plane"></i> <!-- plane icon -->
16 <i class="fas fa-wifi"></i> <!-- wifi icon -->
17 </div>
18 <div class="header__column">
19 <span class="header__time">18:38</span>
20 </div>
21 <div class="header__column">
22 <i class="fas fa-moon"></i> <!-- moon icon -->
23 <i class="fab fa-bluetooth-b"></i> <!-- bluetooth icon -->
24 <span class="header__battery">100%<i class="fas fa-battery-full"></i>
25 </span>
26 </div>
27 </div>
28 <div class="header__bottom">
29 <div class="header__column">
30 <span class="header__text">Edit</span>
31 </div>
32 <div class="header__column">
33 <span class="header__text">Find</span>
34 </div>
35 </div>
36 </header>
37</body>
38</html>
- 결과
more.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
8 <title>More</title>
9</head>
10
11<body>
12 <header>
13 <div class="header__top">
14 <div class="header__column">
15 <i class="fas fa-plane"></i> <!-- plane icon -->
16 <i class="fas fa-wifi"></i> <!-- wifi icon -->
17 </div>
18 <div class="header__column">
19 <span class="header__time">18:38</span>
20 </div>
21 <div class="header__column">
22 <i class="fas fa-moon"></i> <!-- moon icon -->
23 <i class="fab fa-bluetooth-b"></i> <!-- bluetooth icon -->
24 <span class="header__battery">100%<i class="fas fa-battery-full"></i>
25 </span>
26 </div>
27 </div>
28 <div class="header__bottom">
29 <div class="header__column">
30 <span class="header__text">More</span>
31 </div>
32 <div class="header__column">
33 <i class="fa fa-cog fa-lg"></i> <!-- fa-lg : icon 크기 확대 -->
34 </div>
35 </div>
36 </header>
37</body>
38</html>
- 결과
Chat.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
8 <title>Chat</title>
9</head>
10
11<body>
12 <header>
13 <div class="header__top">
14 <div class="header__column">
15 <i class="fas fa-plane"></i> <!-- plane icon -->
16 <i class="fas fa-wifi"></i> <!-- wifi icon -->
17 </div>
18 <div class="header__column">
19 <span class="header__time">18:38</span>
20 </div>
21 <div class="header__column">
22 <i class="fas fa-moon"></i> <!-- moon icon -->
23 <i class="fab fa-bluetooth-b"></i> <!-- bluetooth icon -->
24 <span class="header__battery">100%<i class="fas fa-battery-full"></i>
25 </span>
26 </div>
27 </div>
28 <div class="header__bottom">
29 <div class="header__column">
30 <i class="fa fa-chevron-left fa-lg"></i>
31 </div>
32 <div class="header__column">
33 <span class="header__text">LYNN</span>
34 </div>
35 <div class="header__column">
36 <i class="fa fa-search"></i>
37 <i class="fa fa-bars"></i>
38 </div>
39 </div>
40 </header>
41</body>
42</html>
profile.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
8 <title>Profile</title>
9</head>
10
11<body>
12 <header>
13 <div class="header__top">
14 <div class="header__column">
15 <i class="fas fa-plane"></i> <!-- plane icon -->
16 <i class="fas fa-wifi"></i> <!-- wifi icon -->
17 </div>
18 <div class="header__column">
19 <span class="header__time">18:38</span>
20 </div>
21 <div class="header__column">
22 <i class="fas fa-moon"></i> <!-- moon icon -->
23 <i class="fab fa-bluetooth-b"></i> <!-- bluetooth icon -->
24 <span class="header__battery">100%<i class="fas fa-battery-full"></i>
25 </span>
26 </div>
27 </div>
28 <div class="header__bottom">
29 <div class="header__column">
30 <i class="fa fa-times fa-lg"></i>
31 </div>
32 <div class="header__column">
33 <i class="fa fa-user fa-lg"></i>
34 </div>
35 </div>
36 </header>
37</body>
38</html>
3. 네비게이션 만들기
index.html
헤더 아래에 nav를 작성한다. 클래스명은 tab-bar로 한다. 그 안에 4개의 링크가 있다.
첫번째 링크는 index.html로 이동.
두번째 링크는 chats.html로 이동.
세번째는 find.html로 이동.
네번째는 more.html로 이동.
1<nav class="tab-bar">
2 <a href="index.html" class="tab-bar__tab"></a>
3 <a href="chats.html" class="tab-bar__tab"></a>
4 <a href="find.html" class="tab-bar__tab"></a>
5 <a href="more.html" class="tab-bar__tab"></a>
6</nav>
각 4개의 링크 안에 모두 아이콘이 있는 span을 만든다. span 이름은 tab-bar-title이라고 한다. 각각 아이콘과 이름을 입력한다.
1<nav class="tab-bar">
2 <a href="index.html" class="tab-bar__tab">
3 <i class="fa fa-user"></i>
4 <span class="tab-bar__title">Friends</span>
5 </a>
6 <a href="chats.html" class="tab-bar__tab">
7 <i class="fa fa-comment"></i>
8 <span class="tab-bar__title">Chats</span>
9 </a>
10 <a href="find.html" class="tab-bar__tab">
11 <i class="fa fa-search"></i>
12 <span class="tab-bar__title">Find</span>
13 </a>
14 <a href="more.html" class="tab-bar__tab">
15 <i class="fa fa-ellipsis-h"></i>
16 <span class="tab-bar__title">More</span>
17 </a>
18</nav>
다른 html 파일에 내비게이션 코드를 복사-붙여넣기 하기 전에, 해당 페이지가 선택되었을 때 다르게 보이는 class를 작성해야 한다.
예를들어, index.html에서는 Friends 링크가 활성화 된다. 이에 맞추어 클래스명을 tab-bar_tab-selected 로 변경 해준다.
1<nav class="tab-bar">
2 <a href="index.html" class="tab-bar__tab tab-bar__tab--selected">
3 <i class="fa fa-user"></i>
4 <span class="tab-bar__title">Friends</span>
5 </a>
6 <a href="chats.html" class="tab-bar__tab">
7 <i class="fa fa-comment"></i>
8 <span class="tab-bar__title">Chats</span>
9 </a>
10 <a href="find.html" class="tab-bar__tab">
11 <i class="fa fa-search"></i>
12 <span class="tab-bar__title">Find</span>
13 </a>
14 <a href="more.html" class="tab-bar__tab">
15 <i class="fa fa-ellipsis-h"></i>
16 <span class="tab-bar__title">More</span>
17 </a>
18</nav>
chats, find, more의 각각 html 파일의 활성화 되는 탭의 코드를 위와 같이 변경해준다.
- 결과 : index.html
4. 친구리스트 목록 만들기
섹션이 총 3개이다.
search bar, My Profile, Friends
index.html
Search bar
header와 nav 사이에 main이라는 태그를 만든다. 이 main의 클래스명을 friends라고 정한다.
가장 상단에 있는 검색창을 만들어야 하므로 div를 만들고, 이름은 search-bar로 한다. 검색창 내부에 search 아이콘을 불러온다. 그 다음 input 창을 만든다.
“Find friends, chats, Plus Friends"라고 placeholder를 작성한다.
1<main class="friends">
2 <div class="search-bar">
3 <i class="fa fa-search"></i>
4 <input type="text" placeholder="Find friends, chats, Plus Friends">
5 </div>
6</main>
My Profile
다음은 검색창 아래 my profile 섹션을 만든다. main 안에 클래스명 friends_profile의 섹션을 만든다. 왜냐하면 main 클래스가 friends이기도 하고, 이후 profile과 혼동되면 안되기 때문이다.
헤더를 작성하고, h6 크기의 타이틀을 만든다. 클래스명을 friends__section-title로 입력한다.
헤더 밖에 2개의 줄이 있다. 그러므로 div를 생성하고 클래스명은 friends__section-rows라고 정한다. 첫번째 row는 ‘me’이고, 두번째 row는 이다.
div를 만들고 프로필 이미지를 추가한다.( 이미지 주소값은 추후 설정)
span 태그로 이름을 입력한다. 클래스명은 friends__section-name으로 한다.
1<main class="friends">
2 <div class="search-bar">
3 <i class="fa fa-search"></i>
4 <input type="text" placeholder="Find friends, chats, Plus Friends">
5 </div>
6
7 <section class="friends__section">
8 <header class="friend__section-header">
9 <h6 class="friends__section-title">My profile</h6>
10 </header>
11 <div class="friends__section-rows">
12 <div class="friends__section-row">
13 <img src="" art="">
14 <span class="friends__section-name">Nicolas</span>
15 </div>
16 </div>
17 </section>
18</main>
두번째 row는 Friends’ Names Display 이다.
위와 마찬가지 방법으로 작성하고, span의 내용을 Friends’ Name Display를 넣어준다.
1<div class="friends__section-row">
2 <img src="" art="">
3 <span class="friend__section-name">Friends' Name Display</span>
4</div>
Friends
기본 구조는 My Profile과 유사하고, 상태 메시지가 있으므로 div를 생성한다 클래스명은 friends-section-column으로 정한다.
1<section class="friends__section">
2 <header class="friend__section-header">
3 <h6 class="friends__section-title">Friends</h6>
4 </header>
5 <div class="friends__section-rows">
6 <div class="friends__section-row">
7 <div class="friends-section-column">
8 <img src="" art="">
9 <span class="friends__section-name">Lynn</span>
10 </div>
11 <span class="friends__section-tagline">
12 Life is short. So live your life.
13 </span>
14 </div>
15 </div>
16</section>
전체코드
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
8 <title>Friends</title>
9</head>
10
11<body>
12 <header>
13 <div class="header__top">
14 <div class="header__column">
15 <i class="fas fa-plane"></i> <!-- plane icon -->
16 <i class="fas fa-wifi"></i> <!-- wifi icon -->
17 </div>
18 <div class="header__column">
19 <span class="header__time">18:38</span>
20 </div>
21 <div class="header__column">
22 <i class="fas fa-moon"></i> <!-- moon icon -->
23 <i class="fab fa-bluetooth-b"></i> <!-- bluetooth icon -->
24 <span class="header__battery">100%<i class="fas fa-battery-full"></i>
25 </span>
26 </div>
27 </div>
28 <div class="header__bottom">
29 <div class="header__column">
30 <span class="header__text">Manage</span>
31 </div>
32 <div class="header__column">
33 <span class="header__text">Friends <span class="header__number">1</span></span>
34 </div>
35 <div class="header__column">
36 <i class="fa fa-cog fa-lg"></i>
37 </div>
38 </div>
39 </header>
40
41 <main class="friends">
42 <div class="search-bar">
43 <i class="fa fa-search"></i>
44 <input type="text" placeholder="Find friends, chats, Plus Friends">
45 </div>
46
47 <section class="friends__section">
48 <header class="friend__section-header">
49 <h6 class="friends__section-title">My profile</h6>
50 </header>
51 <div class="friends__section-rows">
52 <div class="friends__section-row">
53 <img src="" art="">
54 <span class="friends__section-name">Nicolas</span>
55 </div>
56 <div class="friends__section-row">
57 <img src="" art="">
58 <span class="friend__section-name">Friends' Name Display</span>
59 </div>
60 </div>
61 </section>
62
63 <section class="friends__section">
64 <header class="friend__section-header">
65 <h6 class="friends__section-title">Friends</h6>
66 </header>
67 <div class="friends__section-rows">
68 <div class="friends__section-row">
69 <div class="friends-section-column">
70 <img src="" art="">
71 <span class="friends__section-name">Lynn</span>
72 </div>
73 <span class="friends__section-tagline">
74 Life is short. So live your life.
75 </span>
76 </div>
77 </div>
78 </section>
79
80 </main>
81
82 <nav class="tab-bar">
83 <a href="index.html" class="tab-bar__tab tab-bar__tab--selected">
84 <i class="fa fa-user"></i>
85 <span class="tab-bar__title">Friends</span>
86 </a>
87 <a href="chats.html" class="tab-bar__tab">
88 <i class="fa fa-comment"></i>
89 <span class="tab-bar__title">Chats</span>
90 </a>
91 <a href="find.html" class="tab-bar__tab">
92 <i class="fa fa-search"></i>
93 <span class="tab-bar__title">Find</span>
94 </a>
95 <a href="more.html" class="tab-bar__tab">
96 <i class="fa fa-ellipsis-h"></i>
97 <span class="tab-bar__title">More</span>
98 </a>
99 </nav>
100</body>
101</html>
- 결과
5. chats.html
상단에 검색창이 있고, 두개의 줄이 있다. 각 줄마다 두개의 컬럼이 있다. 첫번째 컬럼에는 1개의 div, 1개의 이미지가 있다.
chats.html에서 header 다음에 클래스명이 chats인 main을 생성한다. index.html에서 만들었던 검색창을 붙여넣기 한다.
클래스명이 chats__list인 ul을 만든다. 그 안에 아이템 리스트를 만드는데, 클래스명은 chats-chat 이라고 정한다. 이 리스트 안에 2개의 컬럼을 만든다. 첫번째 컬럼은 프로필 사진을 포함한 메시지 상태창이고, 두번째 컬럼은 시간이다. chat-content div와 chat-data-time span을 만든다.
각 리스트와 리스트 아이템을 만들었다. (코드 참고)
1<!-- main code -->
2<main class="chats">
3 <div class="search-bar">
4 <i class="fa fa-search"></i>
5 <input type="text" placeholder="Find friends, chats, Plus Friends">
6 </div>
7 <ul class="chats__list">
8 <li class="chats_chat">
9 <div class="chat__content">
10 <img src="http://pm1.narvii.com/6331/3cb83dea89204850888261c9252ba5dbb142af13_hq.jpg">
11 <div class="chat__preview">
12 <h3 class="chat__user">Ryan</h3>
13 <span class="chat-last-message">I am king.</span>
14 </div>
15 </div>
16 <span class="chat__date-tiem">
17 15:55
18 </span>
19 </li>
20 </ul>
21 <ul class="chats__list">
22 <li class="chats_chat">
23 <div class="chat__content">
24 <img src="https://www.90daykorean.com/wp-content/uploads/2015/04/Groovy-Jay-G-300x293.png">
25 <div class="chat__preview">
26 <h3 class="chat__user">Jay-G</h3>
27 <span class="chat-last-message">Sooooooo....</span>
28 </div>
29 </div>
30 <span class="chat__date-tiem">
31 01:58
32 </span>
33 </li>
34 </ul>
35 <div class="chat-btn">
36 <i class="fa fa-comment"></i>
37 </div>
38</main>
- 결과
6. find.html
header 아래 main을 만들고 클래스명은 find라고 정한다. 2개의 섹션을 만드는데, top과 bottom이다. 상단에 있는 섹션을 find-option이라고 정한다. 그 안에 div를 만들고 다시 그 안에 아이콘, span이 있다.
1// 단축 코드
2div.find__option>i.fa+span.find__option-title
3
4// 아래 구조가 생성 된다. 아이콘이 4개가 있으므로 아래 구조가 4개 필요하다. 각각 아이콘도 입력해준다.
5<div class="find__option">
6 <i class="fa fa-address-book fa-lg"></i>
7 <span class="find__option-title">Find</span>
8</div>
9<div class="find__option">
10 <i class="fa fa-qrcode fa-lg"></i>
11 <span class="find__option-title">QR Code</span>
12</div>
13<div class="find__option">
14 <i class="fa fa-mobile fa-2x"></i>
15 <span class="find__option-title">Shake</span>
16</div>
17<div class="find__option">
18 <i class="fa fa-envelope fa-lg"></i>
19 <span class="find__option-title">Invite via SMS</span>
20</div>
두번째 섹션 클래스명은 find-recommended 로 정한다.
타이틀을 생성해야 하므로 헤더를 만든다. h6.find__title
div로 영역 나누고 span 이용해서 문구를 입력한다.
1<section class="find__recommended">
2 <header>
3 <h6 class="recommended__title">Recommended Friends</h6>
4 </header>
5 <div class="recommended__none">
6 <span class="recommended__text">You have no recommended friends.</span>
7 </div>
8</section>
-
결과
7. more.html
more-header
1<!-- more-header 코드 -->
2<header class="more__header">
3 <div class="more-header__column">
4 <img src="http://pm1.narvii.com/6331/3cb83dea89204850888261c9252ba5dbb142af13_hq.jpg" alt="">
5 <div class="more-header__info">
6 <h3 class="more-header__title">
7 Ryon
8 </h3>
9 <span class="more-header__subtitle">
10 ryon@gmail.com
11 </span>
12 </div>
13 </div>
14 <i class="far fa-comment-alt fa-2x"></i>
15</header>
option-bar
1<!-- 단축 생성 코드 -->
2div.more__option*4>i.fa+span.more__option-title
이전에 만든 내비게이션 생성 원리와 동일하다.
1<section class="more__options">
2 <div class="more__option">
3 <i class="far fa-smile fa-2x"></i>
4 <span class="more__option-title">Emoticons</span>
5 </div>
6 <div class="more__option">
7 <i class="fas fa-paint-brush fa-2x"></i>
8 <span class="more__option-title">Themes</span>
9 </div>
10 <div class="more__option">
11 <i class="fas fa-user-friends fa-2x"></i>
12 <span class="more__option-title">Plus Friend</span>
13 </div>
14 <div class="more__option">
15 <i class="fas fa-code-branch fa-2x"></i>
16 <span class="more__option-title">Account</span>
17 </div>
18</section>
more-plus-freinds
1<!-- 단축생성코드 참고 -->
2div.plus-friends__item*8>i.fa+span.plus-friends__item-title
1<section class="more__plus-friends">
2 <header class="plus-friend__header">
3 <h2 class="plus-friends__title">Plus Friends</h2>
4 <span class="plus-friend__learn-more">
5 <i class="fas fa-info-circle"></i>
6 Learn More
7 </span>
8 </header>
9
10 <div class="plus-friends__item">
11 <div class="plus-friends__item">
12 <i class="fas fa-utensils"></i>
13 <span class="plus-friends__item-title">Order</span>
14 </div>
15 <div class="plus-friends__item">
16 <i class="fas fa-store"></i>
17 <span class="plus-friends__item-title">Store</span>
18 </div>
19 <div class="plus-friends__item">
20 <i class="fas fa-tv"></i>
21 <span class="plus-friends__item-title">TV Channel/Raido</span>
22 </div>
23 <div class="plus-friends__item">
24 <i class="fas fa-pencil-alt"></i>
25 <span class="plus-friends__item-title">Creation</span>
26 </div>
27 <div class="plus-friends__item">
28 <i class="fas fa-graduation-cap"></i>
29 <span class="plus-friends__item-title">Education</span>
30 </div>
31 <div class="plus-friends__item">
32 <i class="fas fa-university"></i>
33 <span class="plus-friends__item-title">Politics/Society</span>
34 </div>
35 <div class="plus-friends__item">
36 <i class="fas fa-dollar-sign"></i>
37 <span class="plus-friends__item-title">Finance</span>
38 </div>
39 <div class="plus-friends__item">
40 <i class="fas fa-video"></i>
41 <span class="plus-friends__item-title">Movies/Music</span>
42 </div>
43 </div>
44</section>
more-options
1<section class="more__options">
2 <div class="more__option">
3 <img src="https://raw.githubusercontent.com/lovesignal/img/master/programming/kakao-clone/kakaoStory.png" alt="" class="more__options-image">
4 <span class="more__options-title">Kakao Story</span>
5 </div>
6 <div class="more__option">
7 <img src="https://raw.githubusercontent.com/lovesignal/img/master/programming/kakao-clone/path.png" alt="" class="more__options-image">
8 <span class="more__options-title">Path</span>
9 </div>
10 <div class="more__option">
11 <img src="https://raw.githubusercontent.com/lovesignal/img/master/programming/kakao-clone/kakaoFriends.png" alt="" class="more__options-image">
12 <span class="more__options-title">Kakao Friends</span>
13 </div>
14</section>
전체코드
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
8 <title>More</title>
9</head>
10
11<body>
12 <header>
13 <div class="header__top">
14 <div class="header__column">
15 <i class="fas fa-plane"></i> <!-- plane icon -->
16 <i class="fas fa-wifi"></i> <!-- wifi icon -->
17 </div>
18 <div class="header__column">
19 <span class="header__time">18:38</span>
20 </div>
21 <div class="header__column">
22 <i class="fas fa-moon"></i> <!-- moon icon -->
23 <i class="fab fa-bluetooth-b"></i> <!-- bluetooth icon -->
24 <span class="header__battery">100%<i class="fas fa-battery-full"></i>
25 </span>
26 </div>
27 </div>
28 <div class="header__bottom">
29 <div class="header__column">
30 <span class="header__text">More</span>
31 </div>
32 <div class="header__column">
33 <i class="fa fa-cog fa-lg"></i> <!-- fa-lg : icon 크기 확대 -->
34 </div>
35 </div>
36 </header>
37
38 <main class="more">
39 <header class="more__header">
40 <div class="more-header__column">
41 <img src="http://pm1.narvii.com/6331/3cb83dea89204850888261c9252ba5dbb142af13_hq.jpg" alt="">
42 <div class="more-header__info">
43 <h3 class="more-header__title">
44 Ryon
45 </h3>
46 <span class="more-header__subtitle">
47 ryon@gmail.com
48 </span>
49 </div>
50 </div>
51 <i class="far fa-comment-alt fa-2x"></i>
52 </header>
53
54 <section class="more__options">
55 <div class="more__option">
56 <i class="far fa-smile fa-2x"></i>
57 <span class="more__option-title">Emoticons</span>
58 </div>
59 <div class="more__option">
60 <i class="fas fa-paint-brush fa-2x"></i>
61 <span class="more__option-title">Themes</span>
62 </div>
63 <div class="more__option">
64 <i class="fas fa-user-friends fa-2x"></i>
65 <span class="more__option-title">Plus Friend</span>
66 </div>
67 <div class="more__option">
68 <i class="fas fa-code-branch fa-2x"></i>
69 <span class="more__option-title">Account</span>
70 </div>
71 </section>
72
73 <section class="more__plus-friends">
74 <header class="plus-friend__header">
75 <h2 class="plus-friends__title">Plus Friends</h2>
76 <span class="plus-friend__learn-more">
77 <i class="fas fa-info-circle"></i>
78 Learn More
79 </span>
80 </header>
81
82 <div class="plus-friends__item">
83 <div class="plus-friends__item">
84 <i class="fas fa-utensils"></i>
85 <span class="plus-friends__item-title">Order</span>
86 </div>
87 <div class="plus-friends__item">
88 <i class="fas fa-store"></i>
89 <span class="plus-friends__item-title">Store</span>
90 </div>
91 <div class="plus-friends__item">
92 <i class="fas fa-tv"></i>
93 <span class="plus-friends__item-title">TV Channel/Raido</span>
94 </div>
95 <div class="plus-friends__item">
96 <i class="fas fa-pencil-alt"></i>
97 <span class="plus-friends__item-title">Creation</span>
98 </div>
99 <div class="plus-friends__item">
100 <i class="fas fa-graduation-cap"></i>
101 <span class="plus-friends__item-title">Education</span>
102 </div>
103 <div class="plus-friends__item">
104 <i class="fas fa-university"></i>
105 <span class="plus-friends__item-title">Politics/Society</span>
106 </div>
107 <div class="plus-friends__item">
108 <i class="fas fa-dollar-sign"></i>
109 <span class="plus-friends__item-title">Finance</span>
110 </div>
111 <div class="plus-friends__item">
112 <i class="fas fa-video"></i>
113 <span class="plus-friends__item-title">Movies/Music</span>
114 </div>
115 </div>
116 </section>
117
118 <section class="more__options">
119 <div class="more__option">
120 <img src="https://raw.githubusercontent.com/lovesignal/img/master/programming/kakao-clone/kakaoStory.png" alt="" class="more__options-image">
121 <span class="more__options-title">Kakao Story</span>
122 </div>
123 <div class="more__option">
124 <img src="https://raw.githubusercontent.com/lovesignal/img/master/programming/kakao-clone/path.png" alt="" class="more__options-image">
125 <span class="more__options-title">Path</span>
126 </div>
127 <div class="more__option">
128 <img src="https://raw.githubusercontent.com/lovesignal/img/master/programming/kakao-clone/kakaoFriends.png" alt="" class="more__options-image">
129 <span class="more__options-title">Kakao Friends</span>
130 </div>
131 </section>
132 </main>
133
134 <nav class="tab-bar">
135 <a href="index.html" class="tab-bar__tab">
136 <i class="fa fa-user"></i>
137 <span class="tab-bar__title">Friends</span>
138 </a>
139 <a href="chats.html" class="tab-bar__tab">
140 <i class="fa fa-comment"></i>
141 <span class="tab-bar__title">Chats</span>
142 </a>
143 <a href="find.html" class="tab-bar__tab">
144 <i class="fa fa-search"></i>
145 <span class="tab-bar__title">Find</span>
146 </a>
147 <a href="more.html" class="tab-bar__tab tab-bar__tab--selected">
148 <i class="fa fa-ellipsis-h"></i>
149 <span class="tab-bar__title">More</span>
150 </a>
151 </nav>
152</body>
153</html>
8. chat.html
chats.html과 chat.html연결하기
chat.html로 이동하는 방법은 index.html에서 채팅창 리스트를 클릭해서 chats.html로 이동한다. 그리고 chats.html에서 채팅창 리스트를 클릭해서 chat.html로 이동할 수 있어야 한다.
chats.html에 chats_chat 클래스 li 리스트 안에 링크를 만든 후 chat.hmtl로 연결시킨다. 동일한 작업을 모든 리스트에 한다.
1<ul class="chats__list">
2 <li class="chats_chat">
3 <a href="chat.html"> <!-- 리스트를 chat.html에 연결 시킴 -->
4 <div class="chat__content">
5 ....... code 생략
6 </span>
7 </a>
8 </li>
9</ul>
아래와 같이 연결 된 것을 확인할 수 있다.
마찬가지 방법으로 화살표 아이콘에도 링크를 걸어준다.
1<div class="header__bottom">
2 <div class="header__column">
3 <a href="chats.html"> <!-- 링크 연결해주기 -->
4 <i class="fa fa-chevron-left fa-lg"></i>
5 </a>
6 </div>
7 ..... 생략 .....
8</div>
chat.html
1<main class="chat">
2 <div class="date-divider">
3 <span class="date-divider__text">Wednesday, August 2, 2018</span>
4 </div>
5 <div class="chat__message chat__message--from-me">
6 <span class="chat__message-time">17:55</span>
7 <span class="chat__message-body">
8 Hello! This is a test.message.
9 </span>
10 </div>
11 <div class="chat__message chat__message--to-me">
12 <img src="https://www.90daykorean.com/wp-content/uploads/2015/04/Groovy-Jay-G-300x293.png" class="chat-message-avatar">
13 <div class="chat__message-center">
14 <h3 class="chat__message-username">Jay-G</h3>
15 <span class="chat__message-body">
16 And this is an answer.
17 </span>
18 </div>
19 <span class="chat__message-time">18:55</span>
20 </div>
21</main>
22<div class="type-message">
23 <i class="fa fa-plus fa-2x"></i>
24 <div class="type-message__input">
25 <input type="text">
26 <i class="far fa-smile"></i>
27 <span class="record-message">
28 <i class="fas fa-microphone"></i>
29 </span>
30 </div>
31</div>
- 결과
9. profile.html
index.html과 profile.html 연결
index.html에서 프로필을 클릭하면 profile.html로 이동해야 한다.
1<div class="friends__section-rows">
2 <div class="friends__section-row">
3 <a href="profile.html"> <!-- profile.html과 연결 -->
4 ..... 생략.....
5 </a>
6 </div>
7</div>
profile.html
header 아래에 main을 생성한다.
1<main class="profile">
2 <header class="profile__header">
3 <img src="http://pm1.narvii.com/6331/3cb83dea89204850888261c9252ba5dbb142af13_hq.jpg">
4 <h3 class="profile__header-title">Ryan</h3>
5 </header>
6 <input type="text" placeholder="ryan@gmail.com">
7 <div class="profile__actions">
8 <div class="profile__action">
9 <span class="profile__action-circle">
10 <i class="fas fa-comment fa-2x"></i>
11 </span>
12 <span class="profile__action-title">My Chatroom</span>
13 </div>
14 <div class="profile__action">
15 <span class="profile__action-circle">
16 <i class="fas fa-edit fa-2x"></i>
17 </span>
18 <span class="profile__action-title">Edit Profile</span>
19 </div>
20 </div>
21</main>
profile.html에서는 상단의 x를 누르면 index.html로 돌아가야 한다.
1<div class="header__bottom">
2 <div class="header__column">
3 <a href="index.html"> <!-- 아이콘에 링크를 걸어준다. -->
4 <i class="fa fa-times fa-lg"></i>
5 </a>
6 .... 생략 .....
7</div>
- 결과