<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>response.html</title>
<link rel="stylesheet" href="./response.css">
</head>
<body>
<!--
! 미디어 유형
all(기본값): 모든 미디어 유형에서 적용
>> 컴퓨터(모바일), tv, 인쇄 장치 등
screen: 컴퓨터의 스크린(모바일 스크린 포함)
! 논리 연산자
and: 여러 조건을 연결해서 추가
(모든 조건을 만족해야 실행)
,(or): 조건 중에서 하나라도 일치하면 실행
! 주요 속성값(조건)
width, height (너비/높이)
min-width, min-height(최소 너비/높이)
max-width, max-height(최대 너비/높이)
? 분기점
: 미디어 쿼리가 도입되는 시점
모바일 (320px ~ 480px)
태블릿 (481px ~ 1024px)
데스크탑(PC) (1025px 이상)***
# 미디어 쿼리 작성법
@media 조건 나열(and / , ) {
해당 조건일 때 실행할 코드 작성
}
-->
<h1 class="title">안녕하세요 :)</h1>
<p>
반응형 웹 디자인
</p>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
</html>
css
p {
font-size: 60px;
transition: font-size 0.3s ease-in-out;
}
/*
브라우저 화면이 600px보다 작은 화면에서는 20px로 줄임
: 600px 이하(최대가 600px)
*/
@media (max-width: 600px) {
p {
font-size: 20px;
}
}
/*
브라우저 화면이 600px보다 크거나
1000px보다 작은
화면에서는 40px로 줄임
*/
@media (max-width: 1000px) and (min-width: 600px) {
p {
font-size: 40px;
}
}
.title {
background-color: lightblue;
}
@media (max-width: 1023px) {
.title {
background-color: lightcoral;
}
}
@media (max-width: 767px) {
.title {
background-color: lightgreen;
}
}
@media (max-width: 639px) {
.title {
background-color: lightpink;
}
}
/* 반응형에 따른 배치 변화 */
ul {
margin: 10px;
padding: 0;
list-style: none;
display: flex;
transition: flex-direction 0.5s ease-in-out;
}
li {
width: 300px;
margin: 10px;
padding: 10px 20px;
background-color: lightblue;
justify-content: center;
}
@media (max-width: 800px) {
ul {
flex-direction: column;
}
}
'CSS' 카테고리의 다른 글
| CSS 활용예시(transition) (0) | 2024.07.30 |
|---|---|
| CSS 활용예시(flex03★) (0) | 2024.07.29 |
| CSS 활용예시(flex02★) (0) | 2024.07.29 |
| CSS 활용예시(flex01★) (0) | 2024.07.29 |
| HTML, CSS 연습 문제 (0) | 2024.07.29 |