모바일 웹을 만들다 보면 PC와 안드로이드에서는 멀쩡한데 아이폰에서 input이나 textarea를 누르는 순간 화면이 갑자기 확대되는 경우가 있습니다. 사용자는 입력창을 눌렀을 뿐인데 페이지 전체가 커진 것처럼 보이고, 입력을 끝낸 뒤에도 화면 배율이 어색하게 남아 UI가 망가진 것처럼 느껴집니다. 이 문제는 무작정 viewport 설정을 막는 것보다 입력 요소의 실제 글자 크기부터 확인하는 편이 빠릅니다. 특히 CSS에는 16px를 지정했다고 생각했는데 최종 계산값은 더 작아진 경우가 의외로 많습니다. 먼저 자동 확대인지 키보드 때문에 화면이 움직인 것인지 구분합니다 아이폰에서 입력창을 눌렀을 때 발생하는 화면 변화가 전부 같은 문제는 아닙니다. 입력창과 주변 콘텐츠가 함께 커져 보인다입력 후 화면 ..

Flex 박스 안의 제목이나 URL이 부모 영역을 뚫고 나가는데 width: 100%를 줘도 왜 해결되지 않을까요? 대부분은 너비 자체보다 Flex 아이템의 기본 최소 너비가 원인입니다. 특히 글자가 긴 제목, URL, 파일명, 말줄임표 UI에서 자주 발생하며, 해당 Flex 아이템에 min-width: 0을 지정하면 예상보다 간단하게 해결되는 경우가 많습니다. 왜 Flex 아이템은 공간이 부족해도 더 줄어들지 않을까 Flexbox를 처음 사용할 때 가장 헷갈리는 부분 중 하나가 flex: 1을 줬는데도 자식 요소가 부모 너비를 넘어가는 현상입니다. 예를 들어 아이콘 옆에 긴 파일명을 표시하는 구조를 생각해보겠습니다. html 📄 very-long-file-name-that-keeps-going... ..

스크롤할 때 이미지가 나타나거나, 상단 진행 막대가 차오르거나, 카드가 살짝 움직이는 효과를 만들 때 초보자가 가장 먼저 떠올리는 방법은 자바스크립트의 scroll 이벤트입니다. 처음에는 잘 움직이는 것처럼 보여도 효과가 여러 개로 늘어나면 스크롤이 미세하게 끊기거나 모바일에서 버벅이는 경우가 생깁니다. 이때 흔히 하는 실수가 throttle 시간을 계속 조절하거나 requestAnimationFrame을 덧붙이는 것입니다. 물론 자바스크립트가 필요한 상황도 있지만 단순히 스크롤 위치에 맞춰 애니메이션 진행률을 바꾸는 목적이라면 CSS의 Scroll-driven Animations를 먼저 검토할 만합니다. 스크롤 위치 자체를 애니메이션 타임라인으로 사용할 수 있기 때문입니다. 먼저 버려야 할 습관은 sc..

웹페이지를 만들다 보면 같은 아이콘인데도 PC에서는 선명하고 모바일에서는 흐려 보이거나, 화면 확대 후 테두리가 깨지는 경우가 있습니다. 이럴 때 이미지 크기만 키우거나 고해상도 PNG로 교체하면 당장은 나아질 수 있지만 파일 용량이 커지고 다른 화면에서 다시 문제가 생길 수 있습니다. 아이콘을 넣는 방식은 크게 SVG, 아이콘 폰트, PNG 같은 래스터 이미지로 나눌 수 있습니다. 어떤 방식이 무조건 가장 좋다기보다 아이콘의 용도와 디자인 특성에 따라 선택하는 것이 중요합니다. 먼저 결론부터 보면, 일반 UI 아이콘은 SVG가 가장 무난합니다 메뉴, 검색, 닫기, 화살표, 즐겨찾기처럼 단순한 선과 면으로 구성된 인터페이스 아이콘이라면 SVG가 가장 다루기 편합니다. SVG는 픽셀을 확대하는 방식이 아니..

select에 border, 배경색, 화살표 아이콘까지 CSS를 줬는데도 브라우저마다 모양이 달라지는 이유는 뭘까요? 가장 큰 이유는 가 일반 박스가 아니라 운영체제와 브라우저가 자체 UI를 그리는 폼 컨트롤이기 때문입니다. 그래서 예전에는 appearance: none으로 기본 모양을 지운 뒤 화살표를 따로 만들거나, 아예 자바스크립트 드롭다운을 새로 만드는 방식이 많이 쓰였습니다. 요즘은 지원되는 브라우저에서 appearance: base-select와::picker(select)를 이용해 기존 의 의미와 폼 기능을 유지하면서 드롭다운 내부까지 CSS로 꾸밀 수 있습니다. 다만 모든 브라우저가 같은 수준으로 지원하는 것은 아니므로, 실서비스에서는 새 기능만 믿기보다 기존 가 그대로 작동하도록 점진적으..

