Genie of the Lamp 😶‍🌫️ Genie of the Lamp 😶‍🌫️

CSS

• [CSS] accent-color 속성으로 폼 요소 스타일링하기

  Coding 2025. 3. 6. 22:21

  웹사이트에서 체크박스, 라디오 버튼, 프로그레스 바 등 기본 UI 요소의 색상을 변경하는 것은 종종 까다롭습니다.CSS의 accent-color 속성을 사용하면 한 줄의 코드로 손쉽게 주요 UI 요소의 색상을 변경할 수 있습니다.accent-color를 사용할 수 있는 HTML 요소HTML 요소체크박스 & 라디오 버튼 색상 변경체크박스라디오 버튼input { accent-color: #3498db; /* 파란색 */} 체크박스와 라디오 버튼의 기본 강조 색상이 파란색(#3498db) 으로 변경됩니다. 슬라이더 & 프로그레스 바 스타일 변경범위 슬라이더프로그레스 바input[type="range"], progress { accent-color: #e74c3c; /* 빨간색 */} range와 progr..

  Read More
• [CSS] filter: invert() 사용법

  Coding 2025. 3. 5. 20:42

  CSS의 filter 속성은 이미지나 요소에 다양한 시각적 효과를 적용하는 데 사용됩니다.그중 invert() 필터는 색상을 반전시켜 밝은 색을 어둡게, 어두운 색을 밝게 표현하는 기능을 제공합니다.즉, 흰색(white)은 검은색(black)으로, 파란색(blue)은 주황색(orange)으로 변환됩니다.기본 문법filter: invert(값); 값은 0에서 1 사이의 **비율(%)**을 의미합니다.invert(0) → 원래 색상 유지invert(1) → 100% 반전 (완전 반대 색상)invert(0.5) → 50% 반전 (부분적으로 반전된 색상)이미지 색상 반전invert()는 특히 이미지 색상을 반전하는 데 유용합니다. See the Pen Untitled by jjung (@jjung2) on C..

  Read More
• [CSS] Grid vs Flexbox: 어떤 상황에서 어떤 걸 선택해야 할까?

  Coding 2025. 3. 4. 21:02

  CSS 레이아웃을 구성할 때 Grid와 Flexbox는 가장 많이 사용되는 두 가지 도구입니다. 하지만 각각의 특징과 활용법을 이해하지 못하면 언제 어떤 것을 써야 할지 헷갈릴 수 있습니다. 그러므로 CSS Grid와 Flexbox의 차이점을 비교하고, 각각을 언제 사용해야 하는지 살펴보겠습니다.기본개념GridFlexCSS Grid는 2차원(행과 열) 레이아웃 시스템입니다.부모 요소가 전체 레이아웃을 설정하며, 자식 요소들을 격자(grid) 구조에 배치할 수 있습니다.Flexbox는 1차원(가로 또는 세로) 레이아웃 시스템입니다.요소를 행(Row) 또는 열(Column) 방향으로 배치하고 정렬할 때 유용합니다.행(Row)과 열(Column) 모두를 조정 가능정렬과 배치가 직관적복잡한 레이아웃에 유리한 방..

  Read More
• [CSS] linear-gradient() 사용하기

  Coding 2024. 8. 12. 23:55

  웹 화면을 개발하다 보면 가끔 그라데이션 마스크를 사용해야 할 일이 생깁니다.자주 쓰는 스타일이 아니다 보니 매번 검색하게 돼서 블로그에 남겨 봅니다.  linear-gradient()는 하나의 색상에서 다른 색상으로 부드럽게 이어지는 배경을 만들 수 있습니다.기본문법background: linear-gradient(direction, color-stop1, color-stop2, ...); direction (방향): 그라디언트가 적용될 방향을 지정합니다. 각도(예: 45deg), 키워드(예: to right, to bottom), 또는 기본값(to bottom)을 사용할 수 있습니다.color-stop (색상 지점): 그라디언트가 시작되거나 끝나는 색상을 지정합니다. 색상 이름, HEX 코드, RGB..

  Read More
• 안드로이드 웹뷰에서 엘리먼트 스크롤바가 보이지 않는 현상

  Coding 2022. 4. 14. 09:47

  Android Webview app scrollbar is not showing in div element 웹 화면 그대로 앱으로 만든 프로젝트 중에 레이어 팝업(모달) 같은 창을 띄웠을 때 스크롤은 잘 됐지만 스크롤바가 보이지 않는 이슈가 있었습니다. 이유는 알 수 없지만 다른 웹뷰 앱들도 마찬가지였습니다. 구글 검색 결과 아래 css로 웹킷 스크롤바 디자인을 바꾸면서 적용됐습니다. ::-webkit-scrollbar { width: 5px; } ::-webkit-scrollbar-track { // 없어도됨 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1); -webkit-border-radius: 10px; border-radius: 10px; } ::-web..

  Read More