화면 해상도가 뭔가요
모니터 사양에 1920x1080이라고 적혀 있습니다. 이게 무슨 의미인지 정확히 모르겠습니다. 해상도가 높으면 뭐가 좋은 건가요. 반응형 웹 디자인과 해상도의 관계도 함께 알아봤습니다.
해상도란
화면을 구성하는 픽셀 수입니다. 1920x1080은 가로 1920개 세로 1080개의 점입니다. 픽셀이 많을수록 화면이 선명합니다. 같은 크기 모니터라면 해상도가 높을수록 글씨가 작아집니다. 요즘은 4K(3840x2160)도 많이 씁니다.
웹 디자인에서
웹사이트를 만들 때 다양한 해상도를 고려해야 합니다. 모바일은 작고 데스크톱은 큽니다. 반응형 디자인으로 모든 화면에 맞게 조절합니다. 미디어 쿼리로 화면 크기에 따라 스타일을 바꿉니다.
내 화면 확인하기
현재 브라우저 화면 크기를 알고 싶을 때가 있습니다. 반응형 테스트에 접속하면 바로 알 수 있습니다. 창 크기를 조절하면 실시간으로 바뀝니다. 개발자 도구에서도 확인 가능합니다.
테스트 방법
크롬 개발자 도구에서 다양한 기기로 테스트할 수 있습니다. F12를 누르고 기기 모드를 활성화하세요. 아이폰 갤럭시 아이패드 등 미리 설정된 크기로 볼 수 있습니다. 실제 기기에서도 테스트하는 게 좋습니다.
주요 브레이크포인트
모바일은 보통 480px 이하입니다. 태블릿은 768px에서 1024px 사이입니다. 데스크톱은 1024px 이상입니다. 이 기준으로 반응형을 만듭니다. 프레임워크마다 기준이 조금씩 다릅니다.
DPI와 레티나
같은 해상도라도 화면 크기에 따라 선명도가 다릅니다. 레티나 디스플레이는 픽셀 밀도가 높습니다. 이미지가 흐려 보일 수 있으니 고해상도 이미지를 준비하세요. 비밀번호 생성기와 개발 도구들을 활용해서 완성도 높은 웹사이트를 만드세요.