KokoaTalk Clone Coding: sign up screen 4(status-bar, header)

css

브라우저에서 html에 기본으로 설정한 margin과 padding 등을 reset 해야함

'reset css 2.0' 구글 검색

copy reset css 2.0

reset.css

css에 reset.css파일을 만들어서 복사한 reset css 2.0을 붙여넣기

on styles.css

styles.css파일에 reset.css를 추가

reset

status-bar.css

status-bar.css 파일을 생성해서 styles.css에 있던 코드를 이동

모든 스크린에 status-bar가 있기 때문에 파일을 분리

on styles.css

styles.css파일에 status-bar.css를 추가

 

앞에 설명을 다시 복습하고 변경내역을 보면서 만드니까 재밌어서 그런지 크게 어려운 부분은 없었음

 

먼저 해보고 선생님 설명을 들으면서 내가 작성한 것과 다르거나 새로 배운 내용

1.

#login-form input:not([type="submit"]) {

    border-bottom: 1px solid rgba(0, 0, 0, 0.2);

    transition: border-color 0.3s ease-in-out;

}

type이 submit 일 때, 적용되지 않게 함

#login-form input {

    padding: 20px 0;

    font-size: 20px;

    border-style: none;

}

여기 안에 작성된 코드를 복사 붙여넣기가 아닌, not으로 이동

 

+덧붙여서,

#login-form input:focus {

    border-color: var(--yellow);

}

를 not보다 뒤에 위치시켜야 작동

 

2.

variable 파일은 따로 css파일로 만들어서 작성

variables.css

첫번째 스크린에서 추가한 파일

3.

#login-form input[value="Log In"] {

    margin-top: 30px;

    cursor: pointer;

}

커서 변경

 

02 screen