2023. 6. 24. 20:42ㆍ기술 창고/CSS
반응형을 만들기 위한 방법 중 하나인 Media Query 에 대해 좀 더 정리해보겠습니다.
@media(max-width: 600px){
h1{
font-size: 15px;
}
}
Media Query 는 위와 같은 양식으로 반응형을 구현합니다.
selector 대신에 @ 기호와 media 키워드를 입력하고, (괄호) 안에 조건을 기입합니다.
중괄호에는 조건에 부합할 경우에 적용될 CSS 동작 코드를 입력하게 됩니다.
괄호 안에 들어갈 조건은 다양하게 넣을 수 있습니다.
min-width 와 같이 최소 넓이에 관련된 내용의 조건을 넣거나 할 수 있다는 뜻이죠.
max-width를 조건으로 걸 경우 오른쪽에서 왼쪽 방향으로 넓이를 파악하고,
min-width를 조건으로 걸 경우 왼쪽에서 오른쪽 방향으로 넓이를 파악하여 적용합니다.
@media (min-width: 600px) and (max-width: 900px){
h1{
font-size: 15px;
}
}and 키워드를 넣어 다중의 조건을 적용시킬 수도 있습니다.
위의 예시 코드를 보면 최소 넓이 600px, 최대 넓이 900px 사이의 공간에 반응형이 적용된다는 것입니다.
# 주의해야할 것은 다중 조건을 걸 때 순서를 다르게 하면 접근 방법이 달라지게 된다는 것입니다.
예시 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
<title>Media Query</title>
<style>
body {
background-color: aquamarine;
}
@media (max-width: 480px){
body{
background-color: lightsalmon;
}
}
@media (min-width: 481px) and (max-width: 1200px){
body{
background-color: powderblue;
}
}
@media (min-width: 1201px) and (max-width: 1600px){
body{
background-color: limegreen;
}
}
@media (min-width: 1601px){
body{
background-color: seagreen;
}
}
</style>
</head>
<body>
</body>
</html>예시 코드를 보게 되면 최대 480px의 너비 이하면 lightsalmon 색상이 나오고, 481px 이상 1200px 이하의 경우에는 powderblue 색상을, 1201px 이상 1600px 이하면 limegreen 색상, 1601px 이상이면 seagreen 색상이 나오게 됩니다.
'기술 창고 > CSS' 카테고리의 다른 글
| [CSS] Flex direction / Flex basis (0) | 2023.06.28 |
|---|---|
| [CSS] Flexbox (0) | 2023.06.27 |
| [CSS] 반응형(Responsive) 웹 사이트 만드는 방법 (0) | 2023.06.24 |
| [CSS] CSS Float / Clear (0) | 2023.06.24 |
| [CSS] CSS Display (0) | 2023.06.23 |