[カカオ豆クローン]6.6~6.11メモ

Sign Up Screen part Three

私たちが望むかどうかにかかわらず、ブラウザは自分でhtmlに余白を適用します.
これらの=>cssのリセットをすべて除去する方法があります.
cssのリセット:margin:0、padding:0、border:0を含むタグのcssファイルのほとんど
適用するには、cssファイルにリセットcssファイルを追加します.

@import "리셋css파일이름.css";

cssファイルをリセット

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

結果

わあ!太初村!
でも、もっときれいにします.

status-barというcssファイルを作成して挿入し、元のcssファイルに戻ってインポートするだけです.
では今すぐpaddingにしましょうか?^^...
しかし、何がそっくりなのかを見たとき、そのdivboxの大きさは何だったのだろうか.padding、marginはいくらあげたらそうなるのだろうか.

これをインストール
Alt+pを押して巻尺機能を開きます.
次は太初村の状態でmarginと...それらを全部くれた様子

@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: 40px;
  font-size: 25px;
}

.welcome-header__text {
  width: 60%;
  opacity: 0.7;
}

結果

Log In Form part One

style2.css
コードの追加

/*로그인창*/

/* id, passwd부분 정렬 */
#login-form {
  display: flex;
  flex-direction: column;
  margin: 0px 30px;
}

/* id,passwd부분 이쁘게 만들기 */
#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);
}

variables.css
(黄色を入力すると、変数は指定した黄色に保存され、多くの黄色に表示されます.)

:root {
  --yellow: #fae100;
}

reset.css

/* input부분 클릭할때 테두리(outlint) 안생겼음 좋겠어.*/
input:focus {
  outline: none;
}

すべて適用された結果

Log In Form part Two

しかし問題は、そのような場合はログインキーを押すとその下に黄色い線が現れることです
私が欲しいのはこれではありません.
ではlogin-forminput{}でborder-bottomとtransitionを削除します.
style2.css

/*input type이 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;
}

ローエンコーディングを追加します.
マウスデザインの変更
cursor: not-allowed
cursor: progress
cursor: pointer
style2.css

/* submit 스타일링 */

#login-form input[type="submit"] {
  background-color: var(--yellow);
  /*log in버튼에 마우스 올리면 마우스 디자인이 바뀜*/
  cursor: pointer;
  padding: 20px 0px;
  border-radius: 5px;
}

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

結果

great!^^

Recap and Forms

<form action="friends.html" method="GET" id="login-form">

このようにコードを追加すると、ログインボタンを押すとfriends、htmlというファイルに移動します.
ファイルの送信方法はPOSTとGETの2種類あり、GETのセキュリティが悪い.

Navigation Bar part One

これをやります!
今は友達私はhtmlをします
最初から始める必要はありません.index.htmlをロードしてコピーし、不要な部分を削除して修正すればいいです.
まず友達の指数は上の商団と同じです.
彼を呼んで、上のバーコードだけを残して、すべて削除します.
htmlの直接使用を減らすために作られたvsc~~
nav>ul>li*4>aと入力し、

boom! すばらしい
そしてかっこいいです.

Googleは写真の一番下の部分に人のアイコン、メールのアイコンをリストします.

html
friends.html
付加符号化

    <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>

css
nav-bar.css

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

結果

good.
まだあります.

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

/* componets */
@import "components/status-bar.css";
@import "componets/nav-bar.css";

/* screens */
@import "screens/login.css";

このように整理しておくと重要なのは変数ですcssファイルを下に移動すると、
まだimportではないため、変数は使用できません.

Navigation Bar part Two

でもiKONは低いもっと大きくしなさい
fa-2 xの追加

それは確かに以前より大きくなったでしょう.
最終nav-bar.css

.nav {
    /*스크롤해도 아래에 계속 붙어있도록 하기 */
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #f9f9fa;
  padding: 20px 50px;
  /*padding때문에 밀려난 마지막 점3개 아이콘을
  이 코딩 하나로 다 보이게 됐어! */
  box-sizing: border-box;
  border-top: 1px solid rgba(121, 121, 121, 0.3);
}
.nav__list {
  display: flex;
  justify-content: space-between;
}
.nav__link {
  color: #2e363e;
}

reset.css符号化の追加

/* 색깔은 부모에게 상속받도록 하고 링크에 밑줄생기는게 싫으니까 없애자*/
a {
  color: inherit;
  text-decoration: none;
}

最終結果