화면의 크기에 따라서 웹페이지의 각 요소들이 반응해서 최적화된 모양으로 바뀌는 것.

반응형 디자인

반응형 디자인의 핵심 - 미디어 쿼리(media query)
@media(min-width:800px){
div{
display:none;
}
}

화면의 크기가 최소 800픽셀 이상이면 div 태그가 화면에 보이지 않게 한다.

@media(max-width:800px){
#grid{
display:block;
}
}
최대값이 800이라는 건 화면 크기가 800픽셀보다 작을 때 id가 grid인 태그의 디스플레이가 화면 전체를 쓰는 블록이 된다.

800이상일때

800 이하일때.

이런식으로 화면전체를 쓰며 블럭에서 벗어나게 된다.

이렇게 정리된 값을 가지고 다른 웹페이지에도 적용하려면??
코드를 복사해서 모두 붙여넣는다?
그게 아니라 중복의 제거를 해야함.

<style에 있는 모든 코드를 복사 후 style.css파일을 생성후 복붙. 그리고 원 파일의 코드를 지우고 대신.
별도 파일에 있는 css를 받아서 동작하도록 함.

link rel="stylesheet" href="style.css">
이 파일은 CSS파일을 받아 동작시킨다는 뜻.
이후 이 코드를 각각의 웹페이지에 복붙하면 됨.

검사 눌러서 개발자 도구- 네트워크 가보면.

이렇게 CSS파일이 다운되어 있는 것을 볼수 있다.

이렇게 별도 파일을 다운로드 하는 방법에 영향을 끼치는 기술
캐싱.(저장하다.)
캐시를 통해 파일을 저장함으로 네트워크 사용을 덜한다.

1. 반응형 디자인-- 미디어 쿼리(@media)
2. CSS파일을 중복되지 않게 별도 파일로 저장후 다운.