[CSS]미디어 쿼리

css

[CSS]미디어 쿼리

LSH2118 2024. 8. 23. 07:33

프론트엔드에는 웹퍼블리싱에 쓰이는 반응형 웹이라는게 있다

반응형이란 사용자가 접속하는 기기의 화면 크기와 해상도에 맞게 웹사이트의 레이아웃과 콘텐츠가 자동으로 조정되는 웹 디자인 방식을 말합니다

오늘은 반응형을 할 수 있게 만드는 2가지중 하나인 미디어 쿼리에 대해 알아보자

미디어 쿼리(Media Queries)

미디어 쿼리는 CSS3에 추가된 기능으로 주로 반응형 웹에 쓰입니다

css의 if문으로 이해하면 쉽습니다

@media (조건){
	/*조건이 참일때*/
}

먼저 @media로 시작합니다

그후에 조건을 적고 안에 우리가 원하는 내용을 넣으면 됩니다

정말 간단하지요?

이제 조건을 알아봅시다

1. 너비와 높이

width / height: 뷰포트(Viewport)의 너비 또는 높이를 기준으로 조건을 설정합니다.
min-width / min-height: 최소 너비 또는 높이를 설정합니다.
max-width / max-height: 최대 너비 또는 높이를 설정합니다.

2. 기기화면

device-width / device-height: 기기의 화면 전체의 너비나 높이를 기준으로 조건을 설정합니다.

3. 가로세로

orientation: 화면의 방향을 기준으로 조건을 설정합니다.
- portrait - 세로 방향일 때 스타일 적용
- landscape - 가로 방향일 때 스타일 적용

4. 화면 비율

aspect-ratio: 화면의 가로 대 세로 비율을 기준으로 조건을 설정합니다.
- min-aspect-ratio: 16/9 - 화면 비율이 16:9 이상일 때 스타일 적용
- max-aspect-ratio: 4/3 - 화면 비율이 4:3 이하일 때 스타일 적용

5. 색상비트

color: 화면이 표현할 수 있는 색상의 비트를 기준으로 조건을 설정합니다
color-index: 화면이 표현할 수 있는 색상의 수를 기준으로 조건을 설정합니다.

6. 기기의 특징

hover: 사용자가 커서를 기기에 올렸을 때 반응이 있는지 여부를 설정합니다.
- @media (hover: hover) - 커서를 올렸을 때 반응이 있을 때 스타일 적용 (예: 데스크톱)
- @media (hover: none) - 커서를 올렸을 때 반응이 없을 때 스타일 적용 (예: 터치스크린)
pointer: 포인터 장치의 정확도를 기준으로 조건을 설정합니다.
- @media (pointer: coarse) - 포인터가 비교적 정밀하지 않을 때 스타일 적용 (예: 터치스크린)
- @media (pointer: fine) - 포인터가 정밀할 때 스타일 적용 (예: 마우스)
display-mode: 웹 페이지의 표시 모드를 기준으로 조건을 설정합니다.
- @media (display-mode: fullscreen) - 전체 화면 모드에서 스타일 적용

7. 논리연산자

and
- @media (조건) and (조건) - 둘다 참일때
or
- @media (조건), (조건) - or은 특이하게 or그대로 작성하거나 쉼표로 대체할수 있다. or의 뜻대로 둘중 하나라도 참 일때
not
- @media not (조건) - 말그대로 조건이 거짓일때

실제 활용

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>미디어 쿼리</title>
    <link rel="stylesheet" href="css.css">
</head>
<body>
    <div id="ball"></div>
</body>
</html>

//css
#ball{
    width:100px;
    height:100px;
    border:1px solid black;
    border-radius:50%;
    background-color:white
}
@media screen and (max-width: 100vw){
    #ball{
        background-color:tomato;
    }
    body{
        background-color:skyblue;
    }
}

이런 코드를 작성해보자

이코드는 뷰포트가 100vw이하면 #ball의 색을 tomato색으로, body의 색을 skyblue로 바꾸는 코드이다

실행을 시켜보면

이렇게 처음에 background-color를 white로 설정해 놔도 불구하고 #ball의 색이 tomato색이 되었다

#ball{
    width:100px;
    height:100px;
    border:1px solid black;
    border-radius:50%;
    background-color:white;
    transition: all 0.5s;
}
@media screen and (max-width: 100vw){
    #ball{
        background-color:tomato;
    }
    body{
        background-color:skyblue;
    }
}
@media screen and (hover:hover){
    #ball{
        width:200px;
        height:200px;
    }
}

이제 하나를 더 추가 해보자

이코드는 이 웹페이지에 마우스가 올라갈수 있는 생태.

즉 노트북이나 데스크탑일 경우에 작동하는 코드이다.

<- 전

확실히 커진 모습을 볼수 있다

<- 후

#ball{
    width:100px;
    height:100px;
    border:1px solid black;
    border-radius:50%;
    background-color:white;
    transition: all 0.5s;
}
@media screen and (max-width: 100vw){
    #ball{
        background-color:tomato;
    }
    body{
        background-color:skyblue;
    }
}
@media screen and (hover:hover){
    #ball{
        width:200px;
        height:200px;
    }
}
@media screen and (max-width: 600px){
    #ball{
        border-radius:0;
    }
}

이제 다시 하나를 추가 했다

추가한 코드는 최대너비가 600px이하일때 #ball의 굴곡을 0으로 바꾸는 코드이다

이렇게 너비가 600px보다 작아지면 #ball의 굴곡이 사라진다

티스토리