[HTML, CSS] 모바일에 대응되는 웹사이트

 

 

 

1. 미디어쿼리 소개

- 미디어쿼리

: pc, 모바일, 태블릿 모두 대응되는 웹사이트 만들기 위한 장치

: 반응형, 적응형 웹사이트 만들 때 사용

 

- 미디어쿼리 @media

: 브라우저 가로폭 조건 설정

: .media {   → 미디어쿼리를 적용할 대상 필요

      width: 500px;

      height: 500px;

      background-color: red;

}

@media (min-width: 100px) and (max-width: 300px) {

    .media {

        width: 300px;

        height: 300px;

        background-color: orange;

    }

}

: @media와 함께 min/max width를 적어주는 것이 미디어쿼리

: 가로폭이 조건과 같을 때, {}안의 속성으로 대체하겠다는 의미

: .media에 코드가 있고, 미디어쿼리 내부에 코드가 없으면 → .media의 코드를 상속받아서 적용시킴

 

: 미디어 유형

1) @media all (기본값) { } : 모든 디바이스 대상

2) @media print { } : 인쇄 결과물, 인쇄 미리보기 문서

3) @media screen { } : 스크린, 태블릿, 스마트폰 등에 쓰임

4) @media speech { } : 스크린 리더기에 사용

 

: 논리 연산자

1) @media all and { } : 모든 쿼리 참 → 적용

2) @media all not { } : 모든 쿼리 거짓 → 적용

3) @media all, { } : 하나라도 참 → 적용

4) @media only screen : 미디어쿼리 지원하는 브라우저만 적용

 

2. 미디어쿼리 사용시 주의사항

- viewport

: 화면 상에 표시되는 영역 (너비와 배율 설정할 때 사용)

: 미디어쿼리를 사용하려면, meta태그에 viewport를 반드시 작성해줘야 함

: <meta name="viewport" content="width=device-width, initial-scale=1.0"> 작성 필요

 

- CSS 속성 상속

: 미디어쿼리 외부영역에 있는 CSS 속성을 상속받음

: 상속받고 싶지 않으면, none 입력