폼 CSS 넣기

완성한 CSS 는 이렇다

 

이번 강의의 CSS 목표

1. 입력폼 수직 가운데로 정렬

2. 입력폼 경계선 없애고, 입력폼 경계 밖 공간(패딩) 패딩 주기 

3. Placeholder 회색 해주기(opacity 활용 0, 0, 0, 0.4) 

 

#login-form {

  display: flex;           /* 일단 일렬로 정렬 */

  flex-direction: column;     /* 일렬로 정렬된 폼들을 column기준으로 수직 정렬 */

  margin: 0px 30px;        /* 위아래 마진은 없고(패딩줄거임) 양옆으로 30px 마진 */

}

#login-form input {

  border: none;           /* 경계선 없애기 */

  padding: 15px 0px;  /* 위아래 패딩 15ox */

  font-size: 18px;        /* placeholder 사이즈 18 */

  border-bottom: 1px solid rgba(0, 0, 0, 0.2);         /* 아랫선만 주기 */

  margin-bottom: 25px;                                          /* 트랜지션 가장 마지막에 넣었다. 경계선 색깔 0.3초 나타나기 */

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

}

#login-form input::placeholder { /* login form에 있는 input 중 placeholder에만 적용 되도록 명시 */

  color:rgba(0, 0, 0, 0.4);

}

#login-form input:focus {

  border-color: var(--yellow); /* 카카오톡 노란색 color picker로 따와서 폼 포커스때만 옐로우로 구분 주었다 */

 

}

var(--yellow)는 여기서 따로 variables.css 파일을 css 스타일 파일에 import해주어서 가능한 것이다.

이 색을 사용할때마다 넘버링을 하지 않고 --yellow로 변수만 써주기 위해서다.