Studyyyyy

보통 input을 꾸미려면 label을 쓰라고 한다. label, ::before, ::after 등등 나도 자주 썼지만 쓸때마다 너무 복잡하다.그래서 요즘은 최대한 간단하게 css의 accent-color를 사용하여 강조색을 변경해 주는 방법을 사용하고 있다. 아래 링크에서 예시를 보면 checkbox 외 range input, process 등등 여러가지에 적용 가능하다.https://www.w3schools.com/cssref/tryit.php?filename=trycss4_accent-color W3Schools online HTML editorThe W3Schools online code editor allows you to edit code and view the result in your b..

https://hianna.tistory.com/438 [Javascript] 사용자 입력을 도와주는 datalist 알아보기태그는 사용자의 입력을 돕기 위해, 콤보박스 형태로 사용자가 추천할 수 있는 선택지를 제공하고, 자동완성 기능을 제공합니다. 1. 태그 알아보기 2. 에 value와 label 추가하기 3. default 값 지정하hianna.tistory.com 태그 뒤에 를 넣어주면 안에 있는 들을 미리 정의된 옵션을 드롭다운 리스트로 자동완성되어 만들어 보여준다.

https://hudecz.medium.com/how-to-create-a-pure-css-toggle-button-2fcc955a8984

https://zinee-world.tistory.com/468 [CSS] 'fi' letter-spacing ligature(합자) 이슈letter-spacing 을 쓰다가 이상한 글자를 발견했다. fi 가 떨어지지 않고 계속 붙어있는 것이다. Sketch에서도 이와 같은 이슈가 있었다는 걸 알았는데, CSS에서도 동일한 현상이 발견되었다. 근본적인zinee-world.tistory.com  https://blog.jeongtae.com/rem-%EA%B3%A0%EC%B0%B0:root { /* 루트 요소 폰트 사이즈, 상댓값 */ /* 전체 레이아웃의 크기를 150%로 키우기 */ font-size: 150%;}.box { /* 결과 → 16px × 150% × 2.5 = 60px */ ma..

https://velog.io/@jinsunkimdev/%EB%A6%AC%EC%95%A1%ED%8A%B8%EC%97%90%EC%84%9C-tailwindcss-styled-components-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0 리액트에서 tailwindcss + styled-components 사용하기🤔 Tailwindcss? 최근 리액트에 테일윈드를 사용하고 있다. tailwindcss의 장점은 기존의 css가 HTML태그의 classname을 정하고, css파일에서 따로 작성을 해줘야하는 반면에, classname을 정할 필요가 없이 태velog.io https://velog.io/@posinity/%EC%9E%90%EC%A3%BC-%EC%93%B0%EB%8A%94-t..