Genie of the Lamp 😶&zwj;🌫️

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..

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

[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) 모두를 조정 가능정렬과 배치가 직관적복잡한 레이아웃에 유리한 방..

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

[GSAP] scrollTo() 함수 기본 사용법

Coding 2024. 6. 2. 23:06

scrollTo()GSAP에서 ScrollToPlugin을 사용해 브라우저 스크롤을 특정 위치로 부드럽게 스크롤할 수 있습니다. 우선 기본적으로 gsap과 ScrollToPlugin을 프로젝트에 불러와야합니다.cdn을 통해 불러오겠습니다. 창을 위에서 500px 위치로 스크롤 이동하려면우선 'gsap.to()' 함수를 호출하고 'scrollTo' 속성에 숫자 500을 넣어서 간단하게 이동시킬 수 있습니다.gsap.to(window, {duration: 1, scrollTo: 500}); 특정 요소로 스크롤할 수도 있습니다. 예를 들어, '#section2'라는 요소로 스크롤하려면 아래처럼 적어주면 됩니다.gsap.to(window, {duration: 1, scrollTo: "#section2"}); ..

[GSAP] ScrollTrigger 시작 시점 리턴 값 얻는 방법

Coding 2024. 3. 5. 22:15

var myScrollTrigger = ScrollTrigger.create({ trigger: "#id", start: "top top", endTrigger: "#otherID", end: "bottom 50%+=100px", }); // ScrollTrigger 시작 지점으로 스크롤 포커스 가도록 가능 gsap.to(window, { duration: 0.5, scrollTo: myScrollTrigger.start, }); ScrollTrigger [properties] start start : Number [read-only] The ScrollTrigger's starting scroll position (numeric, in pixels). Details [read-only] The Scro..

[SCSS] 내 기준 유용하게 사용하고있는 scss mixin 모음

Coding 2023. 7. 14. 12:11

작업하면서 유용하게 사용하고 있는 SCSS @mixin 모음입니다. 필요한 mixin이 생기면 계속 업데이트 할 예정입니다. @charset "utf-8"; /* *-------------------------------------------------------------------* | FUNCTION | *-------------------------------------------------------------------* */ @function vw($pixels) { @return ($pixels/360)*100vw; } @function grid($columns, $column) { @return percentage(1/$columns*$column); } /* *--------------..

[CSS] aspect-ratio 속성으로 object 비율 맞추기 (+크로스 브라우징)

Coding 2023. 7. 13. 11:18

Intro 가로세로 비율을 다룰 수 있는 aspect-ratio 속성은 매우 유용한 기능 중 하나입니다. img, video, iframe, div 등 모든 태그에 사용가능합니다. 이 유용한 aspect-ratio 속성을 자세히 알아보려고 합니다. 사용방법 사용방법은 간단합니다. .element { aspect-ratio: 16 / 9; } aspect-ratio 뒤에 원하는 비율을 적어주기만 하면 됩니다. 내가 원하는 비율을 element에 정의하고 내부 object에 object-fit: cover를 넣어주면 object가 비율에 맞게 꽉 차게 보여 줄 수 있습니다. .element { aspect-ratio: 16/9; overflow: hidden; } .element img { width: 10..

ABOUT ME

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

티스토리툴바

ABOUT ME

전체 글

티스토리툴바