[카카오톡 클론코딩] # 6.9 Recap and Forms

Gata·2023년 8월 29일

🟨카카오톡 클론코딩

목록 보기

52/78

📌BEM 방식과 '#' 방식 비교하기

✔️input 버튼

'#' 방식

#login-form input {
}

BEM 방식

.login-form__input { 
}

✔️Email or phone number 그리고 password 글자 자체

'#' 방식

#login-form input::placeholder { 
}

BEM 방식

.login-form__input::placeholder {
}

✔️로그인과 가입하기 버튼

'#' 방식

#login-form input[type="submit"] {
}

BEM 방식

.login-form__btn {
{

✔️링크 a

'#' 방식

#login-form a {
}

BEM 방식

.login-form__a {
}

✔️다시 써보기

'#' 방식

#login-form {
    display: flex;
    flex-direction: column; /*input 4개 세로로 나열*/
    margin: 0px 30px; /* form틀 자체에 좌우 공간 주기*/
}

#login-form input {
    padding: 15px 0px; /*내부 박스 안에서 위아래 공간주기*/
    border: none; /*경계선 없애기*/
    font-size: 18px;
    margin-bottom: 20px; /*아래에 공간 주기*/
}

#login-form input::placeholder { /*Email~, Password 글자색 */
    color: rgba(0,0,0,0.4); /*0,0,0은 검정색을 의미, 마지막 숫자 0.4는 투명도를 의미*/
}

#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:focus {
    border-color: var(--yellow); /*variables.css에서 색 설정*/
}

#login-form input[type="submit"] {
    background-color: var(--yellow);
    cursor: pointer; /*옵션: pointer, not-allowed, progress*/
    padding: 20px 0px;
    border-radius: 5px;
}

#login-form a {
    text-align: center; /*text를 가운데 정렬*/
    text-decoration: none; /*text 스타일 초기화*/
    color: inherit;
    font-size: 13px;
}

BEM 방식

.login-form {
    display: flex;
    flex-direction: column; 
    margin: 0px 30px; 
}
.login-form__input {
    padding: 15px 0px; 
    border: none; 
    font-size: 18px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    margin-bottom: 20px; 
    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__btn {
    background-color: var(--yellow);
    cursor: pointer; 
    padding: 20px 0px;
    border-radius: 5px;
    border: none; 
    font-size: 18px;
    margin-bottom: 20px;
}
.login-form__a {
    text-align: center; 
    text-decoration: none; 
    color: inherit;
    font-size: 13px;
}

✔️style.css

style.css 파일에는 font-family이나 background-color와 같이 모든 스크린에 적용될 수 있는 스타일을 써놓는 것을 추천!✨

또 다른 방식이 있다면 그렇게 해도 되지만 니코샘 방식은 style.css 코드가 굉장히 깔끔 해 보이고 파일들도 'organized'하게 보인다.

<style.css>

@import url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap');
@import "reset.css";
@import "variables.css";

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

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

body {
    font-family: 'Nanum Pen Script', cursive;
}

📌Form

form은 아주 중요한 2가지 속성(Attribute)를 가지고 있다. action과 method다.

✔️action : 어떤 페이지로 데이터를 보낼건지 지정한다.

아래 html 코드에서 action="friends.html"로 되어 있으므로 유저가 입력한 정보들(email, phone number, password 등)은 friends.html에 저장된다.

✔️method :

POST와 GET 방식 중 하나를 선택할 수 있다.
POST는 데이터를 백엔드 서버에 전송하는 방식이다. 현재 프로젝트에서는 서버가 없기 때문에 GET방식을 이용할 것이다.
GET은 백엔드 서버가 없어도 사용할 수 있지만, 보안에 취약하다. username과 password 같은 중요한 정보는 GET 방식으로 보내면 안된다.
GET이나 POST 방식에 대해 좀 더 알아보고 싶다면, '노마드코더 [풀스택] 유튜브 클론 코딩'을 들어보자. form을 엄청 많이 쓴다.
method="get"을 쓰면 프로젝트를 업로드 할 때 POST 방식은 작동하지 않고 오직 GET 방식만 작동한다.

<form action="friends.html" method="get" id="login-form">
        <input name="username" type="text" placeholder="Email or phone number" />
        <input name="password" type="password" placeholder="Password">
        <input type="submit" value="Log in" />
        <input type="submit" value="Sign Up" />
        <a href="#">Find Kokoa Account or Password</a>
</form>