[CSS] OKLCH는 어떻게 RGB와 HSL을 대체할 수 있었을까

CSS에서는 오랫동안 RGB와 HSL이라는 익숙한 색상 모델을 사용해 왔다.하지만 사람의 눈에 더 자연스럽고 예측 가능한 색상 표현 방식이 요구되면서 OKLCH라는 새로운 색상 모델이 주목받고 있다.이 글에서는 OKLCH가 주목받는 이유와 기존 색상 모델의 한계를 비교하며 OKLCH의 특징과 장점을 소개하려 한다. P3 색상우선 OKLCH를 이해하려면 디스플레이 색역에 대한 이해가 필요하다. 대부분의 디스플레이는 인간이 볼 수 있는 모든 색을 표현하지 못한다.현재 가장 보편적으로 사용되는 색상 모델인 sRGB는 사람 눈에 보이는 색상의 약 35%만 표현할 수 있다.이에 비해 최신 디스플레이는 약 30% 더 넓은 색상 영역을 표현할 수 있고, 이를 P3(wide-gamut) 라고 부른다. 기존의 RGB, ..

• format_list_bulleted HTML CSS
• · 2025. 5. 5.
• textsms

[CSS] Tailwind로 콘텐츠의 길이와 상관없이 푸터를 항상 하단에 고정하기

문제 상황데이터를 로드하는 과정 혹은 콘텐츠가 없을 때, 푸터가 화면의 중간까지 올라온다. 사용자에게 일관적인 UI를 제공하기 위해 콘텐츠의 길이가 짧을 때에도 푸터를 항상 화면 아래에 고정하는 방향으로 수정했다. Next.js 및 Tailwind 구현 코드📌 Next.js 및 Tailwind를 기준으로 설명한다./* globals.css */html,body { min-height: 100vh; ✅ 화면 전체 높이 확보}`global.css` 파일에서 `html, body`에 `min-height: 100vh`를 추가한다. export default function RootLayout({ children,}: { children: React.ReactNode;}) { return ( ..

• format_list_bulleted HTML CSS
• · 2025. 4. 6.
• textsms