Responsive Web : 반응형 웹사이트

Responsive Web 이란?

반응형웹을 뜻하며, 하나의 웹사이트에서 PC,스마트폰 테블릿 PC등 접속하는 디스플레이에 따라 화면의 크기가 자동으로 변화하는 웹페이지를 의미한다.

왜 반응형으로 웹을 만들어야 하는가?

1. 유지보수가 간편
2. 모바일 사용점유율의 증가
3. 검색엔진 최적화(SEO)가 가능
4. 미래지향적 기술

Media Query

미디어쿼리라는 것은 반응형 웹을 구형하는 CSS technique이다. 특정 조건에서는 어떤 CSS를 적용 하라는 규칙을 줄 수 있는데, 이때 CSS @media라는 문법으로 작성할 수 있다. 예를들면 아래와 같은 식으로 표현할 수 있다.

@media only screen and (max-width:480px){
  body{
    font-size: 12px;  
  }
}

• @media: media쿼리를 시작하겠다는 의미이다.

• only screen: 어떤 디바이스에서 적용하는 지 알려주는 역할을 하는데 만약 ㅍ린트를 하고 싶을 때 적용하려면 only print라고 작성하면 된다. screen이라고 할 경우에는 어떤 딥바이스에 관련없이 화면에 보이는 스크린이기만 하면 모두 적용된다.

• and (max-width : 480px): media feature라고 불리는 부분으로 어떤 조건아래의 css를 적용할지 작성해 줘야한다.

아래의 표는 Media Query의 표현식에 사용할 수 있는 프로퍼티이다.

*orientation을 제외한 모든 프로퍼티는 min/max를 접두사로 사용할 수 있으며, 일반적으로 반응형 웹디자인은 viewport너비를 기준으로 한다.
viewport의 width 프로펄티를 이용하여 viewport너비에 따라 반응하는 번위를 지정할 수 있다.

@media only screen and (min-width: 320px) and (max-width: 480px){

}

임의로 해상도를 3단계로 구분하여 breakpoint를 정의한 예제이다.
너비설정할 때 참고하기!!

---

/* 801px ~ */
* { color: black; }
/* ~ 800px */
@media screen and (max-width: 800px) {
  * { color: blue; }
}
/* ~ 480px */
@media screen and (max-width: 480px) {
  * { color: red; }
}

화면이 세로일 때 가로일 때를 구분하는 예제로 주의해야하는 사항으로!
데스크탑은 언제나 가로화면이기 때문에 device-width로 스마트폰의 해상도를 지정하지 않으면 데스크 탑에서도 가로화면 시 style이 적용되는 문제가 발생한다.

@media screen
/* 디바이스가 모바일일 때 (device-width 0~768px)*/
and (max-device-width: 760px)
/*가로*/
and (orientation: landscape){
*{color: blue;}
}

위의 device-width를 이용한 코드를 첫번째 코드 아래에 작성하여 문제를 막을 수 있다!