220421
미디어쿼리
미디어쿼리
다양한 크기의 디바이스에 맞춰서 CSS를 작성할 수 있게 도와준다.
거의 모든 브라우저에서 지원됨.기본적인 사용법
@media (조건문) {실행코드}all : 모든장치
print :인쇄 장치
screen : 컴퓨터 화면 장치 또는 스마트 기기의 화면
tv : 영상과 음성이 동시에 출력되는 장치
projection : 프로젝터 장치
handheld : 손에 들고다니는 소형 장치
speech : 음성 출력 장치
aural : 음성 합성 장치(화면을 읽어 소리로 출력해 주는 장치)
embossed : 점자 인쇄 장치(화면을 읽어 종이에 점자를 찍어내는 장치)
tty : 디스플레이 기능이 제한된 장치
braille : 점자 표시 장치- And 또는 ,
@media A and B {실행문}
@media A , B {실행문}
And : 앞뒤 조건이 모두 사실일때 뒤에 따라오는 것을
, : 앞뒤 조건 중 하나만 사실이더라도 뒤에따라오는 것을- 조건문
@media (min-width:320px){실행문}
@media (min-width:320px) and (max-width:768px){실행문}미디어 쿼리 적용 방법
- 링크 방식_1
<link rel="stylesheet" href="mediaqueries.css">- 링크 방식_2
<link rel="stylesheet" media="all and (min-width:320px)" href="mediaqueries.css">- 문서 내에서 작성하는 방식
<head>
<style>
@media all and (min-width:320px){실행문}
</style>
</head>
<body>
</body>
문서 내에 작성하게 되면 문서의 용량이 커져 속도가 느려진다.- 임포트 방식
@import url("mediaqueries.css") all and (min-width:320px);
css파일 내에서 css파일을 불러오는 방식이다. 조건이 늘어나면 여러개의 css파일이 필요해져서 웹사이트의 속도가 저하된다.- min/max 사용 시 작성순서
@media all and (min-width:320px){실행문}
@media all and (min-width:768px){실행문}
@media all and (min-width:1024px){실행문}
min : 반드시 크기가 작은 순서대로 작성해야함.
max : 반드시 크기가 큰 순서대로 작성해야함.
뜨내기 FE 개발자