이 글은 코드잇 스프린트 부트캠프를 수강하면서 작성된 내용입니다.

• 3주차 위클리 미션을 진행하면서 궁금증과 해결 과정입니다.

문제의 발견

요구사항에 맞게 열심히 반응형 웹페이지를 짜고 있었다.

	@media (min-width: 768px){}
    @media (max-width: 1199px){}

그런데 문득, 태블릿 사이즈의 화면 width가 될 때 min-width와 max-width 어떤 것을 사용해 분기해야 될 지 궁금해졌다.
찾아본 대부분의 글에서는 min-width를 사용했고, 종종 max-width 를 사용하는 사람이 있기도 했다.

어떤게 맞는 방식인가

media query 의 break point를 어떤식으로 주는게 유용한지는 요구사항에 따라 다를거같습니다.
저는 아무래도 min-width를 선호합니다. 아 이미 정리된 글이있군요
by : 멘토 domuk_k

요구사항에 따라 다르게 min-width와 max-width를 사용한다고 한다. 그리고 멘토님이 올려주신 링크에서 답을 찾을 수 있었다.

min-width를 사용하는 경우

스마트폰 등 가장 작은 사이즈에서의 레이아웃을 기본으로 하고, 점차 확장되어가는 형태로 CSS를 작성합니다.

max-width를 사용하는 경우

데스크탑용의 가장 큰 화면 사이즈의 레이아웃을 기본으로 하고, 점차 축소하는 형태로 CSS를 작성합니다.
출처 : https://studiomeal.com/archives/1004

즉, 레이아웃의 기본을 어떤 기점(PC, 모바일)으로 잡느냐에 따라 다르게 사용할 수 있다고 한다.
마찬가지로, 글쓴이도 min-width 방식을 선호했다.

나만 궁금한 것은 아니였다

대부분의 튜토리얼에서는 min-width를 사용하는데, 가끔 전 min-width를 사용하는 사람을 봤습니다.
이런데에 어떤 디자인 트렌드나 패턴이 있는건가요? 왜 사람들은 min-width를 더 많이 씁니까?
출처 : https://stackoverflow.com/questions/16647380/max-width-vs-min-width

무려 10년전에도 나랑 비슷한 궁금증을 가진 사람이 있었다.
가장 좋은 좋아요를 받은 답변에는 위의 이유와 동일했고, 두번째 인기 답변에서 새로운 점을 알 수 있었다.

@media screen and (max-width:100px) {
    body { font-weight:bold; }
}
@media screen and (max-width:200px) {
    body { color:#555; }
}

이는 0~100px 사이에서는 body의 폰트가 bold, 폰트의 색이 #555가 적용될 것입니다. 그리고 100~200px에서는 폰트의 색이 #555가 될 것입니다.
만약 이런 방식으로 스타일을 '유출' 시키고 싶다면 min-width나 max-width를 사용하면 되지만, 정확히 특정 범위내의 스타일을 지정하고 싶다면 둘을 합쳐 사용하세요.

그니까, 이런 '유출'방식을 잘 사용하면 공통되는 스타일을 이후의 미디어 쿼리로 계속 적용 시킬 수 있다.

느낀점

저번 위클리 미션도 그렇고, 내가 해오던 방식은 PC에서 모바일로 축소시켜가는 방식으로 개발하면서 min-width를 사용했는데, 개발자의 성향에 따라 다를 수도 있다는 것을 느꼈다.
그래도 언젠가 협업을 하게 될 때는 팀원들과 잘 조율하여 한가지 방식으로 할 수 있도록 통일할 필요가 있을 것 같다.