CSS (12) - 반응형 웹과 미디어 쿼리

 

1. 뷰포트 지정하기

 

<meta name="viewport" content="width=device-width,initial-scale=1">

뷰포트 단위 vw  뷰포트 너비 1%
           vh  뷰포트 높이 1%

 

2. 미디어 쿼리 알아보기 

 

2.1 미디어 쿼리란 접속하는 장치마다 특정한 CSS스타일 적용하는 방법이다.

   

2.2 미디어 쿼리 구문 

 

@media [only | not] 미디어 유형 [and 조건] * [and 조건]

only: 미디어 쿼리 지원하지 않는 웹 브라우저에서는 미디어 쿼리 무시 

not: 다음에 지정하는 미디어 유형 제외 not tv 등

and: 조건을 연결합니다. 

 

@media screen and (max-width:1439px){
}

 

유형 종류는 print와 screen만 알면된다 일단! 

 

웹 문서의 가로너비와 세로 높이 속성 : 실제 웹 문서 내용이 화면에 나타나는 영역을 뷰포트라고함 

width,height 가로너비 세로높이 지정

min- max- 최대 최소 너비 지정 

 

단말기의 가로너비와 세로높이 속성: 단말기의 너비와 높이는 단말기 브라우저 창의 너비와 높이를 말한다.

대부분의 단말기 해상도와 실제 브라우저 너비가 다르기 때문에 따로 지정하는 속성이 있다.

 

화면 회전속성

 

미디어쿼리 중단점: 모바일,태블릿,데스크톱 정도만 구별하자 

모바일을 먼저 고려해서 작성하자 이게 모바일 퍼스트 기법이다.

 

 

2.3 미디어쿼리 적용하기 

 

외부 CSS 파일 연결 혹은 웹 문서에 직접 정의하는 방법이 있다.

외부 CSS  link태그나 @import를 주로 사용한다. 보통 link태그 사용함 

<link rel="stylesheet" media="print" href="css 파일경로">
@import url("path") only screen and ~조건