엘리스 SW 엔지니어 트랙 3일차 (1)

파트1 마무리 이후 자고 일어나 파트2 시작했다.
파트2는 반응형 웹사이트 제작 할 때 필요한 미디어쿼리에 대해 배웠다.

1.미디어쿼리란?
미디어쿼리는 PC 이외에도 모바일, 태블릿에 대응하는 반응형 웹사이트를 제작할 때 사용하는 CSS 구문이다.

.media {
    width: 500px;
    height: 500px;
    background-color: red;
}

/* 미디어쿼리 */
@media (min-width: 320px) and (max-width: 800px) {
    width: 300px;
    height: 300px;
    background-color: yellow;
}

미디어쿼리의 min-width와 max-width로 브라우저 최소, 최대 가로폭을 설정한다.
위 예제 코드는 브라우저의 가로폭이 최소 320px, 최대 800px이 되었을 때 중괄호 내에 있는 css속성으로 대체하겠다는 뜻이다.

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

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

미디어 쿼리 사용시에 위 코드를 디폴트 값으로 설정해줘야한다.
다양한 디지털 기기의 화면 상에 표시되는 영역을 의미하고, 미디어쿼리가 제대로 작동하지 않는 문제가 발생할 수 있으므로 viewport 로 너비와 배율을 설정해야 모바일에서 의도한 화면을 볼 수 있다.
viewport: 너비와 배율을 설정할 때 사용하는 메타 태그의 속성이다.
.width=divice=width: viewport의 가로폭 = 디바이스의 가로폭
.initial-scale=1.0: 비율은 항상 1.0

.media {
    width: 500px;
    height: 500px;
    background-color: yellow;
}

@media (min-width: 320px) and (max-width: 800px) {
    .media {
        width: 300px;
        height: 300px;
        background-color: none;
    }
}

미디어쿼리 외부 영역에 있는 css 속성을 상속 받는다.
만일 상속 받고 싶지 않으면 속성 값으로 none 입력.