본문 바로가기

css/e.g.13

[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.
[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.
[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.
[css-real] 웹접근성을 고려한 .blind(hidden) 처리 스크린리더와 브라우저별, 그리고 매해 업데이트되는 내용들 때문에 여간 웹 접근성을 지키며 블라인드 처리하기가 쉽지 않다. 그래서 '이 방법으로 해결될 수 있습니다~'라는 방법은 아직 없다고 봐야 한다. 이 글에서는 잘못 쓰이고 있는 blind 처리 방법들과, 해외의 훌륭하신 분들이 다수의 리딩 테스트를 거쳐 공개한 코드들을 소개하려고 한다. 우선, 기본으로, display:none과, visibility:hidden, font-size:0, line-height:0, width:0; height:0과 같이 화면상 영역을 지니지 않게 하는 속성들은, 스크린 리딩 시 화면에 없는 영역으로 판단해 스킵한다. 따라서 blind 처리 시 위 요소 중 단 한 개라도 들어가서는 안된다. 한 줄 안에 들어가는 내용은 .. 2021. 1. 20.
[css-real] 드래그(drag) 막기 드래그 방지된 영역입니다 :) 드래그를 방지하기 위해서는, 에 아래 css 코드를 적용해야한다. 맨 위와 같이 특정영역에 지정할 수도 있지만, 타 영역이 드래그 가능하다면, 타 영역에서 포커스를 두고 긁으면, 보기에는 드래그가 안된것처럼 보이지만 이를 복사(ctrl + c)하여 메모장에 붙여넣어보면, 해당 영역이 드래그 되었음을 확인할 수 있다. /* css에 삽입하는 방법 */ body { -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none } 일부 영역에서는 드래그를 허용하고 싶다면, body에 드래그 방지 코드를 넣어놓고, 원하는 영역에 아래 코드를 삽입한다. .draggable { -webki.. 2021. 1. 11.
[css-real] 형광펜으로 표시한 듯 효과주기 형관펜표시 html : A: 프레시-민트 B: 프레시-민트 C: 프레시-민트 A css : .highlight-a{ background: linear-gradient(to top, #36fead 40%, transparent 40%); } B css : .highlight-b{ box-shadow: inset 0 -15px 0 #f3df4d; } 아래를 좀 더 두껍게 표현하고 싶다면, border-bottom 추가하면 된다. .thick{ border-bottom: 4px solid #f3df4d; } 2021. 1. 10.
[css-real]: 한줄, 또는 여러줄의 말줄임(...) 처리 방법1 말줄임 표시를 할 영역은 블록 요소이거나, 인라인 요소의 경우 display:inline-block과 넓이값 지정이 필요하다. 1. 한줄일 때, 민트라는 이름은 그리스 신화에 등장하는 님프 멘테(Menthe)에서 유래됐다. 식용 민트로 가장 널리 쓰이는 것은 페퍼민트와 스피어민트이다. 이외에도 화장품, 목욕제 등에 주로 쓰인다. 품종에 따라 향, 풍미, 잎의 색과 형태는 다양하다. 스피어민트(spearmint, Mentha spicata, Mentha viridis)는 박하속에 속하는 종의 하나로, 유럽과 아시아의 수많은 지역(중동, 히말라야, 중국 등)에 자생하며 아프리카 북서부, 북아메리카, 남아메리카, 다양한 해안섬의 일부 지역에서도 볼 수 있다. 치약에도 사용하고 담배 냄새를 없애는 향유의 원료로.. 2021. 1. 10.

티스토리툴바