코코아톡 클론코딩 6파트

kodaeyong·2021년 4월 18일
노마드코더
0

#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 수학으로된것
heroicons 사이트 아이콘 많다
FontAwesome 많은 아이콘
소스무료적용함

<!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 찾아서 reset.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)

profile
kodaeyong
hi
이전 포스트

[코딩테스트] 평균 구하기

다음 포스트

SQL과 NoSQL (MySQL과 MongoDB)

0개의 댓글

관련 채용 정보