CSS

모달과 팝오버를 칼로 베듯 명확히 구분해본 적은 없었다. 그저 화면 한가운데에 떠서 다른 작업을 막으면 모달, 특정 버튼을 눌렀을 때 앵커를 기준으로 나타나면 팝오버라는 정도로 느슨하게 생각해왔다. 하지만 두 개념은 단순한 위치나 동작의 차이를 넘어, 그 목적과 사용 방식에서 뚜렷한 차이를 지닌다. 이를 제대로 이해하면 사용자 경험을 보다 세밀하게 설계할 수 있다.아래의 표에서 조금 더 체계적으로 정리해두었지만, 모달은 차단적 인터페이스다. 사용자가 모달을 닫기 전까지는 배경의 다른 요소와 상호작용할 수 없다. 이러한 차단성은 주로 중요한 작업을 처리하거나 사용자로부터 명확한 결정을 요구할 때 사용된다. 예를 들어, 삭제 확인 창이나 로그인 폼이 대표적이다.반면, 팝오버는 비차단적 인터페이스로, 배경과의..

프론트엔드 개발자들 모인 자리에 가서 '어떤 스타일링 라이브러리 좋아하세요?'하고 물어보면 못해도 30분은 할 이야기가 생긴다. 내 경우에는 여러번 밝힌 바와 같이 TailwindCSS와 ModuleCSS를 선호한다. 하지만 내 선호를 밝히면 늘 돌아오는 질문이 있다. '그것들은 동적 스타일링하기 불편하지 않아요?'하고.요즘 사용자를 늘려가고 있는 Vanila-extract나 이제는 죽어버린 StyledComponent와 비교하면 앞서 언급한 두 라이브러리는 확실히 동적 스타일링에 취약하다. 특히 TailwindCSS는 빌드 과정에서 사용된 클래스 이름만 추출해서 최종 CSS를 생성하는 'content scanning' 과정이 필요한데, 이 때문에 아래와 같이 동적으로 클래스 이름을 조합하거나 조건부로 ..

CSS를 다루다 보면 뷰포트 크기에 따라 유동적으로 변화하는 레이아웃이나 폰트 크기를 구현해야 하는 경우가 많다. 이때 반응형 디자인을 유연하게 만들어주는 함수들이 바로 min(), max(), clamp()이다. 이 함수들은 각각 최소값, 최대값, 그리고 범위를 지정한 선호값을 설정할 수 있도록 도와주며, CSS 속성에서 숫자 단위를 계산할 수 있는 기능을 제공한다.기존에는 미디어 쿼리로 복잡하게 처리하던 작업들도 이 함수들을 사용하면 훨씬 간결하고 직관적으로 구현할 수 있다. 특히 clamp() 함수는 하나의 속성 값에 최소값, 선호값, 최대값을 한 번에 설정할 수 있어 반응형 타이포그래피나 요소 크기 조절에 매우 유용하다. min() 함수는 여러 개의 값 중 가장 작은 값을 선택한다. 주로 widt..

웹 어플리케이션을 제작하는 데 있어 반응형 디자인은 필수적이고, 일반적으로 이를 처리하기 위해 CSS Media Query를 사용한다. 그러나 이 방식은 뷰포트 크기를 기준으로 하기에 컴포넌트 내부 크기 변화에 민감하게 대응하지 못한다는 한계가 존재했다. 만약 컴포넌트 자체의 크기 변화에 따라 스타일을 다르게 처리하고 싶다면 Resize Observer와 useEffect 등 JS의 도움을 받아야 했다.하지만 CSS Container Query의 등장으로 인해 JS가 아닌 CSS의 힘 만으로 개별 컴포넌트의 크기와 컨텍스트에 따라 스타일을 적용할 수 있게 되었다. 이로 인해 더 유연한 UI 설계가 가능해지며, 특히 복잡한 레이아웃을 가진 웹 어플리케이션에서 컴포넌트의 재사용성을 극적으로 끌어올릴 수 있게..