아주 쉬운 CSS - 미디어 쿼리

미디어쿼리에 대해 알아보자!

미디어쿼리

PC 뿐만 아니라 모바일과 태블릿에도 대응되는 웹사이트를 만들기 위해 반응형 웹사이트를 만들 때 사용되는 CSS 구문

.hello{
    width: 10px;
    height:10px;
    background-color:black;
}
@media (min-width: 320px) and (max-width:20px) {
    .hello{
        width:20px;
        height:20px;
        background-color:white;
        border: pink solid 10px;
    }
    #intro h1 a{
        text-align:center;
        padding: 10px 10px 0 0            /* 시계방향: 상, 우, 하, 좌 */
}

• min-width와 max-width로 브라우저의 가로폭 설정
  : 브라우저의 가로폭이 최소 320px, 800px이 되었을 경우, 중괄호 안의 css 속성으로 대체하겠다는 의미

---

viewport

미디어쿼리가 작동하지 않는 문제 발생 시 viewport로 설정한 너비와 배율로 의도한 화면을 볼 수 있다.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

• name="viewport": 다양한 디지털 기기의 화면 상에 표시되는 영역을 의미
  너비와 배율을 설정할 때 사용하는 메타 태그의 속성 중 하나
• width = device - width: viewport의 가로폭 = 디바이스의 가로폭
• initial - scale = 1.0: 비율은 항상 1.0

---

css 속성상속

미디어쿼리 외부 영역에 있는 css 속성을 상속받는다.
만약 상속을 받지 않고자 하면 속성값으로 none을 입력 해야 한다.

.media{
    width: 10px;
    height:10px;
    background-color:black;                
}                                        /* 화면 클때 배경색 black */
@media (min-width: 320px) and (max-width:20px) {
    .media{
        width:20px;
        height:20px;
        background-color:none;            /* 미디어쿼리 안쪽 */
        border: yello solid 10px;        
    }                                    /* 화면 줄어들면 배경색 none */
}