[CSS] MediaQueries 미디어 쿼리

미디어 쿼리 Media Queries란?

화면 해상도, 기기 방향 등의 조건으로 HTML에 적용하는 스타일을 전환할 수 있는 CSS3의 속성 중 하나

• @media [only 또는 not] [미디어유형] [and 혹은 ,] (조건문) {실행문}
• **** min, max을 사용할 땐 반드시 크기가 작은 순서(min)와  큰(max) 순서대로 작성해야 한다.
• 미디어쿼리 작성시 뷰포트 값은 필수로 작성해야 한다.
• 선택자의 우선 순위에 따라 값이 적용되기 때문에 잘 체크해야 함.
• 기존 css 방식처럼 내부 선언(<style>), 외부 선언(외부.css문서)이 가능하며 기기의 뷰포트 별로 작성시, min(작은 순), max(큰 순)의 크기 순서대로 연결해야 함.

 

미디어 쿼리 작성 방식

@media screen /* 스크린을 만났을 때 실행 */
{ 
	실행문
}
@media screen and (min-width: 414px) /* 스크린의 가로 크기가 최소 414px 이상이면 적용 */
{ 
	실행문
}
@media screen and (min-width: 414px) and (max-width: 960px) 
{ /* 가로 크기가 최소 414px 이상 최대 960px 이하까지만 적용 */
	실행문
}

 

미디어 쿼리 외부 선언 방식

외부 링크 선언시 media 값을 입력하면 css문서의 media값은 생략 가능.