반응형 웹 디자인(Responsive Web Design)

: 반응형 웹 디자인(Responsive Web Design)

- 이던 마코트(Ethan Marcotte)라는 웹 디자인 선구자가 이름 지은 '반응형 웹 디자인(Responsive Web Design)'이라는 기법은 브라우저 창의 폭에 따라 레이아웃을 바꿀 수 있도록 하는 기술입니다.

- 반응적 웹 디자인은 약자로 RWD 라고도 하며, 디스플레이 크기에 맞는 가장 읽기 쉬운 레이아웃의 페이지를, 여러 버전의 사이트를 만들지 않고도 사용자에게 제공할 수 있도록 합니다.

- RWD는 하나의 기술로 이루어진 디자인 기법이 아니며, 몇 가지 CSS와 HTML 기술을 결합하여 화면 크기에 맞는 레이아웃의 페이지를 생성할 수 있도록 합니다.

- 화면 너비에 맞는 스타일을 만드는 부분은 CSS 미디어 질의(media query)를 통해 해결하는데, 페이지가 전송될 브라우저의 너비와 높이에 맞는 스타일을 선택할 수 있도록 하는 기술로 이를 사용하면 스마트폰에 맞는 스타일과 태블릿에 맞는 스타일, 데스크톱 브라우저에 적합한 스타일을 별도로 만들어서 디스플레이에 최적인 형태로 웹 페이지를 표시할 수 있습니다.

- 예를 들어, 창의 너비가 480픽셀 이하일 때는 특정한 스타일이 렌더링되도록 하고 760픽셀 이상일 때에는 그와는 다른 스타일이 적용되도록 할 수 있습니다.  게다가, 폭만을 기준으로 삼을 수 있는 것은 아닙니다. 태블릿이 가로보기 모드일 때 적용되는 스타일과, 아이폰이나 아이패드에 사용된 레티나 디스플레이처럼 픽셀 집적도가 높은 디스플레이에 적용될 스타일도 구별할 수 있습니다.

 

: Breakpoint(변경지점) 정의

미디어쿼리 기술을 사용하면 화면 너비에 맞는 스타일 집합을 브라우저에 전송할 수 있습니다.

보통은 세 개의 변경지점을 사용하여 세 개의 미디어 질의를 만듭니다. 하나는 스마트폰용, 하나는 태블릿용, 그리고 나머지 하나는 데스크톱 모니터용입니다. 정확한 변경지점 값은 디자인마다 다르며, 장치마다 다릅니다. 보통은 480픽셀 이하의 화면에는 스마트폰용 스타일을 적용하고, 481부터 768픽셀 너비의 브라우저에는 브라우저에는 태블릿용 스타일을 사용하며, 너비가 769픽셀 이상인 화면에는 데스크톱용 스타일을 적용합니다. 하지만 최종 결정은 사이트의 디자인에 따라서 다를 것입니다. 즉, 사용자의 몫입니다.

스마트폰	480px
태블릿	481~768px
데스크탑	769px

 

출처 :  https://webclub.tistory.com/305

반응형 웹 디자인(RWD) 기초 다지기

참고1 :  https://yeoninim.tistory.com/38

[CSS] 반응형 작업을 위한 폰트 단위 em / rem 사용

참고 2 :  https://viewportsizer.com/devices/

Viewport Size by Device / Phone Screen Dimensions | Viewport Sizer Tool