이 글은 작성자의 개인 공부를 위해 작성한 글입니다.
실제 이론, 실습과 다른 부분이 있을 수 있습니다.
미디어쿼리(Media Queries)는 CSS에서 사용되는 기술로, 미디어의 특성에 따라 스타일을 다르게 적용할 수 있게 해준다. 이를 통해 다양한 기기와 화면 크기에 대응하여 웹페이지의 디자인을 최적화할 수 있다.
미디어쿼리는 주로 반응형 웹 디자인을 구현하는 데 사용된다.
ex) 화면을 작게 만들면 웹 요소들도 작아진다.
1. 미디어 쿼리의 구문
- 미디어쿼리는 @media 규칙을 사용하여 정의된다.
@media media-type and (media-feature) {
/* 스타일 규칙 */
}
- media-type : 미디어 타입을 지정한다. 주로 screen, print, speech 등이 사용된다.
- media-feature : 미디어 특성을 지정한다. 예를 들어, width, height, orientation 등이 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
</title>
<style>
div{
border:10px solid green;
font-size:60px;
}
@media(max-width:800px) { // 800px보다 작아지면 요소들이 사라진다.
// min일 때는 800px보다 커지면 요소들이 사라진다.
div{
display:none;
}
}
</style>
</head>
<body>
<div>
Responsive
</div>
</body>
</html>
'CSS' 카테고리의 다른 글
| CSS 그리드 정리 (0) | 2024.01.07 |
|---|---|
| CSS 박스 모델 정리 (0) | 2024.01.07 |
| CSS 타이포그래피(font-size, color, text-align, font) 정리 (1) | 2024.01.01 |
| CSS 기본 개념과 tag, id, class, 가상class 선택자 정리 (0) | 2023.12.24 |