웹페이지에서 탭을 바꾸거나 목록을 필터링했을 때 내용이 순간적으로 바뀌어 화면이 ‘툭’ 끊겨 보이는 경우가 있습니다. 링크를 눌러 다른 페이지로 이동할 때도 비슷한 깜빡임이 생길 수 있습니다. 예전에는 이런 전환을 자연스럽게 만들기 위해 기존 화면과 새 화면을 겹쳐 놓고 opacity와 transform을 직접 제어하거나, 자바스크립트로 애니메이션 상태를 따로 관리해야 했습니다. 요즘은 View Transition API를 이용하면 이런 전환을 훨씬 단순하게 만들 수 있습니다. 중요한 것은 무조건 화려한 효과를 넣는 것이 아니라, 어떤 증상에서 어느 방식으로 적용해야 하는지 구분하는 것입니다. 탭이나 필터를 눌렀을 때 내용이 갑자기 바뀐다면 한 페이지 안에서 DOM 내용만 바뀌는 경우에는 document..

CSS가 점점 복잡해지는 가장 흔한 신호는 선택자가 길어지는 것입니다..page.content.card.title처럼 상위 구조를 계속 붙여야 스타일 충돌을 막을 수 있다면, 이제는 선택자를 더 길게 만드는 대신 @scope로 적용 범위를 제한하는 편이 훨씬 관리하기 쉽습니다. 핵심은 “이 컴포넌트 안에서만 이 CSS가 동작하게 한다”는 경계를 먼저 정하는 것입니다. 선택자가 길어지는 이유부터 보면 해결 방향이 보입니다 처음에는.title,.button,.item처럼 짧은 선택자만으로도 충분합니다. 그런데 페이지가 커지면 같은 클래스 이름이 여러 영역에서 다시 등장합니다. 이때 충돌을 피하려고 아래처럼 부모 구조를 계속 덧붙이게 됩니다. css .page.content.profile-card.title ..

웹사이트에서 복사 버튼을 눌렀는데 아무 반응이 없거나, 복사는 된 것 같은데 Ctrl+V를 눌러도 붙여넣기가 되지 않는 경우가 있습니다. 특히 AI 서비스, 온라인 편집기, 자동화 프로그램처럼 클립보드를 자주 사용하는 사이트에서는 어제까지 잘 되던 기능이 갑자기 막히기도 합니다. 이럴 때 윈도우 클립보드 자체가 고장 났다고 생각하기 쉽지만, 실제로는 크롬의 사이트 권한이나 페이지 상태, 확장 프로그램 충돌 때문에 특정 사이트에서만 복사와 붙여넣기가 제한되는 경우가 많습니다. 먼저 크롬 문제인지 윈도우 문제인지 구분해보세요 가장 먼저 메모장 같은 일반 프로그램을 열어 간단한 문장을 복사한 뒤 붙여넣어 봅니다. 메모장에서는 Ctrl+C와 Ctrl+V가 정상적으로 작동하는데 특정 웹사이트에서만 안 된다면 윈도..

웹페이지에서 메뉴, 도움말, 옵션 창 같은 작은 팝업을 만들다 보면 z-index를 9999까지 올렸는데도 다른 요소 뒤에 가려지는 일이 있습니다. 특히 부모 요소에 overflow: hidden이 있거나, 여러 컴포넌트가 각자 stacking context를 만들고 있으면 숫자만 계속 키워서는 해결되지 않는 경우가 많습니다. 이럴 때는 기존 div 팝업을 억지로 위로 끌어올리기보다 HTML Popover API를 검토할 만합니다. 팝오버가 열리면 브라우저의 top layer에 올라가기 때문에 일반적인 문서 내부 stacking context와는 다른 방식으로 표시됩니다. 부모의 position이나 overflow 때문에 팝업이 잘리는 문제를 피하는 데도 유리합니다. 증상 1. z-index를 올려도 헤..

팝업이나 알림창을 숨길 때 opacity와 transition을 넣었는데도 마지막 순간에 화면이 뚝 사라진다면 애니메이션 값보다 display: none을 먼저 확인해야 합니다. 핵심은 @starting-style로 나타날 때의 시작 상태를 만들고, transition-behavior: allow-discrete 또는 transition의 allow-discrete 값으로 display 전환을 함께 처리하는 것입니다. 예전처럼 자바스크립트에서 애니메이션 종료 시간을 계산해 display: none을 늦게 적용하지 않아도 되는 경우가 많습니다. opacity를 넣었는데도 display none에서 끊기는 이유 처음 CSS 애니메이션을 만들 때 흔히 다음처럼 작성합니다. css .panel { opacity..