media-query를 이용한 반응형 구현시 width에 따른 변화가 일어나지 않는 경우 / 미디어 쿼리의 우선 순위 (tailwindCSS)

반응형 이미지를 구현하면서 미디어 쿼리를 사용해서 뷰포트 width에 따라 변화를 주고 있었다. 

그런데 자꾸 sm 사이즈, lg 사이즈만 적용되고 중간 사이즈가 적용이 안 되고 헛도는 것;;

사이즈에 변화를 주거나 이것 저것 만져봐도 이유를 모르다가 해결책을 알아냈다. 먼저 문제 상황을 간략히 설명하자면 다음과 같다.

---

➡️ 문제 상황 !

@media screen and (max-width: 734px) { 
	.section-tile-wrapper { 
    		min-height: 490px; 
            justify-content: flex-end; 
    }
}

@media screen and (max-width: 1068px) { 
	.section-tile-wrapper {
    		min-height: 600px; 
     }
}

 

다음과 같이 하나의 className을 가지고 width에 따라 다른 min-height를 사용하려고 하는데, 위처럼 작성해서 적용했을 때 내가 예상한 동작은 width가 1068px보다 작아지면 min-height: 600px;가 되고, 그 다음 width가 734px보다 작아지면 min-height: 490px; justify-content: flex-end; 가 적용되는 것이었는데

 

실제로는 width가 1068px보다 작아지면 min-height: 600px;가 되고, 그 다음 width가 734px보다 작아져도 min-height: 600px;만 적용되고 있다.

---

내가 마주한 문제의 해결방법은 뷰포트 크기를 내림차순으로 작성하는 것.

 

그러니까 (width: 1068px) 항목 먼저 작성하고 나중에 (width: 734px) 항목을 작성하면 된다. 그래서 일단 css 관리하는 파일 내의 항목 순서를 @layer => @media 뷰포트 큰 것부터 ->  @media 작은 순으로 변경했다. 그랬더니 내가 원했던 것처럼 큰크기=>작은크기로 잘 좁아짐. 이전에는 갑자기 작아졌다 커졌다;;이럼

 

 

그냥 마구잡이로 작성해도 알잘딱깔하게 CSS가 적용되는 줄 알았는데 이게 중요한지는 처음 알았다. 나만 몰랐던 건가 싶을 정도로 자료가 없다고 생각했는데 키워드를 "미디어쿼리의 우선순위"로 찾아보면 자료가 많이 나온다. 

 

일반적으로 CSS가 특정 속성이 더 구체적일수록, 그리고 더 나중에 선언될수록 우선적으로 적용된다는 걸 인지하고 반응형을 구현한다면 나같은 삽질은 하지 않겠지..