위스타그램 클론코딩

미디어쿼리

1. 완성본

화면 창의 크기가 830px가 넘는다면 aside태그가 보이게,
화면 창의 크기가 830px보다 작아진다면 aside태그가 사라지게 설정했다.

2. css

@media(max-width : 830px){
    aside{
        display : none;
    }
    .logosize > h1{
        font-size: 18px;
    }
}

작성한 코드는 위와 같다.

@media쿼리의 괄호 안에는 if문처럼 조건이 들어간다.
최대길이가 830까지는 밑의 css코드를 실행하겠다는 뜻이다.

0px~830px까지는 aside가 display:none;되고
830px이상일 때는 display:none;이 해제되어 정상적으로 출력된다.