css-root/미디어쿼리

root 선택자

root문은 자주 사용하는 css속성에 이름을 부여하여 다시 쓰기 편하게 하는 유용한 기능이다.

:root{
--저장명 : css속성값}

예를 들어 --brand-color라는 변수명 안에 #f0f라는 색상을 집어넣고

   <style>
   :root{
        --brand-color : #0f0;
    }

사용할 때는 다음과 같이 var를 사용해서 사용할 수 있다.

    <style>
    header{
        background-color:var(--brand-green)
    }

미디어쿼리

> 미디어쿼리란 css의 if문과 같다.```

@media 유형 (속성 : 값) and (속성 : 값)
{css 속성}

if 문과 비슷하다는 이유는 ()안의 속성 : 값이 참이 되어야 {}안의 css 속성이 실행되기 때문이다.
유형에는 all, print, screen 등 기기의 종류가 들어가며 이는 생략도 가능하다. 또한 {}안에 css속성을 여러 개 작성 할 수도 있다.

        @media screen and (max-width:780px){
            header{
                font-size: 20px;
                text-align: center;
            }
            main>aside{
                display:none;

            }
        }

위같이 작성하면 max-width 즉 최대 화면이 780px이 될 때까지 {}안의 속성이 실행된다는 의미이다. 즉 0 ~ 780px까지는 기존의 css 속성을 무시하고 {}안의 css 속성이 실행된다.