미디어 쿼리를 사용한 반응형 디자인 예제 6개를 제공하겠습니다. 각 예제는 주석과 함께 설명되며, HTML과 CSS 코드로 구성되어 있습니다.
예제 1: 화면 폭에 따른 텍스트 크기 조절
<!DOCTYPE html>
<html>
<head>
<style>
/* 미디어 쿼리를 사용한 반응형 텍스트 크기 조절 */
p {
font-size: 16px;
}
@media screen and (max-width: 600px) {
p {
font-size: 14px;
}
}
</style>
</head>
<body>
<p>이 텍스트의 크기는 화면 폭에 따라 조절됩니다.</p>
</body>
</html>
예제 2: 화면 폭에 따른 레이아웃 변경
<!DOCTYPE html>
<html>
<head>
<style>
/* 미디어 쿼리를 사용한 반응형 레이아웃 변경 */
.container {
display: flex;
flex-direction: row;
}
@media screen and (max-width: 600px) {
.container {
flex-direction: column;
}
}
</style>
</head>
<body>
<div class="container">
<div>아이템 1</div>
<div>아이템 2</div>
<div>아이템 3</div>
</div>
</body>
</html>
예제 3: 화면 폭에 따른 이미지 변경
<!DOCTYPE html>
<html>
<head>
<style>
/* 미디어 쿼리를 사용한 반응형 이미지 변경 */
img {
max-width: 100%;
}
@media screen and (max-width: 600px) {
img {
max-width: 80%;
}
}
</style>
</head>
<body>
<img src="desktop-image.jpg" alt="데스크톱 이미지">
</body>
</html>
예제 4: 화면 방향에 따른 스타일 변경
<!DOCTYPE html>
<html>
<head>
<style>
/* 미디어 쿼리를 사용한 반응형 화면 방향에 따른 스타일 변경 */
div {
width: 300px;
height: 200px;
background-color: #3498db;
}
@media screen and (orientation: landscape) {
div {
background-color: #27ae60;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
예제 5: 해상도에 따른 이미지 변경
<!DOCTYPE html>
<html>
<head>
<style>
/* 미디어 쿼리를 사용한 반응형 해상도에 따른 이미지 변경 */
img {
max-width: 100%;
}
@media screen and (min-resolution: 192dpi) {
img {
max-width: 50%;
}
}
</style>
</head>
<body>
<img src="image.jpg" alt="이미지">
</body>
</html>
예제 6: 터치 디바이스 여부에 따른 스타일 변경
<!DOCTYPE html>
<html>
<head>
<style>
/* 미디어 쿼리를 사용한 반응형 터치 디바이스 여부에 따른 스타일 변경 */
button {
background-color: #3498db;
color: white;
padding: 10px 20px;
}
@media screen and (hover: none) {
button {
background-color: #e74c3c;
}
}
</style>
</head>
<body>
<button>버튼</button>
</body>
</html>
'CSS' 카테고리의 다른 글
| 툴팁 스타일링: 툴팁 디자인 커스터마이징. (0) | 2023.12.23 |
|---|---|
| 텍스트 회전: 텍스트 회전 효과 적용. (0) | 2023.12.23 |
| 그라데이션 배경: 그라데이션 배경 적용. (0) | 2023.12.23 |
| 라운드 코너: 요소의 모서리를 둥글게 처리. (0) | 2023.12.23 |
| 텍스트 강조 효과: 텍스트 강조 효과 추가. (0) | 2023.12.23 |