CSS #5 반응형 디자인, 미디어 쿼리, CSS 코드의 재사용(링크)

반응형 디자인이란?

화면의 크기에 따라 디자인이 바뀌는 기능.

미디어 쿼리의 도움으로 구현이 가능.

​

<style> 태그 내

@media(min-width:800px)​{

div{

display:none;

}

}

화면 너비가 800px 보다 크다면 div 내 컨텐츠를 감춘다.

max-width:800px -> 800px보다 작다면..

​

​

여러 문서에서 <style> 태그의 중복 사용으로 수정이 힘들다면.

1. style 태그 내용을 .css 파일로 저장한다.
2. style 태그가 사용될 각 문서들의 헤드 태그에

<link rel="stylesheet" href="(css파일명)">

을 작성한다.

​

그러면 각 문서는 .css파일을 다운받고 그 내용을 자신의 문서에 그대로 사용하게 된다.