화면 해상도가 뭔가요
모니터에 표시되는 픽셀 수입니다. 가로 곱하기 세로로 표현합니다. 1920x1080이 풀HD입니다. 숫자가 클수록 화면이 선명합니다. 더 많은 내용을 표시할 수 있습니다. 4K는 3840x2160입니다. 풀HD의 4배입니다.
웹 디자인에서 중요한 이유
방문자마다 화면 크기가 다릅니다. 데스크톱은 1920이 많습니다. 노트북은 1366이나 1440입니다. 모바일은 더 작습니다. 모든 해상도에서 잘 보여야 합니다. 그래서 반응형 디자인이 필요합니다.
반응형 웹이란
화면 크기에 맞게 레이아웃이 바뀝니다. 큰 화면에서는 3열로 보입니다. 작은 화면에서는 1열로 바뀝니다. 미디어 쿼리로 구현합니다. CSS에서 화면 너비에 따라 스타일을 다르게 적용합니다. 요즘 웹사이트는 필수입니다.
브레이크포인트 설정
반응형이 전환되는 지점입니다. 보통 576px 768px 992px 1200px로 나눕니다. 부트스트랩 기준입니다. 모바일 타블렛 데스크톱으로 구분됩니다. 각 구간에서 테스트해야 합니다. 빠진 구간 없이 확인하세요.
테스트 방법
개발자 도구에서 기기 시뮬레이션을 켭니다. F12 누르고 모바일 아이콘 클릭합니다. 다양한 기기를 선택해서 확인합니다. 아이폰 갤럭시 아이패드 등이 있습니다. 실제 기기가 없어도 테스트됩니다. 직접 기기에서 확인하면 더 좋습니다.
해상도 확인 도구
내 화면 해상도가 궁금하면 화면 해상도 확인 도구를 쓰세요. 접속하면 현재 화면 크기가 표시됩니다. 창 크기를 바꾸면 실시간으로 업데이트됩니다. 반응형 테스트에 활용하세요. URL 인코더와 함께 웹 개발 도구로 북마크하세요.