웹 기본

반응형 웹페이지(Responsive Web)

반응형 웹페이지(Responsive Web)는 화면 크기에 맞춰 레이아웃과 콘텐츠 표현이 자연스럽게 바뀌는 웹페이지입니다.

쉬운 설명

화면 크기에 맞춰 배치와 크기가 자연스럽게 바뀌는 웹페이지.

배경과 쓰임까지 이해하기

반응형 웹페이지(Responsive Web)는 스마트폰, 태블릿, 데스크톱처럼 화면 크기가 달라져도 내용과 배치가 자연스럽게 맞춰지는 웹페이지입니다. 같은 페이지의 카드 열 수, 메뉴 모양, 글자 크기, 여백이 사용 가능한 공간에 따라 바뀝니다.

미디어 쿼리, 유연한 Grid와 이미지 같은 CSS 기술로 구현합니다. 한마디로, 반응형 웹페이지는 화면 크기에 맞춰 스스로 레이아웃을 조정하는 웹페이지입니다.

데스크톱의 3열 카드 목록을 태블릿에서는 2열, 모바일에서는 1열로 표시할 수 있습니다.

이런 거 할 때 나와요 모바일용과 데스크톱용 사이트를 따로 운영하지 않고도 다양한 기기에서 같은 콘텐츠와 기능을 제공할 수 있습니다.
이렇게 생겼어요 반응형 웹페이지(Responsive Web)은(는) Media Query, CSS, Mobile Optimization 같은 주변 개념과 함께 문서, 설정 화면, 오류 메시지에서 자주 보입니다.
나오는 화면 예시 웹 기본 작업을 하다가 Media Query, CSS, Mobile Optimization를 확인하는 화면

화면 너비만 맞추고 긴 텍스트, 빈 상태, 큰 글자 설정, 터치 동작을 확인하지 않으면 실제 사용 중 문제가 생깁니다.

모바일용과 데스크톱용 사이트를 따로 운영하지 않고도 다양한 기기에서 같은 콘텐츠와 기능을 제공할 수 있습니다.

Checklist

현재 개념 반응형 웹페이지(Responsive Web)