반응형 웹 디자인 (responsive web)
미디어 쿼리
화면 크기에 따라 웹 페이지의 각 요소들이 반응해서 동작하는 것
이걸 CSS 통해 구현하는 개념이 바로 미디어 쿼리!
미디어 쿼리를 쓸 때
@media(min-width:800px) {
div{
display:none;
}
} 스타일 부분에 이런식으로 넣어줌..
저건 최솟값 800px일때 display가 none이 된다는 설정값이다.
그래서 화면이 800px 넘는 순간 div 내용이 사라진다.
만약에 화면이 800px보다 작을때 적용하고 싶으면?
min대신 max를 넣어주면 된다.
CSS코드 재사용
CSS코드를 모든 페이지에 적용해주려면
물론 카피에서 페이스트 하는방법도 있겠지만
더 효율적으로 css파일 하나 만들어주고
각 페이지에
<link rel="stylesheet" href="style.css" /> 이런식으로 링크 걸어주면 적용된다.
