휴대폰 하단 고정 버튼이 입력칸 가리는 문제

띠가 칸을 덮어도 브라우저는 모릅니다

화면 아래 고정 띠는 페이지 위에 떠 있습니다. 그래서 띠가 입력 칸을 덮고 있어도 브라우저는 칸이 가려진 줄 모릅니다.

휴대폰 자판까지 올라오면 보이는 화면은 더 줄어듭니다.

한 줄 칸과 여러 줄 칸은 눌렀을 때 화면이 움직이는 기준도 다릅니다. 같은 양식에서 어떤 칸은 멀쩡하고 어떤 칸만 가려진다면 이 차이 때문일 수 있습니다.

저희 템플릿 신청 양식에서 메모 칸 아래가 2px 걸렸던 날

2026년 10월 1일에 저희 템플릿의 신청 양식을 점검했습니다. 화면 아래에 버튼 띠가 고정된 페이지였습니다.

한 줄짜리 입력 칸은 누르면 띠 위로 잘 비켜 올라왔습니다. 그런데 여러 줄을 쓰는 메모 칸은 아래쪽이 띠에 걸렸습니다.

앞선 점검에서 권했던 여백 값은 88이었습니다. 그 값을 실제로 넣고 재 보니 메모 칸 아래가 2px 가려졌습니다. 권했던 값만 믿고 넘어갔다면 점검 결과에 「가림 없음」이라고 잘못 적을 뻔했습니다.

그래서 값을 몇 개 대 보며 다시 쟀습니다. 104에서 처음으로 칸 아래가 띠 윗선보다 위로 올라왔습니다.

재는 동안 보니 값을 8px 올려도 칸은 3~5px만 움직였습니다. 여러 줄 칸은 칸 전체가 아니라 지금 글자를 쓰는 줄을 기준으로 화면을 옮기기 때문입니다.

내 사이트 문의 양식에서 눌러 볼 두 가지

휴대폰으로 내 사이트 문의 양식을 열고 맨 아래 칸까지 차례로 눌러 보세요. 누를 때마다 칸이 띠에 가리는지만 보면 됩니다.

여러 줄 칸이 있다면 줄을 여러 번 바꿔 가며 글을 써 보세요. 지금 쓰는 줄이 띠 뒤로 숨는지 확인하면 됩니다.

처음부터 휴대폰 입력까지 맞춘 홈페이지가 필요하시면 홈페이지 제작에서 살펴보실 수 있습니다.