#1 미디어 쿼리란?
화면의 크기에 따라 웹페이지의 각 요소들이 반응해서 최적화된 모양으로 바뀌게 하는것<반응형 웹>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
border: 10px solid green;
font-size: 60px;}
@media(min-width:800px) {
div{
display: none;
}
img{
width: 100px; height: 100px;
}
}
</style>
</head>
<body>
<div>
mediaquery
</div>
<img src="../CSS이론/이미지/해리포터 곰돌이 3.png"
width="400px"
height="400px">
</body>
</html>
@media(min-width:800px)
- min- 최소의 의미 / max 최대의 의미
즉, screen > 800
800보다 너비가 클때 = 최소한의 넓이가 800
<실행>
웹 브라우저 화면의 크기는 f12(개발자 모드)에서 확인할 수 있다.
<css/silde 애니메이션 >
backgruond의 이미지를 창의 크기에 따라 변화하게 하는 방법을 고민하다 미디어쿼리 부분을 학습하였지만 미디어 쿼리태그로는 해결하지 못했다.
인터넷에서 아래와 같은 코드를 발견하여 적용시켜 해결하였다.
background: url(https://www.bebedepino.com/web/upload/img/
23W_bottom_img_1.jpg) fixed;
background-position: center;
background-size: cover;
background-repeat:repeat;<새롭게 알게된 부분>
- background-size 속성
- contain : 이미지의 가로세로 비율을 유지하면서,이미지가 잘리지 않을 때까지만 채운다.
- cover : 이미지의 가로세로 비율을 유지하면서, 이미지가 잘리더라도 주어진 크기를 꽉 채운다.
- 사이즈 직접 입력
(100%, 200px, 50em 등) 비율에 무관하게 입력한 값에 맞춰 사이즈를 조절
- background 이미지 반복
- repeat : 요소의 배경 영역을 채울 때까지 이미지를 반복합니다. 마지막 반복 이미지가 넘칠 경우 잘라냅니다.
- no repeat : 이미지를 반복하지 않습니다. 따라서 배경 이미지 영역이 다 차지 않을 수 있습니다. 반복하지 않은 이미지의 위치는 background-position 속성이 설정합니다.
<고민 점>
백그라운드의 속성을 설정하면 사진의 크기가 창에 맞춰 크기가 변한다.
그럼 굳이 미디어 쿼리로 백그라운드의 이미지를 움직이지 않아도될까?, 백그라운드는 미디어쿼리를 작동하시 않나?의 의문점이 생김...
no repeat를 사용하여 이미지를 반복하지 않아 창의 크기에 맞게 채워진다라고 생각했는데 position 속성의 센터값만 남겨도 이미지가 창의 크기에 맞추어 변한다..
코린이의 IT 근육 벌크업