HTML/CSS media-query, viewport

강정우·2022년 7월 5일
0

HTML, CSS

목록 보기
4/27
post-thumbnail

1. 미디어 쿼리

  • 미디워 쿼리란 pc뿐만 아니라 모바일과 태블릿에도 대응되는 웹사이트를 만들기 위해
  • 모바일에 대응되는 반응형 또는 적응형 웹사이트를 만들 때 사용되는 CSS구문
  • EX)
<style>
.media{
	width : 500px;
    height : 500px;
    background-color : red;
}
@media (min-width : 320px) and (max-width : 500px)
	.media{
		width : 300px;
    	height : 300px;
    	background-color : yellow;
</style>
}
  • 사용자가 뭘로 접속했는지는 px의 크기로 알 수 있다.
  • 위의 코드처럼 media query 는 width, height, background 순으로 작성 해주어야 한다.
  • media query가 정상적으로 출력되는지 확인하는 법은 chrome 개발자 도구의 f12를 눌러서 확인할 수 있다.

2. 미디어 쿼리 사용시 주의사항

  • viewport : 반드시 head 태그안에 있는 meta 태그에 name="viewport"를 기입해줘야 한다.
  • 미디어쿼리가 제대로 작동하지 않는 문제가 발생할 수 있으므로 viewport로 너비와 배율을 설정해야 모바일 디바이스에서 의도한 화면을 볼 수 있음.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
  • 그럼 구체적인 너비와 배율을 어디서 설정하느냐? 바로 .width=divice-width 와 .initial-scale=1.0에서 설정한다.
  • .width=divice-width : viewport의 가로폭 => 디바이스의 가로폭
  • .initial-scale=1.0 : 비율은 항상 1.0
  • 계속 pc버전의 css 미디어 쿼리를 확인하면서 작성해야한다.
<style>
.media{
	width : 500px;
    height : 500px;
    background-color : red;
}
@media (min-width : 320px) and (max-width : 500px)
	.media{
		width : 300px;
    	height : 300px;
    	background-color : yellow;	//이게 작성안되어 있다면 위의 값을 상속받는다
        background-color : none;	//만약 pc의 값을 상속 받기 싫다면 none 값!
</style>
<!DOCTYPE html>
<html>
<head>

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>미디어쿼리</title>
  
  <style>
// 이 밑은 pc에서 적용되는 값.
    .media {
      width: 500px;
      height: 500px;
      background-color: red;
    }
// 이 밑은 해당 min과 max 너비 사이에서 적용되는 값.
  @media (min-width: 320px) and (max-width: 800px) {
      .media {
        width: 300px;
        height: 300px;
        background-color: yellow;
        border : solid 10px blue;
      }
  }
  </style>
  
</head>
<body>

  <div class="media"></div>

</body>
</html>
profile
智(지)! 德(덕)! 體(체)!

0개의 댓글