media query 실습

nav bar를 화면 상단에 스크롤 대비 고정시키는 방법

1. nav bar에 position: fixed를 사용하면 static한 값을 가진 main 부분이 가려진다. 3차원인 fixed가 2차원 static을 덮어버리기 때문에 그렇다.
   -> 패딩 값을 주어서 겹쳐진 부분만큼 밀어내준다.
2. nav bar에 position: sticky를 사용하고, top:0을 지정한다. sticky는 static한 상태였다가 스크롤에 따라 fixed처럼 바뀐다. sticky는 익스플로러 지원하지 않음을 주의하자.

PC, Mobile 등 기기별 CSS 적용하는 방법

1. 하나의 CSS 파일에 미디어쿼리 안에 모바일 버전을 넣고 html head에 link한다.
2. 버전에 따라 CSS 파일을 따로 만들어 html head에 link한다.
3. html head에 style로 삽입한다.

<style media="(min-width:300px) and (max-width: 700px)">
	body{
  		background-color: red;
    }
</style>