해리의 데브로그

Web 05 - Responsive Web, View port, Media Query

17 Feb 2019 | Web HTML CSS

Responsive Web

  • 반응형 웹 디자인(responsive web design, RWD)이란 하나의 웹사이트에서 PC, 스마트폰, 태블릿 PC 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 기법을 말함.
  • CSS 및 HTML을 사용하여 내용을 조정, 숨기기, 축소, 확대 또는 이동하여 화면에서 보기 좋게 만드는 형식

View port

  • view port는 가로 해상도를 의미하며, 웹페이지의 사용자가 볼 수 있는 영역을 말함.
  • 뷰포트는 모바일기기에 화면이 로드 되었을 때, 페이지가 적정 해상도로 로드 될수 있도록 돕고 확대나 축소를 허용할 것인지 결정 해줌.
  • 뷰포트는 장치에 따라 다름 (휴대폰화면은 컴퓨터 화면 보다 작음)
  • View port의 기본 설정
    • VS CODE 자동 완성 기능을 통해 view port를 meta tag로서 head 요소 안에 넣어 놓고 진행 해옴.
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

Media query

  • media query는 화면의 종류와 크기에 따라서 디자인을 달리 줄 수 있는 CSS의 기능.
  • 특히 최근의 트랜드인 반응형 디자인의 핵심 기술이라고 할 수 있음.

기본구성(syntax)

@media only|not mediatype and|not|,(or) (media feature) { CSS스타일코드;}
  • not: 부정
  • only: 말 그대로 only - 이것만
  • media type(매체유형)
    • all(모든 미디어; 기본값)
    • screen(화면이 달린 기기; 스마트폰, 태블릿 PC등)
    • print(프린터 기기)
    • braille(점자표시장치)
    • tv(음성과 영상이 동시 출력되는 TV)
  • and 또는 , (or): 조건
  • media feature(표현식): 특정 조건을 입력. 예) min-width: 800px

Media query의 대표적인 조건

1. width

  • viewport의 너비를 의미하며, 일반적으로 가장 많이 사용 하는 조건.
  • h2 태그의 색상을 기본적으로 녹색으로 설정하며, 너비가 800px이 되면, 노란색으로 색상이 변경됨
  • ```css h2 { color: green; }

@media (width: 800px) { h2 { color: yellow; } }




### 2. min-width  / max-width

- h3태그의 기본 색상은 회색
- viewport의 너비가 min 600 px 와 max 800 px 조건을 만족할 경우, 색상이 보라색으로 변경됨

```css
h3 {
    color:gray;
}

@media (min-width:600px) and (max-width: 800px) {
    h3 {
        color: purple;
    }
}

3. height / min-height / max-height

  • h4 태그의 기본색상은 Orange
  • viewport의 높이(세로 길이)가 min 400 px 와 max 600 px을 만족할 경우, 색상은 검정으로 변경됨
h4 {
    color: orange;
}
@media (min-height: 400px) and (max-height: 600px) {
    h4 {
        color: black;
    }
}

4. orientation

  • 가상 선택자 ::after 을 활용하여, view port의 방향에 따라 조건 적용
  • view port의 방향이 가로일때는 ‘가로입니다’ 출력
  • view port의 방향이 세로일때는 ‘세로입니다’ 출력
h1.ori::after {
    content: '가로입니다'

}

@media (orientation: portrait) {
    h1.ori::after {
        content: '세로입니다.'
    }
}

5. 응용: Bootstrap의 Break point 흉내내기

/* Extra small: 0~576px */
.rainbow {
    color: red;
}

/* Small: 576px 이상 */
@media (min-width: 576px) {
    .rainbow {
        color: orange;
    }
}

/* Medium: 768px 이상 */
@media (min-width: 768px) {
    .rainbow {
        color: yellow;
    }
}

/* Large: 992px 이상 */
@media (min-width: 992px) {
    .rainbow {
        color: green;
    }
}

/* Extra Large: 1200px 이상 */
@media (min-width: 1200px) {
    .rainbow {
        color: blue;
    }
}

Related Posts

Comments