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 도 마찬가지로 다 만들어주기

파라미터 값 가져오기

module 용 js 로 생성 getParameter.jsexport function getParameter(name) { const urlParams = new URLSearchParams(window.location.search); const value = urlParams.get(name); console.log(`getParameter("${name}") 결과:`, value); // 디버깅용 추가 return value;}

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 부여 가능

[길벗 Gilbut] 코딩 자율학습단 10기 자바스크립트 입문 - Week 02

Week 02기존 일정 : ~p.344진행 일정 : ~p.동기 Synchronous; 앞선 작업이 끝난 후 다음 작업이 실행되는 것비동기 Asynchronous; 앞선 작업이 끝나지 않아도 다음 작업이 실행되는 것자바스크립트는 비동기 타이머 Timer비동기의 대표적인 예시setTimeout() clearTimeout()setInterval() clearInterval() 스코프 Scope; 범위var 는 함수 스코프함수를 경계로 접근 가능 여부가 달라지는 것함수가 끝날 때 함수 내부의 변수도 같이 사라짐let 은 블럭 스코프블럭이 끝날 때 내부의 변수도 같이 사라짐클로저 Closure; 외부 값에 접근하는 함수, 판단 기준은 스코프정적 스코프 Lexical Scope함수가 선언된 위치에 따라 접근할 수 ..

[길벗 Gilbut] 코딩 자율학습단 10기 자바스크립트 입문 - Week 01

Week 01기존 일정 : ~p.191진행 일정 : ~p.149남은 학습은 주말에 보충으로,,🥺 자바스크립트를 완전히 처음 접하는 것은 아니였지만기초부터 제대로 다지기 위해 교재를 보았고기존에 알던 내용도 1분 퀴즈를 풀려고 봤을 때긴가민가했던 게 있어서간략히 정리해보았다(📢 업데이트는 계속 될 예정)&& 연산자앞이 참이면 뒤에 있는 값이 출력앞이 거짓이면 앞에 있는 값이 출력> 5 && 4 '' && 6|| 연산자앞이 참이면 앞에 있는 값이 출력앞이 거짓이면 뒤에 있는 값이 출력(&& 연산자와 반대)> 'hi' || 5 0 || 6 null || 6?? 연산자 (널 병합 연산자)앞이 null 이거나 undefined 이면 뒤에 있는 값이 출력아니면 앞에 있는 값이 출력> 'hi' ?? 5 0 ?? ..

[길벗 Gilbut] 코딩 자율학습단 10기 신청 - 자바스크립트 입문

제로초님의 유튜브를 통해해당 도서도 있다는 것을 알게 되었고,길벗 코딩 자율학습단도 알게 되어 신청하게 되었다 😎 근래 시간적 여유가 많아졌기도 했고늘 고민이던 프론트엔드 개발에 대해이제는 다시 새출발을 해야할 것 같아서자바스크립트 기초부터 탄탄히 하기로 마음을 먹었다화이팅,, 이번 기수에 신청 못했다면다음 기수에라도 신청 꼬우 🔽코딩 자율학습단 : 네이버 카페 (naver.com) 코딩 자율학습단 : 네이버 카페성장의 경험과 완성의 재미를 제공합니다. Python, C++, Java, C, 자바스크립트, 안드로이드, SQLcafe.naver.com 신청자 전원 참여할 수 있으므로다같이 공부할 수 있으니깐!

[React 리액트] 리액트에서 scss 설치 react scss install

css 로 사용하다가 scss 를 바로 import 하기로 했다 yarn add node-sass OR npm install node-sass