[FE/CSS] 320px 개인학습 선택지의 라디오 입력 폭 보강 | 개발일지

분야: FE
기술 스택: CSS Grid · HTML radio · Chromium

문제와 원인

개인학습의 320px 선택지에서 라디오에도 일반 input 크기 규칙이 적용됐다. 기존 규칙은 선택지 안의 모든 input에 폭과 높이만 지정했다.

수정 전 코드

skct-personal.css

.skct-choice input {
  width: 1.2rem;
  height: 1.2rem;
  margin: .28rem 0 0;
}

.skct-choice {
  display: grid;
  grid-template-columns: 1.25rem 1.5rem minmax(0,1fr);
}

.skct-choice-text {
  min-width: 0;
}

수정 후 코드

skct-personal.css

라디오 타입에 맞춰 크기와 최소 크기·여백·테두리를 지정했다. Grid의 마지막 열 minmax(0,1fr)와 본문의 min-width: 0은 유지했다.

.skct-personal .skct-choice input[type="radio"] {
  appearance: auto;
  width: 1.15rem;
  height: 1.15rem;
  min-width: 0;
  min-height: 0;
  margin: .22rem 0 0;
  padding: 0;
  border: 0;
  accent-color: var(--amber-dark);
}

.skct-personal .skct-choice {
  display: grid;
  grid-template-columns: 1.25rem 1.5rem minmax(0,1fr);
}

.skct-choice-text {
  min-width: 0;
  white-space: pre-wrap;
}

각 보기를 감싼 label과 같은 name의 네이티브 라디오 그룹을 유지해 보기 문장 클릭과 방향키 선택을 지원한다.

검증 결과

Chromium 153, 기본 글자 크기 16px에서 합성 보기 4개와 원본 전후 CSS를 같은 격리 HTML에 적용했다. 너비·버전 조합마다 1회씩, 라디오의 getBoundingClientRect().width와 max(0, documentElement.scrollWidth - innerWidth)를 측정했다.

화면 너비	수정 전 라디오 폭	수정 후 라디오 폭	전후 가로 넘침	전후 ArrowDown 선택
320px	19.1875px	18.390625px	모두 0px	모두 2번
375px	19.1875px	18.390625px	모두 0px	모두 2번
640px	19.1875px	18.390625px	모두 0px	모두 2번

이 비교에서 라디오 폭은 줄었고 가로 넘침과 방향키 선택은 전후 같은 결과였다. 별도 mocked API E2E에는 수정 후 320px 넘침 0px, 640px 키보드 선택과 피드백 포커스 통과가 기록돼 있다.

Chrome의 320px 선택지

같은 원본 전후 CSS와 합성 보기 4개를 Chrome 155의 320×900 CSS px·DPR 1에서 다시 실행했다. 기본 글자 크기는 16px이며 첫 라디오에 초점을 둔 뒤 ArrowDown을 1회 입력했다.

320px 비교	수정 전	수정 후
라디오 폭	19.1953125px	18.3984375px
가로 넘침	0px	0px
ArrowDown 뒤 선택	2번	2번

이 실행의 라디오 폭은 기존 Chromium 153 값보다 전후 각각 0.0078125px 컸다. 전후 폭의 차이는 두 실행 모두 0.796875px였다.

기존 스타일에서도 방향키 입력은 두 번째 보기를 선택했고 가로 넘침은 없었다.

수정 전 320px: 두 번째 라디오 선택과 보기 영역원본 보기 (새 창)

라디오 타입별 크기 규칙을 적용한 뒤에도 보기 4개와 두 번째 선택이 유지됐다.

수정 후 320px: 두 번째 라디오 선택과 보기 영역원본 보기 (새 창)