색상 모델(color space)은 웹 디자인에서 아주 중요한 역할을 합니다. CSS에서는 기존에 RGB나 HSL 모델이 주로 사용되었지만, 최근에는 새로운 색상 모델인 OKLCH가 도입되어 점점 많은 프로젝트에서 채택되고 있습니다. 이번 포스팅에서는 OKLCH이 기존 색상 모델과 어떻게 다른지 알아보고, 간단한 실습을 통해서 OKLCH의 특장점을 살펴보겠습니다. OKLCH 색상 모델이란? 색상 모델(color model)이란 색상을 나타내기 위해서 사용되는 모델 또는 시스템을 뜻합니다. 아주 옛날부터 많이 사용되었던 색상 모델인
CSS에서 자식이나 후손 요소는 아주 쉽게 선택할 수 있지만, 부모나 조상 요소를 선택하는 것은 불가능한 일이 었습니다. 그래서 오랫동안 자바스크립트를 동원해서 이러한 문제를 해결하곤 했었죠. 하지만 CSS에 :has() 가상 클래스가 추가되면서 이것도 이제 옛말이 되었습니다. 웹 개발자들이 많이 기다렸던 만큼 2023년 State of JS 설문 조사 가장 많이 채택된 기능으로 뽑히고도 했었죠. 이번 포스팅에서는 비교적 최근에 CSS에 추가된 기능인 :has() 가상 클래스를 어떻게 사용하는지 알아보도록 하겠습니다. 본 포스팅은
CSS에서 스타일이 적용되는 범위를 제한하는 일(CSS Scoping)은 오랫동안 웹 개발자들에게 굉장히 커더란 숙제였습니다. 소규모 웹사이트에서는 스타일 충돌을 막기 위해서 BEM(Block Element Modifier)와 같이 클래스의 이름을 일관적으로 짓기 위한 섬세한 규칙을 정해놓고 모든 개발자들이 기억하고 따라야 했습니다. 어느 정도 규모가 있는 앱 애플레케이션을 개발할 때는 React, Svelte, Vue와 같은 프론트엔드 프레임워크의 도움을 받거나 CSS 모듈 또는 CSS-in-JS를 사용해야 특정 컴포넌트에만 스타
웹 개발을 하다보면 CSS를 작성할 때 원하는 스타일이 우선적으로 적용되지 않아서 골치가 아플 때가 많습니다. 특히 대규모 프로젝트에서는 여러 CSS 파일에서 스타일을 가져오다 보니 스타일의 우선순위를 파악하는 것이 쉽지 않죠. 이런 문제를 해결하기 위해 CSS에는 @layer라는 새로운 at-rule을 도입되었습니다. 이번 포스팅에서는 @layer를 사용하여 CSS 스타일 시트를 계층화하여 우선순위를 효과적으로 설정하는 방법에 대해서 알아보겠습니다. 기존의 스타일 우선순위 관리법 CSS에 @layer가 없던 시절에는 동일한 요소를
CSS 코드를 작성하다 보면 "이 속성 순서가 맞나?", "컬러 값을 hex로 쓸까 rgb로 쓸까?", "이 선택자는 너무 복잡한 거 아닌가?" 같은 고민을 하게 되는데요. 특히 여러 명이 함께 작업하는 프로젝트에서는 각자 선호하는 CSS 작성 스타일이 달라서 코드 리뷰 때마다 사소한 의견 차이로 시간을 낭비하기 일쑤입니다. 🤔 자바스크립트에는 ESLint라는 훌륭한 린터가 있어서 코드 품질을 자동으로 검사하고 일관된 스타일을 유지할 수 있는데요. CSS에도 이와 똑같은 역할을 해주는 도구가 있습니다. 바로 Stylelint입니다
지난 포스팅는 HTML, CSS, JavaScript 만으로 UI 컴포넌트를 만들 수 있는 웹 표준 기술인 웹 컴포넌트(Web Components)에 대해서 기본 개념을 잡아보았습니다. 이번 포스팅에서는 웹 컴포넌트를 좀 더 제대로 쓰기 위해서 사용자 정의 요소에 속성(attribute)으로 주어진 값을 활용하는 방법에 대해서 배우도록 하겠습니다. HTML 템플릿 작성 우선 웹 컴포넌트에서 사용할 HTML 코드를 보관하기 위한 HTML 템플릿을 작성해보겠습니다. HTML 템플릿이란 <template> 요소를 사용해서 작성하는 HTM
컴포넌트 기반 UI 개발의 패러다임을 주도한 React가 등장한지도 어느 덧 10년이 넘었네요. 이제 Vue.js, Svelte, Angular 등 어떤 프론트엔드 프레임워크를 사용하든 현대 웹 개발에서 컴포넌트 기반으로 UI 개발하는 것은 거의 당연한 얘기가 되었죠. 그리고 마침내 웹 컴포넌트(Web Components)를 통해서 별다른 프론트엔드 프레임워크가 없어도 웹 표준 기술만을 이용해서 UI 컴포넌트를 만들 수 있는 길이 활짝 열렸습니다. 이번 포스팅에서는 UI 컴포넌트를 만들 수 있는 웹 표준 기술인 웹 컴포넌트의 기본
CSS 네스팅(Nesting)은 어떤 선택자 내부에 다른 선택자를 넣어서 계층적인 스타일이 가능케하는 문법입니다. 예전에는 SCSS, SASS, LESS와 같은 CSS 전처리기를 사용해야 쓸 수 있던 기능이 었지만, 최근에는 CSS 표준에도 CSS Nesting이 정식으로 도입되어 Vanilla CSS에서도 사용이 가능해졌습니다. 이번 포스팅에서는 CSS Nesting을 왜 사용해야하고 어떻게 사용하는지에 대해서 알아보겠습니다. 본 포스팅은 CSS 선택자(selector)와 결합자(combinator)에 대한 기본적인 이해가 필요합
웹에서 아이콘(icon)과 텍스트(text)를 함께 배치해야 하는 경우가 많습니다. 예를 들어, 버튼(button) 안에 아이콘과 텍스트가 같이 있으면 사용자에게 해당 버튼의 용도를 좀 더 빠르게 전달할 수 있습니다. 뿐만 아니라 같은 버튼인데 데스크탑 화면에서는 텍스트만 모바일 화면에서는 아이콘만 보여줄 수도 있지요. 하지만 웹 개발을 하다보면 아이콘과 텍스트를 나란히 가로 배치하는데 의외로 어려움을 겪을 수 있는데요. 이번 포스팅에서는 이럴 때 적용할 수 있는 CSS 스타일링 요령에 대해서 알아보겠습니다. HTML 마크업 스타일
많은 양의 내용을 보여줘야하는 웹페이지에서 목차(TOC, Table of Contents) UI를 쉽게 볼 수 있는데요. 사용자가 목차에 있는 링크를 클릭하면, 번거롭게 스크롤을 여러 번 내리지 않아도 해당 페이지의 특정 지점으로 바로 건너뛸 수 있기 때문에, 더 나은 경험을 제공할 수 있습니다. 하지만 이 때 스크롤링이 너무 빠르게 일어나기 때문에 기존에 보던 화면과 이동한 화면이 비슷한 경우 사용자에게 혼선을 줄 수도 있는데요. 이번 포스팅에서는 함께 간단한 목차 UI를 구현하면서, 어떻게 하면 좀 더 부르럽게 스크롤링을 하여
CSS로 웹사이트의 레이아웃을 잡다보면 어떤 HTML 요소의 높이를 브라우저의 화면에 맞추고 싶을 때가 있죠? 웹 페이지의 풋터(footer) 영역을 화면 하단에 붙이고 싶을 때도 그렇고 모바일에서는 네비게이션 버튼을 화면 하단에 두기도 하니까요. 이번 글에서는 CSS로 화면 높이의 HTML 요소 만드는 다양한 방법에 대해서 알아보겠습니다. 흔히 범하는 실수 CSS 초보자들이 HTML 요소의 높이를 스타일할 때 하기 쉬운 실수가 있는데요. 바로 무작정 height 속성을 100%로 설정하고 해당 요소의 높이가 화면 높이만큼 커질 거
HTML에서 체크 박스나 라디오 버튼과 같이 양식(form)을 구성하는 요소들은 CSS로 스타일하기가 까다롭기로 악명이 높은데요. 브라우저에서 제공하는 기본 스타일대로 두자니 너무 올드해보이고 직접 스타일을 하자니 다른 HTML 요소처럼 쉽게 스타일이 되지 않으니까요. 그런데 CSS 속성 딱 하나로 이렇게 스타일이 어려운 HTML 요소를 나름 그럴 듯하게 스타일할 수 있다는 사실을 알고 계셨나요? 이번 포스팅에서는 최소한 노력으로 최대 스타일 효과를 낼 수 있는 CSS의 accent-color라는 유용한 속성을 소개해드리겠습니다.
예전에는 웹에서 너비와 높이가 제한된 상황에서 이미지를 효과적으로 보여주는 것이 쉽지가 않았는데요. 그래서 이미지의 왜곡을 피하기 위해서 어쩔 수 없이 대신 배경 이미지를 사용해서 처리해야 하는 경우가 많았습니다. 하지만 다행히도 최근 몇 년 동안 CSS에서 이미지 요소를 다루는 방식이 상당히 개선되었습니다. 이번 포스팅에서는 이미지를 보여주는 방식을 결정하는 CSS의 object-fit 속성에 대해서 다양한 예제를 통해 최대한 쉽게 설명드리겠습니다. 이미지 본래 크기 HTML에서 <img> 요소를 사용할 때 너비나 높이를 지정해주
CSS에서는 포커스 상태를 스타일링하기 위해 focus, focus-visible, focus-within과 같은 가상 클래스(pseudo class)를 제공하는데요. 그런데 이 녀석들이 이름이 묘하게 비슷해서 정확하게 언제 어떻게 쓰시는지에 대해서 햇갈려하시는 분들이 많은 것 같습니다. 이번 포스팅에서는 CSS의 focus와 focus-visible 그리고 focus-within 가상 클래스에 대해 자세히 알아보고, 각각이 나타내는 포커스 상황과 용도와 차이점을 비교해보겠습니다. HTML 요소의 포커스 상태 CSS의 포커스(foc
어떤 웹 프로젝트를 하든 브라우저의 내장 스타일에 영향을 최소화하면서 일관적인 UI를 구현하는 것은 매우 중요한 고려사항인데요. 이번 포스팅에서는 Tailwind에서 제시하고 있는 이러한 CSS 초기화 문제에 대한 해답인 Preflight에 대해서 알아보겠습니다. Preflight란? Preflight는 Tailwind에서 가장 근간이 되는 기본 스타일시트(stylesheet)이며 Tailwind로 스타일한 웹 페이지가 어느 브라우저에서 열든 일관적으로 보이도록 해주는데요. Tailwind를 사용하는 것을 "비행"이라고 비유하여 T
Tailwind가 좋다는 소문을 듣고 막상 써보려고 해도 초기 설정에서 어려움을 겪을 수 있는데요. tailwindcss 패키지 뿐만 아니라 postcss, autoprefixer와 같은 추가적인 패키지 설치도 필요한데다가, tailwind.config.js와 postcss.config.js 등 설정이 다소 복잡하게 다가올 수 있기 때문입니다. 이러한 Tailwind의 진입 장벽을 느끼시는 분들을 위해서 이번 포스팅에서는 Play CDN을 사용해서 번거로운 초기 설정을 건너띄고 좀 더 간편하게 Tailwind를 써볼 수 있는 방법에
Tailwind는 최근 웹 개발 분야에서 상당히 인기를 끌고 있는 차세대 CSS 프레임워크인데요. 워낙 호볼호가 많이 갈리다보니 개발자 커뮤니티에서 단골 논쟁거리가 되기도 합니다. Tailwind에 대한 첫 번째 포스팅으로 이번 글에서는 Tailwind에 대한 기본 개념과 기존에 우리가 스타일링해온 방식과 비교해서 무엇이 다른지에 대해서 간략하게 알아보겟습니다. Tailwind란? Tailwind는 쉽게 말해 엄청나게 많은 유틸리티(utility) 클래스로 이루어진 CSS 프레임워크입니다. Tailwind가 제공하는 유틸리티 클래스
많은 웹 개발자분들이 HTML 문서 내에서는 띄어쓰기를 여러 번 하더라도 한 번만 띄어쓰기가 되고, 들여쓰기나 줄바꿈이 무시되는 현상을 한번 쯤은 경험하셨을텐데요. 사실 이러한 HTML 요소 내의 공백 처리 방식은 CSS의 white-space 속성을 이용하여 쉽게 변경할 수가 있다는 사실을 알고 계셨나요? 공백 문자 우선 HTML에서 어떤 문자를 이용해서 공백을 나타낼 수 있는지 이해할 필요가 있는데요. 바로 띄어쓰기(s), 들여쓰기(t), 줄바꿈(n)이 대표적으로 공백을 나타내는 문자지요? 이러한 문자들을 아무리 연속해서 많이
웹 개발을 하다보면 아래와 같이 종종 영단어가 너무 길어서 모바일 환경과 같이 좁은 뷰포트(viewport)에서 부모 요소 밖으로 밀려나오는 경우를 접할 수 있는데요. 꼭 영문 웹사이트가 아니더라도 요즘에는 한국어 컨텐츠에도 워낙 외래어가 많이 사용되고, 게다가 인터넷 URL과 이메일 주소가 대부분 영어로 되어 있어서 의외로 한국어 웹시아트를 구현할 때도 쉽게 겪을 수 있는 문제입니다. 이번 포스팅에서는 웹에서 이렇게 원치 않게 부모 요소 밖으로 삐져나오는 영단어를 처리하는 다양한 방법에 대해서 알아보겠습니다. 영어와 한국어의 줄바
우리는 보통 웹페이지를 2차원 공간으로 생각하고 웹 개발을 하는 경우가 많은데요. 하지만 복잡한 웹페이지를 구현할 때는 마치 3차원 공간처럼 요소를 앞뒤로 겹쳐서 배치해야 경우가 생기기 마련이죠. 이번 포스팅에서는 이렇게 웹에서 요소의 Z축 방향의 깊이를 결정하는 CSS의 z-index 속성에 대해서 배워보겠습니다. z-index가 없을 때 요소 간 상대적 깊이 z-index 속성에 대해서 본격적으로 배우기 전에 먼저 z-index가 없을 때 어떻게 요소(element) 간의 상대적 깊이가 결정되는지에 대해서 이해하는 것이 중요한데