input에 background가 설정되어 있지 않은데 자꾸 background-color가 적용되는 현상이 있었다. input에 아이콘이나 이미지가 들어가 있을 때 input 영역 값에 저 색이 들어가니 몹시 불_편했다. 찾아보니 자동완성 기능을 사용 할 때 생기는 스타일링이였다! input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { transition: background-color 5000s ease-in-out 0s; -webkit-transition: background-color 9999s ease-out; -webkit-box-shadow:..

스크립트 코딩 컨벤션을 정하던 중 css 컨벤션에 대하여 이야기가 나왔다. css 컨벤션이 있을거라고 생각하지 못했다. 중요하지 않다고 생각했기 때문인가.. 이야기가 나온 김에 css 컨벤션 및 스타일 가이드에 대하여 알아보았다. 유용한것 같은것만 몇개 정리해보았다. CSS에서 캐멀케이스(camelCase)는 좋지 않다. css는 하이픈을 구분자로 사용하는 프로퍼티로 되어있다. .class-name { border-bottom: 1px solid #fff; font-size: 1rem; } 2. XHTML은 소문자를 사용하는 언어이다. 케밥 케이스를 사용하는것이 표준적이며 일관성을 유지 할 수 있습니다! border: none 대신 0을 사용하자. 평소에 별 생각 없이 none을 이용해왔다. 모든 inp..

next + firebase 조합으로 채팅창을 작업하던중에 , 새로운 메세지를 입력할 때 마다 가장 아래로 스크롤을 보내는 기능이 필요했다. useRef를 이용해 DOM에 접근해서 scrollIntoView()를 이용해 입력때 마다 아래로 이동하게 하려고 했는데.. 아무리해도 작동을 하지 않았다. 처음 내가 작성했던 코드는 아래와 같다. (스타일,구조 완성된 코드아님 주의) { messageList?.docs.map((e, i) => { const data = e.data() const date = data.createdAt?.seconds ? formatDate(new Date(data?.createdAt.seconds * 1000)) : null return ( {data.userName} {date..