Dev ; jenna

[CSS] input checked 스크롤 상단 이동

웹접근성에 친화적인 visually hidden 스타일(tailwindcss 에서도 사용됨) .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;} But,,,,input 에 적용했더니checked 할 때 마다스크롤이 상단으로 튀는 현상 발생 어쩔 수 없이display:none; 추가 해결방안을 좀 더 찾아봐야겠다 🙄

[SCSS] mixin 으로 padding, margin 값 부여하기 (like tailwindcss)

tailwindcss 를 쓰고 싶었지만프로젝트 보안상 사용할 수 없어서mixin 으로 tailwind 따라하기 먼저 :root 에 --spacing 변수 선언body 의 font-size 16px 기준으로 4px 부여(tailwindcss 는 4배수 그리드 기준):root { --spacing: 0.25rem;}  mixin 제작@mixin p-($value) { padding:calc(var(--spacing) * #{$value});}  사용할 때는.test { @include p-(4);} 이러면0.25rem * 4 = 16px 이 나오게 됨 tailwindcss 랑 똑같이pt, pb, pl, pr, px, py 도 다 만들어주고 margin 도 마찬가지로 다 만들어주기

tailwindcss cdn 적용

내에 코드 추가 scss 파일과 동일하게css 파일에서도 @apply 로 tailwind 스타일 적용

구글 폰트 Material Symbol 사용법

내에 스타일시트 추가 속성opsz (크기) : 20 ~ 48pxwght (굵기) : 100 ~ 700FILL (채움 여부) : 0(비어있음) ~ 1(채움)GRAD (기울기 효과) : -50 ~ 200마지막 부분에 ?icon_names= 파라미터값으로 들어가 있는 부분은 본인이 선택한 아이콘명이므로, 삭제해도 됨1. HTML 코드 내에 삽입 icon name icon name은 선택한 아이콘 정보에서 하단에 보면 Icon name 영역이 있음 2. 가상 선택자로 사용 font-family 로 구글 아이콘을 선언해주고, content 에 icon name 을 넣으면 됨color, font-size, font-weight 부여 가능

[CSS] SCSS 문법

https://velog.io/@dosilv/TIL-SCSS-문법-정리 [TIL] SCSS 문법 정리 🍎 일단 배우긴 배웠는데 SASS는 뭐고 SCSS는 뭐지? 하다가 해보는 정리! velog.io