고정 헤더 영역
상세 컨텐츠
본문
요즘은 반응형 디자인이 유행이다.
화면 크기에 따라 웹 페이지의 각 요소들이 반응해서 최적화된 모양으로 바뀌는 것을 반응형 웹 또는 반응형 웹 디자인.
영어로 responsive web이라고 한다.
미디어 쿼리는 화면 크기에 따라 웹 페이지의 각 요소들이 반응해서 동작하게 되는것이다.
아래 코드를 보자.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
border: 10px solid green;
font-size: 60px;
}
</style>
</head>
<body>
<div>
Responsive
</div>
</body
</html>
화면 크기의 비율에 따라서 초록색 직사각형의 비율이 동작하게 된다.
화면의 너비가 800px보다 크다면 <div>태그에 display:none을 설정하는 코드이다.
<style>
div{
border: 10px solid green;
font-size: 60px;
}
@media(min-width: 800px){
div{
display: none;
}
}
</style>
'책 리뷰 > 생활코딩! HTML+CSS+자바스크립트' 카테고리의 다른 글
| 11일차 - 자바스크립트 입문 (0) | 2024.01.10 |
|---|---|
| 10일차 - CSS 코드 재사용 (2) | 2024.01.09 |
| 8일차 - 박스모델과 그리드 (1) | 2024.01.05 |
| 7일차 - 속성과 선택자 (1) | 2024.01.04 |
| 6일차 - CSS 기초문법 (1) | 2024.01.03 |
댓글 영역