본문 바로가기

css32

[css] 망할 놈의 다크 모드 대응하기 3부: Chrome으로 확인 1. 개발자도구(F12)를 열어, 더보기 > More tools > Render 선택 2. 하단에 추가된 Render에서 Emulate CSS media feature prefers-color-scheme의 옵션을 dark로 변경 [css] 망할 놈의 다크 모드 대응하기 1부 간혹 QA 중 '화면이 완전 다르게 나온다'며 비상모드로 달려오는 경우가 있다. 망할 놈의 다크 모드이다. 급히 코드를 검색해 보면 아래의 코드를 stackoverflow에서 심심치 않게 볼 수 있다. '올레!' fresh-mint.tistory.com [css] 망할 놈의 다크 모드 대응하기 2부: 이미지 1. 이미지 전환 'prefers-color-scheme: dark'이 지원되는 브라우저에서는 아래와 같이 picture를 통.. 2023. 8. 25.
[css] 망할 놈의 다크 모드 대응하기 2부: 이미지 1. 이미지 전환 'prefers-color-scheme: dark'이 지원되는 브라우저에서는 아래와 같이 picture를 통해 간단히 이미지 전환할 수 있다 부수적인 이야기로, 다크모드 관련하여 검색해 보면, 순수한 흰색 배경의 이미지는 피하자는 글을 만날 수 있다. 어두운 배경으로 인해 빛 번짐 현상이 발생하며, 무엇보다 사용자의 눈의 피로도를 높이기 때문이다. 덧붙여, 이미지의 밝기를 줄이고 대비를 높이거나 그레이스케일을 낮춰 보다 피로도를 낮추자는 글들도 심심치 않게 찾을 수 있다. body.dark img { filter: brightness(.8) contrast(1.2); } @media (prefers-color-scheme: dark) { img { filter: brightness(.8.. 2023. 8. 25.
[css] 망할 놈의 다크 모드 대응하기 1부 간혹 QA 중 '화면이 완전 다르게 나온다'며 비상모드로 달려오는 경우가 있다. 망할 놈의 다크 모드이다. 급히 코드를 검색해 보면 아래의 코드를 stackoverflow에서 심심치 않게 볼 수 있다. '올레!' 를 외치며 dev에 올려보면, '내가 이제 복붙도 못하는 지경인가' 싶을 것이다. 아니다. 지원율이 너무나 낮을 뿐이다. 현재로서 스크립트 없이 우리가 선택할 수 있는 방법은 prefers-color-scheme 이다. 'prefers-color-scheme' 은 { } 안에 모든 컬러를 재정의하면 된다. .link { color: blue; } @media (prefers-color-scheme: dark) { .link { color: yellow; } } 다만 위와 같이 작성하면, 불필요하.. 2023. 8. 25.
[scss] @at-root가 아닌 @mixin으로 최상위 부모에 클래스 추가하기 .parent.bold .child span { font-weight: bold }를 지정하고자 할 때 @at-root를 잘못 활용하는 경우가 있다. .parent { .child { span { @at-root .bold & { font-weight: bold; } } } } 위의 컴파일 결과물은 .bold .parent .child span { font-weight: bold } 이다. @at-root를 이용하여 .parent에 .bold 클래스를 추가하고자 한다면 귀찮더라도 클래스명을 다 적어줘야 한다. .parent { .child { span { @at-root .parent.bold .child span { font-weight: bold; } } } } 그런데, 이를 간단히 해결해 주신 분이.. 2022. 5. 4.
[css] 텍스트 길이에 맞춰 너비 조절하기 grid-template-columns: minmax(최소너비, max-content) 1fr; HTML 삽입 미리보기할 수 없는 소스 위와 같은 경우, 간혹 "텍스트 길이에 맞춰 너비가 늘어나게 해주세요~" 라는 요청 때문에 로 변경하는 경우가 있다. 더이상 그러지 말자, 우리에겐 grid가 있다. HTML 삽입 미리보기할 수 없는 소스 grid-template-columns: minmax(최소너비, max-content) 1fr; 예로, grid-template-columns: minmax(100px, max-content) 1fr; 일 때, grid 첫번째 요소의 기본 너비는 100px이다. 하지만 콘텐츠가 길어 너비가 120px이 된다면, 화면에 그려지는 너비는 grid-template-columns: 120px 1fr과 같다. 결론은 과 이별하자. 가나다 가나다라마바사아자차카파타하 .gri.. 2022. 1. 25.
[css] Text Gradient with Gradient Rotate Animation 텍스트 그라디언트 효과 HTML 삽입 미리보기할 수 없는 소스 HTML 구조: Text Gradient scss 버전: .text-gradient { overflow: hidden; position: relative; display: inline-block; vertical-align: top; font-size: 40px; font-weight: 900; line-height: 1.4; &:before { content: ''; position: absolute; width: 110%; padding: 50% 0; top: 50%; left: -5%; transform: translateY(-50%) rotate(0deg); transform-origin: center; background-image: linear-gradi.. 2022. 1. 23.
[css] filter를 이용해 이미지를 white/black 실루엣 이미지로 변경 1. 화이트 실루엣으로 변경하기 -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); HTML 삽입 미리보기할 수 없는 소스 2. 블랙 실루엣으로 변경하기 -webkit-filter: grayscale(100%) brightness(0); filter: grayscale(100%) brightness(0); HTML 삽입 미리보기할 수 없는 소스 2022. 1. 22.
[css] n번째부터 m번째까지 선택하기 :nth-child(n+n):nth-child(-n+m) div:nth-child(1), div:nth-child(2), div:nth-child(3) { CSS 삽입 } 위 코드는 유지보수하기 곤란하다. 간단히 작성하자. div:nth-child(n+1):nth-child(-n+3) { CSS 삽입 } 예시: 13부터 33까지 선택 div:nth-child(n+13):nth-child(-n+33) { CSS 삽입 } 2022. 1. 22.
W3C가 어려우면 게임으로 이해하면 되지, CSS 게임! 1. FLEX Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com 2. GRID Grid Garden A game for learning CSS grid layout cssgridgarden.com 3. CSS selector CSS Diner A fun game to help you learn and practice CSS selectors. flukeout.github.io 2021. 10. 29.
[PC] Gradient Doughnut 2 / Loading See the Pen Untitled by plancktime_ (@plancktime_) on CodePen. .loading { display: flex; height: 100px; width: 100px; animation: spin 1s infinite linear; position: relative; } .start-point { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 20px; height: 20px; border-radius: 50%; background-color: #00dbde; z-index: 1; } .doughnut { width: 50%; height: 100%; box-sizing: b.. 2021. 9. 25.
[PC] Gradient Doughnut 1 See the Pen Gradient Doughnut 1 by plancktime_ (@plancktime_) on CodePen. .doughnut { display: inline-block; width: 100px; height: 100px; border-radius: 50%; padding: 20px; // doughnut width background:linear-gradient(45deg,#00dbde,#fc00ff); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: destination-out; mask-composite: exclude; } 2021. 9. 24.
[PC/MO] Pie Chart See the Pen Untitled by plancktime_ (@plancktime_) on CodePen. $pieBg: #ddd; $piePoint: #fc595d; .pie-chart { position: relative; width: 80px; height: 80px; border-radius: 50%; background: $pieBg; } .pie { position: absolute; top: 0; left: 0; width: 100%; height: 100%; &.less { clip: rect(0px, 80px, 80px, 40px); } &.more { clip: rect(0, 80px, 80px, 0); } } .pie-piece { position: absolute; top: 0.. 2021. 9. 24.
[tailwind CSS] 4. 반응/상태 선택자 추가 방법(hover, focus, checked, disabled, etc.) tailwind에서 제공하는 반응/상태 선택자는 다음과 같다. Hover Focus Active Group-hover : 부모요소에 group 클래스 추가 후, 자식 요소에 선언 Group-focus : 부모요소에 group 클래스 추가 후, 자식 요소에 선언 Focus-within Focus-visible Motion-safe Motion-reduce Disabled Visited Checked First-child Last-child Odd-child Even-child 원하는 선택자가 없을 경우: [tailwind CSS] 3. 커스텀 선택자(클래스) 추가 방법, Adding variants tailwind.config.js 1. plugin을 불러와 선택자와 클래스명을 지정하고, tailwind .. 2021. 4. 18.
[tailwind CSS] 3. 커스텀 선택자(클래스) 추가 방법, Adding variants tailwind.config.js 1. plugin을 불러와 선택자와 클래스명을 지정하고, tailwind CSS를 재생성한다. 1.1. 삽입 위치 const plugin = require('tailwindcss/plugin') // ★★ module.exports = { purge: [], darkMode: false, theme: { extend: {}, }, variants: { // ★★ }, plugins: [ // ★★ ], } 1.2. 기본형 const plugin = require('tailwindcss/plugin') // ★★ module.exports = { purge: [], darkMode: false, theme: { extend: {}, }, variants: { extend:.. 2021. 4. 18.
[tailwind CSS] 2. vscode 플러그인 추천 1. Tailwind CSS IntelliSense html 작성 시, 입력한 문자로 시작하는 클래스명들을 보여준다. 2. Tailwind CSS Explorer vscode에서 tailwind 클래스명들을 속성별로 검색 확인할 수 있다. 이와 비슷한 플러그인으로는 Tailwind Docs가 있는데, 이는 vscode에서의 바로 확인은 아니고, 검색한 클래스의 설명이 기입된 공식 사이트 페이지를 오픈한다. 3. Headwind 지정한 클래스를, 속성별로 재배열 시켜준다. 예로 다음과 같은 코드가 있다면 Mint-Coding 아래와 같이 재배열 시켜, 클래스 파악에 도움 준다. 팀워크가 아니어도, 추후 관리를 위해 강력 추천하는 플러그인이다. Mint-Coding 2021. 4. 10.

티스토리툴바