TIL@220503

'검색이 되는' 개발자가 좋은 대우를 받는다. 준비된 실력을 적극적으로 PR하자.

CSS-module을 사용하여 이름 충돌을 막는 동시에, 스타일링과 로직을 분리할 수 있다. cx 라이브러리로 className을 만들어 주면 state에 따른 이름을 조금 더 깔끔히 만들 수 있다.

<progress> tag로 슬라이더 구현할 수 있다.

:valid

• <input>이나 다른 <form> element에서 유효한 값인지에 따라 스타일 지정

• example (출처: mdn)

  <div>
    <label for="fname">First name *: </label>
    <input id="fname" name="fname" type="text" required>
    <span></span>
  </div>
  

  input:invalid {
    border: 2px solid red;
  }
  
  input:invalid + span::before {
    content: '✖';
    color: red;
  }

reset css : browser 개성 없애기

pointer-events: none 하면 클릭 이벤트 무시된다.

line-height를 heigh와 같게 해서 세로 가운데 정렬

chrome dev tools에서 user agent(browser 기본 속성)

기기 사이즈별로 다른 크기의 이미지를 받게 하는 방법으로 최적화할 수도 있다.

input type='checkbox' -> click할때마다 onChange

react-use