css의 단위값과 media query에 대해서 알아보겠습니다. 이 글은 mdn을 토대로 쓰여졌습니다.

절대 단위

절대 길이 단위 대부분은 화면 출력이 아닌 인쇄에 사용될 때 더 유용하다. 보통 사용하는 유일한 값은 px (픽셀)이다.

상대 단위

상대 길이 단위는 다른 요소 (상위 요소의 글꼴 크기 또는 viewport 크기) 와 관련이 있습니다. 상대 단위를 사용하면 텍스트나 다른 요소의 크기가 페이지의 다른 모든 것에 비례하여 조정되도록 신중하게 계획할 수 있다는 이점이 있습니다
em, %, vh, vw, 등등

media query

: CSS만을 이용해서 사용자의 스크린 사이즈에 반응할 수 있는 방법.
스크린 사이즈에 따라 CSS 스타일들을 바꿀 수 있다!

@media : 코드의 condition(조건)을 설정하는 것이다. 조건에 맞다면(참) 쓰인대로 이행할 것이고, 맞지 않다면(거짓) 이행하지 않을 것이다.

미디어 쿼리 안에서, 내가 style을 바꾸고 싶은 요소를 선택자로 지정한 후 구체적인 스타일을 정한다.

@media screen and (min-width: 700px) and (max-width: 800px) {
  div {
    background-color: tomato;
  }
}

@media screen and (max-width: 700px) and (orientation: landscape) {
  div {
    background-color: purple;
  }
}

-> media query의 조건은 항상 and로 연결해줘야 하며, @media {}의 안에는 모든 selecter가 들어올 수 있다.
condition은 여러가지이다. (orientation:landscape)이나 (orientation:portrait)는 각각 가로화면이나 세로화면에서만 이행시킨다는 조건이다. (min-device-width)처럼 핸드폰 기기에만 적용되는 것도 있다.