CSS

웹 애플리케이션에서 전환 품질은 기능 완성도와 동등한 수준으로 중요하다. 사용자가 목록에서 항목을 선택해 상세 화면으로 이동할 때, 화면이 자연스럽게 이어지면 서비스는 빠르고 안정적으로 느껴진다. 반대로 동일한 기능이라도 전환이 끊기면 체감 성능과 신뢰도는 동시에 하락한다. 전환은 부가…

이 포스트는 Sunkanmi Fafowora가 css-tricks에 올린 CSS Color Functions 게시글을 번역한 것이다. 번역하는 과정에서 다소 의역이 있을 수 있으며, 일부 번역에는 사견이 포함되어있기도 하다. 몇 달 전 누군가 저에게 “웹사이트가 돋보이려면 무엇이 필요할…

CSS는 오랫동안 스타일 값을 선언하는 정적인 언어로 인식되어 왔다. 그 안에서 반복되는 패턴이나 디자인 시스템의 일관성을 유지하기 위해 Sass나 CSS-in-JS 같은 추가 도구들을 활용해 왔으며, 최근에는 CSS Custom Properties를 활용하여 값의 재사용을 가능하게 만…

모달과 팝오버를 칼로 베듯 명확히 구분해본 적은 없었다. 그저 화면 한가운데에 떠서 다른 작업을 막으면 모달, 특정 버튼을 눌렀을 때 앵커를 기준으로 나타나면 팝오버라는 정도로 느슨하게 생각해왔다. 하지만 두 개념은 단순한 위치나 동작의 차이를 넘어, 그 목적과 사용 방식에서 뚜렷한 차…

프론트엔드 개발자들 모인 자리에 가서 '어떤 스타일링 라이브러리 좋아하세요?'하고 물어보면 못해도 30분은 할 이야기가 생긴다. 내 경우에는 여러번 밝힌 바와 같이 TailwindCSS와 ModuleCSS를 선호한다. 하지만 내 선호를 밝히면 늘 돌아오는 질문이 있다. '그것들은 동적…

박스의 높이를 제한해 두면, 내부 콘텐츠가 많아질수록 넘침(overflow)은 피할 수 없다. 이를 가장 단순하게 해결하는 방법은 overflow: hidden을 사용하는 것이다. 그러나 이 방식은 시각적으로 어색한 문제가 있다. 텍스트가 중간에서 뚝 잘린 듯한 인상을 주고, 사용자는 해…

웹 애플리케이션을 제작할 때 반응형 디자인은 더 이상 선택이 아니라 기본 전제에 가깝다. 화면 크기와 디바이스 환경이 워낙 다양해졌기 때문에, UI가 뷰포트 크기에 따라 유연하게 변화하도록 만드는 일은 거의 모든 프로젝트에서 필수적으로 요구된다. 이를 위해 가장 널리 사용되어 온 수단이…

상황 진행중인 프로젝트에서 기존에 사용하던 module css가 아닌 tailwind를 사용하기로 결정되었다. 작업 빨리 쳐내야 할 때 클래스 검색하는 거로 시간을 쓰는 게 싫어서 공식문서도 읽고 카카오FE의 사용 후기도 읽어보면서 이것저것 테스트해보는 시간을 가지고 있었다. tailw…