ココアクローン6部

38232 ワード

レコーダなしテキストリンク

#6 [2020 UPDATE] CLONING TIME
#6.0 Introduction (06:15)
無視するgitignoreファイル名を記録するファイル
#6.1 Sign Up Screen part One (09:44)
#6.2 BEM (06:39)
BEM(Blocks Elements and Modifiers)
読みやすいCSS
ex) div class="status-bar__column"
#6.3 Font Awesome (07:59)
SVG数学
ヘロインのウェブサイトのアイコンはとても多いです
多機能アイコン
無料アプリケーションソース

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Welcome to Kokoa Talk</title>
</head>
<body>
    <div class="status-bar">
        <div class="status-bar__column">
            <span>No Service</span>
            <i class="fas fa-wifi"></i>
            <!-- <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.111 16.404a5.5 5.5 0 017.778 0M12 20h.01m-7.08-7.071c3.904-3.905 10.236-3.905 14.141 0M1.394 9.393c5.857-5.857 15.355-5.857 21.213 0" />
              </svg> heroicons -->
        </div>
        <div class="status-bar__column">
            <span>18:43</span>
        </div>
        <div class="status-bar__column">
            <span>110%</span>
            <i class="fas fa-battery-full"></i>
            <i class="fas fa-bolt"></i>
        </div>
    </div>
    <script
      src="https://kit.fontawesome.com/6478f529f2.js"
      crossorigin="anonymous"
    ></script>
</body>
</html>

#6.4 Sign Up Screen part Two (05:53)

<header class="welcome-header">
        <h1 class="welcome-header__title">Welcome to Kokoa Clone</h1>
        <p class="welcome-header__text">If you have a Kakao Account, log in with your email or phone number.</p>
    </header>

    <form if="login-form">
        <input type="text" placeholder="Email or phone number" />
        <input type="password" placeholder="Password" />
        <input type="submit" value="Log In" />
        <!-- "#" 는 현재 페이지에 있도록 하는것 -->
        <!-- 링크는 정말 많을 거라서 이거 하나만을 위한 id나 class를 추가하고 싶지 않다. -->
        <a href="#">Find Kokoa Account or Password</a>
    </form>

#6.5 Status Bar CSS (13:34)
link:cssショートカット

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap");
body {
  font-family: "Open Sans", sans-serif;
}
body {
  background-color: white;
}
.status-bar {
  display: flex;
  justify-content: center;
}
.status-bar__column {
  width: 33%;
}
.status-bar__column:first-child span {
  margin-right: 5px;
}
.status-bar__column:nth-child(2) {
  display: flex;
  justify-content: center;
}
.status-bar__column:last-child {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.status-bar__column .fa-battery-full {
  margin: 0px 5px;
}

#6.6 Sign Up Screen part Three (11:16)
resetはcssを検索してリセットします.cssに貼り付け、
元のcssで@import「reset.css」;
style.css

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap");
@import "reset.css";
@import "status-bar.css";

body {
  font-family: "Open Sans", sans-serif;
}

.welcome-header {
  margin: 90px 0px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.welcome-header__title {
  margin-bottom: 20px;
  font-size: 25px;
}
.welcome-header__text {
  width: 60%;
  opacity: 0.7;
}

#6.7 Log In Form part One (10:11)

#login-form {
  display: flex;
  flex-direction: column;
  margin: 0px 30px;
}

#login-form input {
  border: none;
  padding: 15px 0px;
  font-size: 18px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  margin-bottom: 25px;
  transition: border-color 0.3s ease-in-out;
}

#login-form input::placeholder {
  color: rgba(0, 0, 0, 0.4);
}

#login-form input:focus {
  border-color: var(--yellow);
}

#6.8 Log In Form part Two (07:54)
css :not


#login-form {
  display: flex;
  flex-direction: column;
  margin: 0px 30px;
}

#login-form input {
  border: none;
  padding: 15px 0px;
  font-size: 18px;
  margin-bottom: 25px;
}
/* input이 submit가 아닐때만 */
#login-form input:not([type="submit"]) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  transition: border-color 0.3s ease-in-out;
}

#login-form input::placeholder {
  color: rgba(0, 0, 0, 0.4);
}

#login-form input:focus {
  border-color: var(--yellow);
}

#login-form input[type="submit"] {
  background-color: var(--yellow);
  cursor: pointer;
  padding: 20px 0px;
  border-radius: 5px;
}

#login-form a {
  text-align: center;
  text-decoration: none;
  color: inherit;
  /* 부모로부터 상속 */
  font-size: 13px;
}

