to do 앱 만들면서 새로 알게 된 css 몇 가지

1. input 초기화 

input {
  border: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
input:focus {
  outline: 0;
}

 

2. color 변수 지정 및 사용

/* color palette */
:root {
  --main-blue: #2563cf;
  --font-color-primary: #292827;
  --bg-shadow: rgba(0, 0, 0, 0.1);
  --bg-hover: rgb(239, 246, 252)
}

// 사용할 때는 var()로
.task {
    color: var(--font-color-primary);
}

 

3. svg 파일 색상 변경 - svg 파일에서 fill="currentColor"로 되어 있는 부분을 직접 hex 코드로 변경

fill="#2563cf"

 

4. input placeholder css 변경

input::placeholder {
    color: var(--main-blue);
    font-weight: 600;
}

 

5. hover 했을 때 이미지 교체 - 참고 🔗

#parent {
    position: relative;
}
.hidden {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}
#parent:hover .hidden {
    display: block;
}