Media Query

TigerStoneV·2022년 4월 4일

🎅 Media Query란?

미디어 쿼리는 CSS문법 중 하나이며 , 반응형 디자인을 사용할 수 있도록 도와준다.

🎅 문법

미디어 쿼리는 다음의 문법을 가진다.

@media <media type> and (media feature) { /*...*/ }

시작은 at-rule 이라고 불리는 @media 키워드로 시작을 해야하며, 괄호로 쌓인 feature은 0개 이상이여야 한다.

🎅 media feature

@media screen and (max-width: 1023px) { 
              			... 
              }

미디어 피쳐는 괄호로 쌓여있으며 name과 value를 가진다.
이러한 구조 때문에 css property와 유사하지만 엄밀히는 다르다.

🎅 Logic 조건부

@media screen and (min-width: 400px) or (max-width: 800px) { ... }

논리 연산자에는 and,or,not이 있습니다.

@media not print and (min-width: 100px) { ... }

not 연산자는 모든 미디어 쿼리를 부정한다.
따라서 예시를 보면 유저가 프린트가 아니거나 min-width가 100px이상이 아닌 경우에 적용이 된다.
not 연산자를 사용하려면 무조건 미디어 타입을 정의해야한다.
따라서 일부 조건에만 부정을 취하는 not() 함수도 있다.

🎅 nesting

@media (min-width: 400px) and (max-width: 800px) { /*...*/ } @media (min-width: 400px) { @media (max-width: 800px) { /*...*/ } }

and로 묶인 media feature은 중첩문으로 바꿀 수 있다.
@media screen {} 내부에 미디어 쿼리를 작성하여, 화면에서만 적용되는 스타일을 정의할 수도 있다.

🎅 media query in Html

<link href="style.css" rel="stylesheet" media="screen and (min-width: 400px)"/> <style media="screen and (min-width: 400px)"> ... </style>

link혹은 style 태그의 media 속성으로 정의할 수 있다.

🎅 media Query 적용

모바일우선 vs 데스크탑 우선.
미디어 쿼리를 쓰는 이유인 반응형 디자인을 설계할 때 크게 모바일이 우선인 디자인과 데스크탑우선인 디자인을 선택을 고려한다.
mobile first: 모바일 우선이며, min-width 미디어 피쳐를 통해 데스트탑 화면을 고려한다.
desktop first: 데스크탑 우선이며, max-width 미디어 피쳐를 통해 모바일 화면을 고려한다.
대부분은 모바일우선을 선호한다. 이유는 좁은걸 넓히는 것은 쉽지만 반대는 어려우기 때문이다.

main {
  display: flex;
  flex-direction: column;
}

@media (min-width: 40rem) {
  main {
    flex-direction: row;
  }
}

🎅 dimensions

width, height와 같은 크기관련 속성들이 사용됨.
보통은 값의 단위로 px을 사용함. em을 사용하면 사용자의 확대 및 축소에 유용하게 대응 가능함.

🎅 aspect ratio

@media (aspect-ratio: 16/9) { 
		/* 화면비가 16:9인 경우*/ 
} 
@media (min-aspect-ratio: 1/1) { 
	 /* 최소 화면 비가 1:1 이상인 경우.
		즉, 화면의 높이에 비해 너비가 더 넓은 경우 */ 
	 /* (orientation: landscape) 와 동일 */ 
} 
@media (max-aspect-ratio: 1/1) { 
    /* 최대 화면 비가 1:1 미만인 경우. 즉, 화면의 너비에
        비해 높이가 더 높은 경우 */ 
    /* (orientation: portrait) 와 동일 */ 
}

높이와 너비의 비율인 aspect-ratio 나 orientation 을 사용할 수도 있다.

🎅 실제 코드 사용 연습

.address {
    position: absolute;
    display:flex;
    justify-content: center;
    bottom: 5%;
    left: 100px;
    width: 500px;
    height:700px;
    animation: slide_left 1.2s ease-out;    
    padding: 20px 15px;
    flex-wrap: wrap;
    background-color: white;    
}
@media (max-width: 1720px) { 
   .address {
        position: absolute;
        display:flex;
        justify-content: center;
        bottom:5%;
        left:2%;
        width:500px;
        height:700px;
        animation: slide_left_2 1.2s ease-out;
        background-color: #fefefe;
        padding: 20px 15px;
        flex-wrap: wrap;
    }
}

.address의 style을 1720px전 화면이 맞지 않다고 고려해서 left값과 animation값을 바꿔준다.

🎅 마무리

여기까지 미디어 쿼리를 찾아보고 좋은 자료들을 토대로 보고 써내려갔는데, 아직도 내가 쓸 수 있는 부분과 쓸 이유가 없다고 판단이 되는 경우들이 종종 있는거같다.
그래도 계속해서 공부하구 알아가면 좋은 것들 이기에 반응형 웹 제작을 위해서라면 사용정도는 해보는 것이 좋다고 판단된다.