#6.9 Recap and Forms (10:22)

<form action="friends.html" method="get" id="login-form">
action 어떤 페이지로 data를 보낼지 지정할 수 있다.
method는 2가지 방식 1. POST 2. GET
POST: 백엔드 서버에 정보를 전송하는 방식
GET: 보안에 취약 username, password를 보내면 안됨, URL에 포함되어도 상관없는 정보들을 GET 방식으로 보내는 거다.

#6.10 Navigation Bar part One (12:32)
VSCショートカットの作成
nav>>ul>li*4>a
friends.html

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="css/styles.css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Friends - Kokoa Talk</title>
</head>
<body>
    <div class="status-bar">
        <div class="status-bar__column">
            <span>No Service</span>
            <i class="fas fa-wifi"></i>
        </div>
        <div class="status-bar__column">
            <span>18:43</span>
        </div>
        <div class="status-bar__column">
            <span>110%</span>
            <i class="fas fa-battery-full fa-2x"></i>
            <i class="fas fa-bolt"></i>
        </div>
    </div>
    
    <nav class="nav">
        <ul class="nav__list">
            <li class="nav__btn">
                <a class="nav__link" href="friends.html"><i class="fas fa-user fa-lg"></i></a>
            </li>
            <li class="nav__btn">
                <a class="nav__link" href="#"><i class="far fa-comment fa-lg"></i></a>
            </li>
            <li class="nav__btn">
                <a class="nav__link" href="#"><i class="fas fa-search fa-lg"></i></a>
            </li>
            <li class="nav__btn">
                <a class="nav__link" href="#"><i class="fas fa-ellipsis-h fa-lg"></i></a>
            </li>
        </ul>
    </nav>

    </nav>
    <script src="https://kit.fontawesome.com/6478f529f2.js" crossorigin="anonymous"></script>
</body>

</html>

nav-bar.css

.nav {
  background-color: #f9f9fa;
  padding: 20px 40px;
}
.nav__list {
  display: flex;
  justify-content: space-between;
}

#6.11 Navigation Bar part Two (06:34)
#6.12 Border Box (05:46)
私はあなたにpaddingをあげたいですが、boxサイズが変わらないことを望んでいます.
#6.13 Navigation Bar part Three (07:04)

.nav {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #f9f9fa;
  padding: 20px 50px;
  box-sizing: border-box;
  border-top: 1px solid rgba(121, 121, 121, 0.3);
}
.nav__list {
  display: flex;
  justify-content: space-between;
}
.nav__link {
  position: relative;
  color: #2e363e;
}
.nav__notification {
  background-color: tomato;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  /* 원을 만들고 싶으면 width,height의 반값 15px를 써준다. */
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-weight: 600;
  position: absolute;
  /* absolute를 쓰기 위해선 nav_notification을 감싸고 있는 것(nav__link)을 position:relative로 해줘야한다. */
  left: 15px;
  bottom: 15px;
}

#6.14 Screen Header (07:41)
#6.15 Friends Screen part One (07:40)
#6.16 User Component part One (12:20)
VSCショートカット
.クラス名
#6.17 User Component part Two (07:45)
#6.18 Finishing Friends Screen (06:51)
#6.19 Chats Screen part One (07:49)
#6.20 Chats Screen part Two (08:52)
#6.21 Find Screen Part One (10:38)
#6.22 Find Screen Part Two (06:52)
#6.23 Find Screen Part Three (13:10)
#6.24 Find Screen Part Four (07:47)
#6.25 More Screen part One (14:22)
#6.26 More Screen part Two (06:28)
#6.27 Settings Screen part One (12:55)
#6.28 Settings and Chat Screen part One (07:01)
#6.29 Chat Screen part Two (10:03)
#6.30 Chat Screen part Three (08:39)
#6.31 Chat Screen part Four (07:41)
#6.32 Chat Screen part Five (07:36)
#6.33 Write Message Input (11:54)
#6.34 Splash Screen part One (06:41)
#6.35 Splash Screen part Two (06:22)
#6.36 Navigation Animation (10:46)
#6.37 More Animations (08:57)
#6.38 Animating Chats Screen (12:44)
#6.39 Recap (04:43)
#6.40 No Mobile Media Query (07:06)

Reference

この問題について(ココアクローン6部), 我々は、より多くの情報をここで見つけました https://velog.io/@eodyd6564/코코아톡-클론코딩-6파트

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

ビッグデータインターネットアーキテクチャフェーズRedis(3)redisクラスタ

ASP.NET Core WebApi AspNetCoreRateLimit限流ミドルウェア学習