Responsive Web

현대 웹은 데스크랍, 태블릿 pc, 휴대폰과 같은 환경에서 동작, 사용되어지고 있다. 개발자는 웹이 사용 환경에 따라 다른 디스플레이 크기에 맞게 유동적으로 반응하는 '반응형 웹'을 개발하고 있다.

Media query 구문

/* syntax */
@media only screen and (max-width: 500px) {
 p {
  width: 100px;
  }
}

• @media
• only screen
• max-width / min-width

@media

미디어 쿼리는 단말기 유형, 어떤 특징이나 수치에 따라 웹 사이트나 앱의 스타일을 변경하기 위해 사용된다. 반응형 웹의 기본이기에 미디어 쿼리가 없다면 반응형 웹을 만들 수 없다.

미디어 유형

• all : 모든 장치
• (only) print: 인쇄 결과물 혹은 출력장치 미리보기 화면
• (only) screen: 화면
• (only) speech: 음성 장치

반응형 웹을 어떤 미디어 장치를 사용하느냐에 적용할 지 정하는 것으로 여러 장치를 사용한다는 의미로 and를 연결해 주면 여러 장치를 포괄할 수 있다.

미디어 조건

주로 범위 기능으로 앞에 'min-', 'max-'를 붙여 최대, 최소 조건을 충족하는 단말기에서만 반응하는 웹을 만들 수 있다. 이외에도 hover나 color를 조건으로 설정할 수도 있다.