#css
15개의 게시물
모바일 UX 개선: 터치 타겟과 가독성 확보
🤖 1410 in / 1100 out / 2510 total tokens 모바일에서 터치하기 어려운 버튼과 입력 필드를 개선했다. 사용자 피드백으로 접수된 모바일 UI/UX 이슈를 해결했다. 버튼은 48x48px 최소 크기를 맞췄다. 스왑 버튼은 40x40에서 48x48로, CompactCard의 액션 버튼은 32x32에서 44x44로 확대했다. 최
헤더 레이아웃 정리와 뷰 전환 시 스크롤 초기화
🤖 1126 in / 1633 out / 2759 total tokens 달력 헤더의 물음표 버튼과 오늘 날짜 표시를 왼쪽 상단으로 재배치했다. 기존엔 가로로 나란히 있던 걸 flex-direction: column으로 세로 축으로 바꾸고, 내부에서 다시 row로 묶어서 정렬했다. UI가 한층 정돈된 느낌이다. 탭 전환할 때 스크롤 위치가 그대로 남
html 요소에 테마 클래스 적용으로 배경색 동적 변경 수정
🤖 598 in / 768 out / 1366 total tokens 테마 전환 시 body 배경색이 따라오지 않던 문제를 해결했다. 원인은 간단했다. CSS 변수가 정의된 테마 클래스가 body에만 적용되어 있었고, 실제로는 html 요소에 클래스를 줘야 변수가 하위로 제대로 전파된다. +layout.svelte에서 반응형으로 document.do
#app position:fixed로 스크롤 제어 구조 개선
🤖 436 in / 681 out / 1117 total tokens 모바일 웹앱의 스크롤 제어 방식을 정리했다. 기존엔 html과 body 각각에 overflow:hidden을 선언했는데, 이를 app으로 집중시켰다. app에 position:fixed를 적용하니 뷰포트 고정이 더 확실해진다. body 배경은 투명으로 수정했고, 실제 콘텐츠 영역에
z-index 스택 컨텍스트와 싸운 짧은 이야기
🤖 883 in / 616 out / 1499 total tokens 도움말 버튼이 캘린더 뒤에 숨어버리는 문제를 고쳤다. 사용자가 튜토리얼을 다시 보려고 ? 버튼을 누르려는데 아예 보이지 않는다. 원인을 찾아보니 app이 position: relative로 새로운 스택 컨텍스트를 형성했고, DOM 순서상 뒤에 있는 .cal-wrap이 topbar-
기록 입력 버튼 위치 조정 및 미래 날짜 차단
🤖 625 in / 671 out / 1296 total tokens DaySheet 컴포넌트에서 기록 입력 버튼을 목록 아래쪽으로 이동시켰다. 사용자 흐름상 기존 기록을 먼저 확인하고 새로운 기록을 추가하는 게 자연스럽다고 판단했다. 미래 날짜에 기록을 남기지 못하도록 차단 로직을 추가했다. customAlert 스토어를 새로 import해서 미래
모바일 확대 기능 완전 차단
🤖 609 in / 1404 out / 2013 total tokens 모바일 기기의 확대 기능을 CSS와 JS 이벤트 차단으로 완전히 제거합니다. CSS touch-action 속성을 조정하여 제스처 줌을 막고, JS에서는 핀치 줌과 더블탭 줌 이벤트를 감지하여 브라우저 기본 동작을 방해합니다. 이로 인해 사용자가 앱 내에서 확대/축소를 시도하더라도
모바일에서 버튼 연타 시 화면 확대되던 문제 해결
🤖 726 in / 594 out / 1320 total tokens 공무원 근무기록 앱에서 출퇴근 버튼을 빠르게 연타하면 화면이 확대되는 문제가 있었다. 특히 iOS Safari에서 더블탭 줌 동작이 트리거되어 사용자 경험을 해쳤다. iOS 10부터는 viewport meta 태그의 user-scalable=no를 무시하기 때문에 CSS로 접근해야
퀵 액션을 바텀시트로 개편하고 식사 금액 입력 팝업 추가
🤖 1164 in / 643 out / 1807 total tokens 기존 인라인 퀵 액션 버튼들을 별도 바텀시트로 분리했다. 오늘 날짜 선택 시 자동으로 슬라이드업되며, 오버레이 클릭이나 닫기 버튼으로 닫을 수 있다. 식사 버튼은 이제 금액 입력 팝업을 띄운다. 기본값이 자동 입력되지만 수정 가능하도록 했다. CSS는 fixed 포지션 오버레이에
캘린더 셀에 탭/클릭 피드백 추가
🤖 442 in / 547 out / 989 total tokens 캘린더 셀을 눌렀을 때 즉각적인 시각 피드백이 들어간다. UX 디테일 챙기기. :active 상태에서 scale(.93)로 살짝 작아지면서 accent 배경색이 적용된다. 눌리는 느낌. 선택된 날짜의 숫자 링(.dnum-ring)에는 popIn 애니메이션이 0.2초간 재생된다. 툭
다크모드 색상 호환성 개선: 하드코딩 색상을 CSS 변수로 교체
🤖 909 in / 599 out / 1508 total tokens ResultCard와 CompactCard 컴포넌트에 하드코딩된 색상값들이 다크모드에서 가독성 문제를 일으키고 있었다. 배경색이나 텍스트 색상이 고정되어 있어 다크 테마에서도 밝은 색상이 그대로 노출되는 문제다. 방문 뱃지, 메모 영역, 액션 버튼 등에서 dcfce7, 15803d
v0.45.0: WCAG 2.1 AA 준수를 위한 접근성 개선
🤖 1238 in / 891 out / 2129 total tokens MidWayDer v0.45.0에서 접근성을 대폭 강화했다. WCAG 2.1 AA 기준에 맞춰 ARIA 속성과 스크린 리더 지원을 추가했다. 검색 컨테이너에 role="search"를 명시하고, GPS와 공유 버튼에 aria-label을 추가했다. 동적 콘텐츠 알림을 위한 ari
v0.44.0 - 다크모드 전환 애니메이션 추가 및 스타일 개선
🤖 1298 in / 1113 out / 2411 total tokens 다크모드 전환 시 부드러운 애니메이션을 추가했다. 0.2-0.3초 ease-out 타이밍으로 자연스러운 테마 전환을 구현했다. 성능을 고려해 모든 요소에 전환을 적용하지는 않았다. 지도, 캔버스, 이미지, 비디오 같은 무거운 요소는 전환에서 제외했다. card, panel, b
v0.13.0 배포를 위한 카카오맵 스타일 팔레트 CSS 변수 적용
🤖 1294 in / 1619 out / 2913 total tokens globals.css에 Primary, Secondary, Success 등의 색상 변수를 정의하고 theme.css에서 다크모드용 변수도 추가했습니다. WCAG AA 대비 기준을 충족하도록 텍스트와 배경색을 구성했고, 기존 변수는 유지하여 점진적 마이그레이션을 지원합니다. 테스
모바일 확대 방지 처리
🤖 711 in / 566 out / 1277 total tokens 테트리스 게임을 모바일에서 플레이할 때 화면이 확대되는 문제를 해결했다. 실수로 핀치 줌이나 더블탭을 하면 게임 몰입도가 깨지는데, 이걸 막아달라는 피드백이 있었다. 세 가지 레이어로 방어했다. 먼저 viewport 메타태그에서 확대 자체를 차단하고, CSS에서는 touch-act