[css] 반응형 웹을 위한 media query / 실무에서 느낀 점

 

미디어쿼리 css

 

사용 방식

혼자 포트폴리오 작업할 때 쓰던 쿼리 방식은 다음과 같았다.

@mixin responsive($media) {
    @media screen and (max-width:$media) {
        @content;
    }
}


.inner {
    width: 1200px;
    margin: 0 auto;

    @include responsive(1200px) {
      width: 100%;
    }
}

이런 식으로 따로 반응형 작업에 대해서 빼지 않고 각 element 밑에 추가하는 방식이었다.

물론 breakpoint 도 정의해두었지만 필요할때는 정해진 분기 이외에 따로 값을 지정하기도 했다.

이 방법은 내가 그냥 만들면서 편리한 방법이었다.

구조가 복잡해질수록 클래스명을 중복해서 작성할 필요가 없었으니까.

 

 

// _responsive.scss

//구간1
@media all and (min-width:768px) and (max-width:1024px) {}

//구간2
@media all and (min-width:480px) and (max-width:767px) {}

//구간3
@media all and (min-width:320px) and (max-width:479px) {}

 

이 것은 현재 회사에서 사용하는 방식이다.

일단 _responsive.scss, _mixin.scss, _reset.scss, _footer, _header 등으로 scss 파일을 분리하여 작업하고

common, event, layout의 css 파일로 통합시킨다.

예전 학원 수업 들을때 경력자 친구가 사용하던 방식도 이랬다.

그리고 미디어쿼리를 사용할때 min-width와 max-width를 동시에 지정했는데

이렇게 작업을 하다보니

구간끼리 서로 겹치는 부분을 계속 복붙해서 사용하는게 리소스에 문제가 가진 않을까 하는 생각이 들었다.

 

 

max-와 min-을 동시에 사용하는 경우에 대한 이점

In this way browser not apply same css two times and you can easily use css with different property in different devices size. Sometimes browser don't overwrite the css in different device media query then you use !important  in css.

https://stackoverflow.com/questions/42798071/media-min-and-max-both-or-just-one

 

 

즉, 각 분기별로 디자인이 계속 변한다면 max-와 min-을 동시에 사용하는 것이 좋고,

비슷하고 일부만 바뀐다면 하나만 사용하는 것이 좋은 것이다.

디자인 시안과 효율을 맞춰서 사용하면 될 듯하다.

 

 

media type

@media 바로 뒤에 나오는 부분이 미디어 유형인데, 기존에 나는 정확한 배경지식이 없는 상태에서

학원강사님이 가르쳐주신대로 screen을 사용해왔다.

 

http://tcpschool.com/css/css3_expand_mq

 

 

스크린리더까지 생각해서 all을 사용하는 편이 좋을듯 하다.

 

 

논리연산자

• and : 복수의 미디어 쿼리를 하나로 결합
• not : 원래의 의미 반전
• only : 구형 브라우저에 해당 스타일이 적용되지 않게끔 할 때 사용

 

앞서 말한 미디어 유형은 따로 지정하지 않으면 디폴트가 all 이지만, not / only를 사용할 경우 꼭 지정해야한다.

 

 

orientation media query

화면의 방향을 다룰 때 필요한 옵션으로, 방향별 미디어쿼리를 설정할 수 있다.

• 세로 모드: Portrait
• 가로 모드: Landscape

@media screen and (orientation: landscape) { }

 

 

출처

https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/Media_queries

https://developer.mozilla.org/ko/docs/Web/CSS/Media_Queries/Using_media_queries

https://developer.mozilla.org/ko/docs/Web/API/CSS_Object_Model/Managing_screen_orientation

https://studiomeal.com/archives/1068