반응형 웹

반응형 웹 디자인이란?

- 반응형 웹 디자인(Responsive Web Design, RWD)이란 하나의 웹사이트에서 PC, 스마트폰, 태블릿 PC 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 기법을 말한다. (보통 모바일은 768px, 타블렛은 1024px 크기를 갖는다.)

 

→ 반응형 웹에서 빼놓을 수 없는 개념 : 모바일 퍼스트

모바일 퍼스트: 웹 디자인을 할 때, PC보다 모바일 기기를 먼저 생각해서 디자인하고 프로그래밍 하는 기법

• 태블릿 PC, 스마트 폰등 모바일 기기의 이용이 늘어나면서 일반 웹 사용자보다 모바일 웹 사용자가 더 많아지면서 생기게 되었다.
• 모바일 퍼스트의 핵심은 모바일의 제약을 집중의 기회로 본다는 것이다. 기존의 모바일의 제약으로 1. 모바일 기기의 스크린 크기, 2. 네트워크 속도 및 품질, 3. 사용하는 모드 가 있는데 반응협 웹에서 모바일 퍼스트로 디자인하면 불필요한 요소들을 최소화 시켜서 사이트가 진짜로 제공해야 할 내용과 기능이 무엇인지를 나타낼 수 있게 된다.

반응형 웹의 장점

• 웹사이트를 PC용과 모바일용으로 각각 별개로 제작하지 않고, 하나의 공용 웹사이트를 만들어 다양한 디바이스에 대응할 수 있다.
• PC용 URL과 모바일용 URL이 동일하기 때문에 검색 포털 등 광고를 통한 사용자 접속을 효율적으로 관리할 수 있다. → 검색 엔진 최적화
• 웹 페이지 내용을 수정할 경우, 하나의 페이지만 수정하면 PC와 모바일 등 다양한 디바이스에서 동일하게 반영된다. → 유지보수 편리

반응형 웹의 핵심 기술

• 유동형 그리드(fluid grid)
  • 그리드의 폭을 고정값이 아닌 em 또는 %의 값으로 설정하는 것. 즉, 가로 폭길이의 변화에 따라서 컬럼의 크기가 상대적으로 변하게 하는 방법이다.
• 유연한 이미지(flexible images)
  • max-width: 100% 라는 짧은 CSS 코드를 추가해줌으로서 브라우저 창 너비에 따라 변하는 가변성을 갖게 된다.
• 미디어 쿼리(media query)
  • 화면(screen), 티비(tv), 프린터(print)와 같은 **미디어 타입(media type)과 적어도 하나 이상의표현식(expression)**으로 구성된다. 표현식은 width, height, color와 같은 **미디어 특성(media feature)**들을 이용하여 그 특성들의 상태에 따라 다른 스타일 시트를 적용할 수 있다. 미디어 쿼리는 CSS3에 포함되어 있으며, 컨텐츠의 변경없이 주로 화면의 크기에 따라 스타일 시트를 달리하여 적절한 모양을 보여줄 수 있다.
  • 적용 방법
    • @media 미디어-타입 and(미디어-특성){ //해당 미디어 요소에서 적용할 CSS }

• Viewport 지정(필수/ 중요 : 처음 로딩되었을 때의 이미지 사이즈를 손가락으로 줌인 줌아웃 가능)
  
  • <meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1, user-scalable=yes,initial-scale=1.0" /> 를 head태그 안에 넣기

• 기본 설정에 잘 쓰이는 기준 속성
  • max-width : 뷰 영역에서의 최대 넓이, 즉 지정한 사이즈보다 작을 경우 적용
  • min-width : 뷰 영영에서의 최소 넓이, 즉 지정한 사이즈보다 넓은 경우 적용
  • max-device-width : 디바이스 사이즈의 최대 넓이. 이 사이즈보다 작은 경우 적용
  • min-device-width : 디바이스 사이즈의 최소 넓이. 이 사이즈보다 넓을 경우 적용
  • orientation : 세로 길이 혹은 가로길이의 둘 중 하나로 기준을 적용

학습에 도움이 될 사이트

• https://www.youtube.com/watch?v=X91jsJyZofw
• https://www.nextree.co.kr/p8622/
• https://www.daleseo.com/css-media-queries/ - 미디어 쿼리 사용법
• https://offbyone.tistory.com/121 - 맨 마지막에 모바일 퍼스트 사용법
• https://velog.io/@yunsungyang-omc/CSS-반응형-웹-미디어-쿼리media-query
• https://skydoor2019.tistory.com/8
• https://velog.io/@bungouk6829/반응형-웹의-미디어-쿼리-Media-Query-와-Viewport
• https://mol-gga.tistory.com/14 -스마트폰 해상도 & 화면 비율
• https://www.inflearn.com/course/반응형-웹-입문#curriculum
• https://www.inflearn.com/course/반응형-사이트-만들기-실습