[코코아톡 클론] 6.0~6.5 필기

Introduction

git에는 보이지 않는 임시 파일이 있는데, git은 나의 디렉토리에서 모든 파일을 참조 할 수 있기 때문에 어떤 파일을 깃허브에 업로드 하고 싶지 않으면,
커밋에서 이 파일을 제외하도록 하면 됨.

방법 ) .gitgnore은 무시하고 싶은 파일 이름을 기록하는 파일.
거기에 .무시하고싶은 파일이름을 쓰고 저장하면 됨.
폴더를 무시하고싶으면 /무시하고싶은 폴더이름/

‼ 무시하고싶은 파일이름을 적은 파일의 이름은 필수적으로 .gitignore이여야해
그리고 설명 적으면 커밋가능.

Sign Up Screen part One

html file에서 단축키 !를 입력하면 저렇게 기본 양식 코드가 뜸.

우리는 이걸 만들거야.

위에 상단바 부분 코드

  <body>
    <div id="satus-bar">
      <!-- class이름 저렇게 하는거 추천. 그냥 column이라고 해놓으면
        나중에 어떤 column을 가리키는지 알기 어려움 -->
      <div class="status-bar_column">
        <span>No Service</span>
        <!--to do : wifi icon-->
      </div>
      <div class="status-bar_column">
        <span>18:43</span>
      </div>
      <div class="status-bar_column">
        <span>110%</span>
        <!-- 배터리 아이콘 -->
        <!-- 충전중 아이콘 -->
      </div>
    </div>
  </body>

BEM

status-bar_colum저거 있지 저렇게 class이름을 짓는 규칙을 BEM이라고함.
bem규칙은 구글에서 검색하면 다 나와.
id,class섞어쓰면 뭐가 뭐였지 하고 css,html을 왔다갔다하면서 계속 확인해야하고
그냥 class에 btn_text btn_orange 이런식으로 이름을 적으면 css가서 이게 뭐였는지 확인 할 필요 없이 html에서 이해가 가능하잖아 ㅇㅋ?

Font Awesome

아이콘을 추가하는 2가지 방법
1. 직접 아이콘을 구하는 방법
2. 직접 이미지를 만들고 추출하거나 SVG파일을 이용

SVG : 픽셀이 없는 이미지파일형식. 수학으로만 구성된 형식

Heroicons : 여기 사이트에 들어가서 원하는 아이콘 복사해서 사용 (무료.)
fontawesome : 여기도 아이콘 사이트임. 무료, 유료 다 있음

fontawesome에 가입하면 code kt가 각자 생기는데
body안에 저거 복붙해서 쓰면 됨.

스크립트는 항상 마지막에 있어야해 항상 마지막!!! body태그를 닫기 직전!!!

그리고 원하는 아이콘 있으면 검색해. 그럼 위에 아이콘 코드있어서 그거 복붙하기만하면됨.

  <body>
    <div class="satus-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"></i>
        <i class="fas fa-bolt"></i>
      </div>
    </div>
    <script
      src="https://kit.fontawesome.com/b2239e007d.js"
      crossorigin="anonymous"
    ></script>
  </body>

결과

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

    <form id="login-form">
      <input type="text" placeholder="Email or phone number" />
      <input type="password" placeholder="Password" />
      <input type="submit" value="Log In" />
      <a href="#">Find Kokoa Account or Password</a>
    </form>

이 코드 추가하면

결과

Status Bar CSS

head안에 link:css 라고 입력하면 자동으로 외부 css링크연결 코딩 작성해줌.
글꼴 내 맘대로 적용하고싶으면
google fonts 검색해서 원하는 폰터 선택 -> select this style클릭 -> embed
html의 head에 link를 써서 추가하는방법, css에 추가하는 방법 이렇게 2가지가있어 후자방법 추천

justify-content대신 컨테이너 하나를 딱 중심에 놓는 css 기술을 보여줄게
물론 justify-content에 space-between도 좋지만 다른 width를 가지고 있기 때문에 space-between이 좀 안맞아. 우리가 원하는대로 중심에 있지않아.

<최종 css코드>

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap");
body {
  font-family: "Open Sans", sans-serif;
}

.status-bar {
  display: flex;
  /* css hack : 1.space-between을 하는 대신 center작성 */
  justify-content: center;
}

/* css hack : 2.그리곤 모든 column에 width: 33% 추가 */
.status-bar__column {
  width: 33%;
}
.status-bar__column:first-child span {
  margin-right: 5px;
}

/* css hack3 */
.status-bar__column:nth-child(2) {
  display: flex;
  justify-content: center;
}
/* css hack4 */
.status-bar__column:last-child {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* 배터리상태랑 충전 아이콘 사이에 공간주기*/
.status-bar__column .fa-battery-full {
  margin: 0px 5px;
}

fontawesome에 아이콘을 크게 만드는 class가 있음.
저기 사이트에 들어가서 원하는 아이콘 선택하면 옆에 사이즈 선택하는거 있음
아이콘 코드 복붙한거 옆에 예를들어 2x사이즈면
fa-2x 코드 추가작성하면됨.

<최종 html코드>

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="css/style2.css" />
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Welcome to Kokoa Clone</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"></i>
        <i class="fas fa-bolt"></i>
      </div>
    </div>

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

    <form id="login-form">
      <input type="text" placeholder="Email or phone number" />
      <input type="password" placeholder="Password" />
      <input type="submit" value="Log In" />
      <a href="#">Find Kokoa Account or Password</a>
    </form>

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

결과

Author And Source

이 문제에 관하여([코코아톡 클론] 6.0~6.5 필기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@123cjstj/코코아톡-챌린지-6.06.5-필기

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)