랜덤 컬러를 생성하기 앞서 HSL을 알아보자 HSL Hue (색조) 색조는 0에서 360까지의 색상값을 가진다. 0은 빨간색, 120은 녹색, 240은 파란색이다. (360은 빨간색) *숫자만 기재 Saturation (채도) 채도는 백분율 값이다. 0%는 회색의 색조를 의미, 100%는 전체 색상이다. *% 단위 필수 Lightness (명도) 명도는 백분율 값이다. 0%는 검은색, 100%는 흰색이다. *% 단위 필수 HSL 문법 hsl(100, 100%, 50%) // #5f0 hsl(235, 100%, 50%, .5) // #0015ff with 50% opacity hsl(235, 100%, 50%) // CSS Colors 4 space-seperated values 랜덤 컬러 생성 (채도, ..
#01 노트 앱 만들기 https://yeongseungjeong.tistory.com/80 [React] 리액트를 사용하여 간단한 노트 앱 만들기 #01 리액트 강의만 들으면서 따라친지 어언 12398744일.. 리액트랑 친한듯 안 친한듯 지내고 있다가 간단하게 뭐라도 쳐보자! 해서 만들게 된 노트앱 투두리스트도 고민 했었지만 페이지 이동이 있게 yeongseungjeong.tistory.com 이전에 노트 앱을 만들 때 CSS Modules 방법으로 스타일 적용을 했었다 className의 고유성과 유지보수에 용이하다는 장점이 있지만 리액트 개발자들이 많이 사용하는 styled-components도 직접 써보고 편리한 방법으로 사용해 보고 싶어서 기존 css-modules 방식으로 작성된 스타일들을 ..
🔖 Basic CSS # 인라인 스타일
JS 파일로 작성된 프로젝트를 TS로 변환하던 과정에서 문제가 발생했다. 다른 변수들은 타입을 지정해줘서 문제 없이 잘 적용이 되었는데 useState의 set 함수 부분에서 빨간줄이 사라지지 않아 고뇌.. 문제상황 const [notes, setNotes] = useState([]); const sortNotes = () { let newList: noteTypes[] = []; ... setNotes(newList) // error 발생 Argument of type 'noteType[]' is not assignable to parameter of type 'SetStateAction'. Type 'noteType[]' is not assignable to type 'never[]'. Type 'n..
