#1. 반응형 웹

1. 반응형 웹의 개념

반응형 웹 이란?

  • 디바이스의 디스플레이 종류에 따라 반응하여 그에 맞도록 적절하게 UI를 배치하는 웹을 말한다.
  • 다양한 디바이스에 대응하여 최소한의 변화로 내용 탐색을 쉽게 하여 사이트를 최적의 형태로 제공한다.
  • 과거에는 웹사이트를 주로 데스크탑을 통해 사용해서 문제가 없었지만, 기술의 발전으로 생긴 태블릿, 스마트폰 등 크기가 각각 다른 디스플레이에 맞추기 위해 반응형 웹이라는 것이 생겨났다.

넓은 해상도에서 보여지는 모습 (ex. 데스크탑)

↓

해상도가 작아짐에 따라 변화(ex. 스마트폰)

 

2. 반응형 웹 구현 방법

1) 미디어 쿼리

  • 미디어 쿼리를 활용하여 하나의 웹페이지가 해상도 구간에 따라 레이아웃으로 구성되도록 한 웹 페이지이다.
  • 미디어 쿼리는 CSS2부터 시작되어 CSS3에서 본격적으로 쓰이기 시작한 웹 기법이다.
  • 디바이스의 폭이나 높이 등의 정보를 가지고 스타일을 개별적으로 줄 수 있다.
@media 미디어타입 and (너비 및 높이) { 
/* 너비 및 높이는 min- 이나 max- 로 최대,최소를 정한다 */
  선택자 {
    속성: 속성값;
  }
}

※ 최소 해상도 중심
@media screen and (min-width: 576px) { css }
/* Small devices (스마트폰, 576px 이상) */

@media screen and (min-width: 768px) { css }
/* Medium devices (테블릿, 768px 이상) */

@media screen and (min-width: 992px) { css }
/* Large devices (데스크탑, 992px 이상) */

@media screen and (min-width: 1200px) { css }
/* X-Large devices (큰 데스크탑, 1200px 이상) */

@media screen and (min-width: 1400px) { css }
/* XX-Large devices (더 큰 데스크탑, 1400px 이상) */


※ 최대 해상도 중심
@media screen and (max-width: 576px) { css }
/* X-Small devices (스마트폰, 576px 이하) */

@media screen and (max-width: 768px) { css }
/* Small devices (스마트폰, 768px 이하) */

@media screen and (max-width: 992px) { css }
/* Medium devices (테블릿, 992px 이하) */

@media screen and (max-width: 1200px) { css }
/* Large devices (데스크탑, 1200px 이하) */

@media screen and (max-width: 1400px) { css }
/* X-Large devices (큰 데스크탑, 1400px 이하) */

※ 미디어 타입 종류

  • all : 모든 유형
  • print : 인쇄장치
  • screen : 컴퓨터 스크린, 스마트폰
  • tty : 디스플레이 기능 제한장치
  • embossed : 점자 프린터

 

2) 미디어 쿼리 사용

@media screen and (max-width: 620px) {
  .menu, .main, .right {
    width: 100%;
  }
}
/* 해상도가 620px 이하가 되면 해당 클래스의 넓이를 100%로 변환한다. */

620px 이상에서 보여지는 화면

↓

620px 이하에서 보여지는 화면

3) 유동형 그리드

  • 유동형 그리드(Fluid Grids)는 고정된 다위가 아니라 상황에 맞게 변할 수 있는 em이나 %등의 단위를 사용하는 방법이다.
  • 웹브라우저 창 크기를 늘리거나 줄이면 페이지를 구성하는 요소의 크기도 그에 맞게 변한다.
  • 미디어 쿼리와 같이 이용하면 특정 범위의 스크린에 따른 고정형 그리드/반응형 그리드의 구현도 가능하다.

 

4) 모바일 뷰 포트 설정

  • 스마트폰은 태블릿이나 데스크톱과 달리 독자적인 뷰 포트 처리 방식을 갖고 있다.
  • 태블릿의 뷰 포트는 웹 문서의 너비와 무관하게 화면에 보이는 영역이 뷰 포트가 되고, 데스크탑은 웹 브라우저의 창 크기를 조절함으로써 사용자가 뷰 포트의 크기를 제어할 수 있다.
  • 스마트폰의 경우 단말의 스크린 사이즈와는 무관하게 웹 문서의 너비와 높이가 뷰 포트가 되고, 스마트폰 스크린에 웹 문서를 모두 출력하기 위해 스크린 사이즈가 큰 경우 자동으로 줌 아웃 처리한다.
    • 이 문제를 해결하기 위해 HTML의 <head> 영역에 <meta> 태그의 코드를 지정한다.
    • <meta name="viewport" content="width=device-width, inital-scale=1.0">
    • 위 코드를 통해 뷰 포트를 문서가 아닌 스크린 영역으로 재설정한다.

 

3. 반응형 웹 디자인의 기본 원칙

1) 반응형(Responsive)과 적응형(Adaptive)

  • 반응형 : 하나의 템플릿으로 모바일, 태블릿, 테스크탑 등 모든 기기에 대응할 수 있는 웹
  • 적응형 : 모바일용, 태블릿용, 테스크탑용 등 디바이스 별로 독립적인 템플릿을 만들고 각각의 디바이스에 맞는 페이지를 별도로 제작

https://www.gomolearning.com

 

2) 흐름(The Flow)

  • 화면 크기가 작아짐에 따라 컨텐츠가 더 많은 수직 공간을 차지하기 시작하고 아래의 모든 내용이 밑으로 내려가게된다.

 

3) 상대 단위(Relative units)

  • 픽셀(px)은 유연하지 않고 모든 곳에서 작동하기에 무리가 있다.
  • %나 em과 같은 상대적 단위는 유연하고 모든 곳에서 작동하는 장치가 된다. (유동형 그리드)

 

4) 브레이크포인트(Breakpoints)

  • 브레이크포인트를 사용하면 레이아웃을 미리 정의 된 지점에서 변경할 수 있다.
  • 대부분의 CSS 속성은 하나의 중단 점에서 다른 중단 점으로 변경할 수 있다.

 

5) 최대 값(max)과 최소 값(min)

  • 컨텐츠가 스마트폰 화면의 전체 너비에 맞춰 차지하고 있다가 그보다 큰 화면의 전체 너비까지 펼쳐지는 것은 좋지 않은 경우가 있다.
  • 이때 최대값을 지정해 놓으면 화면이 넓어져도 컨텐츠의 크기가 넓어지지 않는다. (단위는 px)

 

6) 모바일(Mobile) 또는 데스크탑(Desktop) 우선

  • 기술적으로 작은 화면에서 큰 화면(모바일 우선) 또는 반대(데스트탑 우선)로 시작해도 큰 차이는 없다. 
  • 그러나 모바일 우선으로 시작하는 경우 추가 제한 사항이 추가되고, 의사 결정을 내리는데 도움이 된다.

 

 

저작자표시 비영리 변경금지

'국비수업 > HTML & CSS' 카테고리의 다른 글

[HTML & CSS] 클론코딩 연습2  (0) 2022.03.16
[HTML & CSS] 클론코딩 연습1  (0) 2022.03.16
[CSS] 요소에 효과를 주는 속성  (0) 2022.03.10
[CSS] Background 속성  (0) 2022.03.08
[CSS] Position 속성  (0) 2022.03.07

+ Recent posts

티스토리툴바