기본 문법
미디어쿼리는 css에서 어떤 스타일을 선택적으로 적용하고 싶을 때 쓴다.
다른 언어의 if 조건문과 비슷하다.
@media (조건) {
스타일
}조건이 만족되면 스타일 부분의 코드가 돌아가고 아니면 안 돌아간다.
좁은 화면에서만 보고 싶을 때
핸드폰처럼 좁은 화면에서만 특정 스타일을 적용하고 싶으면 화면의 최대 너비를 제한함으로써 적용할 수 있다.
예를 들어 최대너비가 800px 이하에서만 배경색을 파란색으로 만들어준다고 하면
@media (max-width: 800px){
.divdivdiv {
background-color: blue
}
}넓은 화면에서만 보고 싶을 때
TV처럼 넓은 화면에서만 특정 스타일을 적용하고 싶다면 화면의 최소 너비를 제한하면 된다.
예를 들어 최대너비가 800px 이상에서만 배경색을 파란색으로 만들어준다고 하면
@media (min-width: 800px){
.divdivdiv {
background-color: blue
}
}미디어쿼리 적용법
1) <link>태그는 <head>태그 안에 위치하여 media 속성 안 조건이 만족될 때 css 파일을 불러온다.
<link href="cssfile.css" media= "screen and (min-width:800px) and (max-width:1024px)" rel="stylesheet">
로그함수 성장을 그리고 싶은 개발자 지망생