Web Guide유동 레이아웃상대 단위반응형 구현
유동 그리드와 상대 단위
고정된 숫자로 만들면 화면이 바뀔 때 깨집니다.
비율로 만들어야 유연하게 대응합니다.

01고정과 유동
크기를 정하는 방식이 다릅니다.
고정 방식
픽셀로 정확한 숫자 지정 · 화면이 바뀌면 안 맞음 · 예측 가능하지만 경직
유동 방식
비율로 지정 · 화면에 따라 자동 조정 · 유연하지만 통제가 덜 정확
02상대 단위 이해
발주자도 개념만 알면 소통이 됩니다.
비율 단위
부모 요소 대비 몇 퍼센트.
글자 기준 단위
기본 글자 크기 대비 배수.
화면 기준 단위
화면 폭이나 높이 대비.
혼합 사용
상황에 맞게 섞어 씁니다.
최소 최대 제한
너무 작거나 커지지 않게 제한.
고정이 나은 곳
테두리 두께 같은 것은 고정.
03왜 중요한가
접근성과도 연결됩니다.
어떤 크기에서도 자연스럽게.
이용자가 키우면 함께 커집니다.
시력이 낮은 이용자 배려.
기기의 글자 크기 설정을 따릅니다.
한 곳만 바꾸면 전체 조정.
새 기기에도 어느 정도 대응.
04발주자 확인 사항
코드를 몰라도 결과로 확인할 수 있습니다.
점검 항목
창 크기 조절
줄여도 자연스러운지.
글자 크기 변경
브라우저에서 키워도 깨지지 않는지.
기기 설정
휴대폰 글자 크기를 키워 확인.
확대 테스트
화면을 확대해도 쓸 만한지.
가로 스크롤
어떤 크기에서도 안 생기는지.
넓은 화면
너무 늘어나지 않는지.
CHECK POINT
□ 창 크기를 줄여도 자연스러운가
□ 브라우저 글자 크기를 키워도 깨지지 않는가
□ 휴대폰 글자 설정을 반영하는가
□ 확대해도 이용할 수 있는가
□ 가로 스크롤이 생기지 않는가
□ 넓은 화면에서 지나치게 늘어나지 않는가
□ 최소 최대 제한이 있는가
□ 여러 크기에서 검증했는가
#유동 레이아웃#상대 단위#반응형 구현#접근성#글자 크기#화면 대응#검증#반응형#웹비스타#홈페이지 제작