728x90
1. 반응형 웹이란?
1-1. 정의
: 웹 페이지 하나로도 데스트톱, 태플릿PC, 스마트폰에 맞게 디자인이 자동으로 반응해서 변경되는 웹 페이지
1-2. 장점
- 효율적인 개발 가능
- 유지 보수가 용이함
1-3. 방법
- 미디어 쿼리 사용 👉 스마트폰의 방향 파악뿐만 아니라 시각 장애인 전용 웹 페이지 개발 등에 활용할 수 있음
1-4. 미디어쿼리란?
- 미디어 타입에 따라 CSS를 적용할 수 있는 기능
- 활용법
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 너비가 1024보다 넓은 경우 */
body {
background: url('../images/bg0.jpg') no-repeat fixed;
background-size: cover;
}
/* 768 < screen <= 1024 */
@media screen and (max-width:1024px) {
body {
background: url('../images/bg1.jpg') no-repeat fixed;
background-size: cover;
}
}
/* 320 < screen <= 768 */
@media screen and (max-width:768px) {
body {
background: url('../images/bg2.jpg') no-repeat fixed;
background-size: cover;
}
}
/* screen <= 320 */
@media screen and (max-width:320px) {
body {
background: url('../images/bg3.jpg') no-repeat fixed;
background-size: cover;
}
}
</style>
</head>
<body>
</body>
</html>- 미디어 타입이란?: 장치
예) 프린터, 데스크톱, 스마트폰, 태블릿PC, 시청각 장애인 등이 사용하는 웹 브라우저
'Language > HTML, CSS' 카테고리의 다른 글
| css 파일, js 파일을 html에 불러와 적용하기 (0) | 2024.03.18 |
|---|
