목록CSS (12)

어쩌다 알게 된 ƪ(•̃͡•̃͡ ƪ

안드로이드(갤럭시)에서만 버튼이 안 잡히는 이슈

{ 동작 }}> 리액트에서 이렇게 되어있는 코드였는데웹 모바일, ios는 다 잘 되는데안드로이드 폰에서만 버튼 동작이 안되는 이슈가 있었다.방법 1.안드로이드에선 버튼 태그 안에 글자가 없거나 하면 width를 못잡는 경우가 있다고 함=> min-width랑 min-height 주기 방법2.svg가 버튼의 클릭요소를 뺏어간 경우=> svg에 pointer-events:none; 주기 방법3.position:absolute 인 경우=> 나는 해당 안 됨
CSS 2025. 12. 29. 15:42
Sass에서 반복문(@for)과 변수로 클래스/스타일 중복 제거하기

🔖 기본 sass 방법=> 중복으로 써야해서 코드가 길어짐button{ .&btn_time0{background-image:url(../../assets/img/btn_time0.png);} .&btn_time1{background-image:url(../../assets/img/btn_time1.png);} .&btn_time2{background-image:url(../../assets/img/btn_time2.png);} .&btn_time3{background-image:url(../../assets/img/btn_time3.png);}} 🔖 중복을 줄이기 위해 반복문(@for) 사용@for $i from 0 through 3{ &.btn_time#{$i}{ ..
CSS/SCSS 2025. 11. 26. 11:02
폴리필(polyfill)

✅ 폴리필(polyfill)이란?옛날 브라우저에서 최신 기능이 작동하지 않을 때,그 기능을 흉내 내서 동작하게 만들어주는 "보조 스크립트"예요.📌 쉽게 비유하자면✨최신 기능을 못 알아듣는 브라우저에게“이런 식으로 하면 똑같이 동작해~” 하고 가르쳐주는 통역사 같은 자바스크립트 코드예요.🧠 예시: :focus-visible:focus-visible은 Chrome, Firefox에서는 잘 작동하지만Safari의 일부 버전에서는 지원하지 않음→ 이때 focus-visible 폴리필을 추가하면, Safari에서도 마치 지원하는 것처럼 동일한 효과가 적용됨✅ 폴리필 사용 방법 (예: focus-visible)👉 focus-visible 폴리필 GitHubhtml복사편집script src="https://un..
CSS 2025. 6. 19. 17:13
[Bootstrap] SCSS 변수 찾기, rfs() 가 뭔가?

이 코드를 📁 node_modules/bootstrap/scss/_type.scss 에서 찾았는데해당 $font-size라는 변수명이 node_modules/bootstrap/scss/_variables.scss에 없당 -_-@each $display, $font-size in $display-font-sizes { .display-#{$display} { @include font-size($font-size); font-weight: $display-font-weight; line-height: $display-line-height; }}  일단 bootstrap 폴더에서만 검색       $font-size가 정의된 파일이 없어서 폴더 내 전체 검색을 해봐도 정의된 내역은 없다...
CSS/Bootstrap 2025. 4. 9. 20:06
[Bootstrap] @use 'sass:map'; map.get(), map-get(), map-deep-get()

@use 'sass:map';.navigation { &-menu { display: flex; flex-wrap: wrap; #{ $self } { @include padding((map.get($navigation, padding-y) * 0.5) 0); width: map-deep-get($header, dropdown, width); border: none; border-radius: map-deep-get($header, dropdown, border-radius); box-shadow: $box-shadow; } #{ $self ..
CSS/Bootstrap 2025. 4. 8. 20:50
[Bootstrap] @use 'sass:list'; / Dart Sass(모듈 시스템) 사용법

@use 'sass:list';@function map-deep-set($map, $keys, $value) { $maps: ($map); $result: null; @for $i from length($maps) through 1 { $current-map: list.nth($maps, $i); $current-key: list.nth($keys, $i); $current-val: if($i == list.length($maps), $value, $result); $result: map.merge( $current-map, ( $current-key: $current-val,..
CSS/Bootstrap 2025. 4. 8. 20:44
Prev 1 2 Next