본문 바로가기

webdesign/CSS

grid > overflow(border-radius) 삑사리 grid 안의 셀에 overflow처리한 이미지가 텍스트와 같이 있을경우 브라우저 사이즈가 컨텐트 사이즈 이하로 작아질 경우 overflow처리된 width가 무시되고 아래와 같이 줄어듬 overflow 속성을 없애면 grid 밖에서 border-radius 값을 주고 overflow:hidden 처리한 것과 같은 효과, width 줄어드는 현상 없음 - 사파리+파이어폭스+크롬 현재버전에서 OK 2023. 12. 20. 20:07 더보기
css: dvh, svh, lvh / 100vh 모바일 오류(이전 기록+업데이트) Use these instead of vh min-height:100vh; min-height:100dvh; https://caniuse.com/?search=dvh "dvh" | Can I use... Support tables for HTML5, CSS3, etc Small, Large, and Dynamic viewport units Viewport units similar to `vw` and `vh` that are based on shown or hidden browser UI states to address shortcomings of the original units. Currently defined as the `sv*` units (`svb`, `svh`, `svi`, `svmax`, .. 2023. 12. 11. 17:58 더보기
mix-blend-mode: multiply; + backdrop-filter: blur 에러 mix-blend-mode: multiply; 위와 같이 정의된 블렌드모드 레이어A 아래 블렌드 없는 레이어B가 위치할 경우 fixed되어 A, B 레이어 위에 위치된 레이어의 blur 필터는 B레이어의 텍스트, svg 라인에 블러어 적용이 되지 않는 에러가 발생 background: hsla(0deg, 0%, 100%, 0.3); backdrop-filter: blur(10px) saturate(150%); -> text나 svg 라인포함한 엘리먼트에 배경칼라 추가하면 블러어 제대로 작동 - white여도 무관 / html이나 body에 배경칼라 넣어도 교정됨 2023. 11. 2. 00:40 더보기
scroll-behavior: smooth; scroll-behavior: smooth; 정의돼 있을때 GSAP scroll triger 모바일 에러. flickering 2023. 11. 2. 00:37 더보기
tricky 'sticky position' sticky 포지션을 취하는 경우 바깥 wrapper(바로 위의 래퍼만이 해당되는 것이 아니라 상위 어느 래퍼이든)에 overflow:속성이 hidden일때 sticky가 제대로 렌더링되지 않음 2023. 10. 24. 17:29 더보기
non-hyphenation of capitalized words https://studiok40.com/things-that-drive-me-crazy-in-css-non-hyphenation-of-capitalized-words/ CSS rules that drive me crazy: non-hyphenation of capitalized words - Studio K40 Sometimes I spend an hour trying to figure out what is wrong with my code, only to finally figure out that this is a “browser feature“, not a bug with my CSS. According to https://www.w3.org/TR/css-text-3/#hyphenation Corre.. 2023. 10. 23. 21:48 더보기
Sass converter ignores @charset ? Sass converter ignores @charsetlink Sass keeps the @charset declaration only if needed (non-ASCII character in your file). Anyway, you file will be utf-8 as sass first checks the Unicode byte order mark, then the @charset declaration, then the Ruby string encoding. If none of these are set, it will assume the document is in UTF-8. Sass documentation 또하나의 래빗홀 🕳🐇 을 막 빠져나왔... dart sass 컴파일러 사용 후 컴파.. 2022. 7. 9. 20:27 더보기
🌈 🕳🐇 CSS Media Queries for iPad Pro Media Queries for Standard Devices iPad /* ----------- iPad 1, 2, Mini and Air ----------- */ /* Portrait and Landscape */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) { } /* Portrait */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixe.. 2022. 1. 24. 19:07 더보기

티스토리툴바