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

프론트엔드

• [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