[코딩 공부_101] 반응형 웹 Media Query가 적용이 안되요!

정말정말 반응형 웹 Media Query가 적용이 안되서 엄청 찾아봤는데 정말정말 허무했다.. 

적용이 안되는 상황 먼저 설명하겠다

---

1. '우선순위의 문제'임을 발견

- media query를 작성했지만 media query가 작동되지 않고 기존에 작성한 코드가 작동이 된다. 

- 우선순위가 문제임이 확실한지 다른 우선순위를 무시할 수 있는 !important를 사용하여 작동되는 지 확인해본다.

(결과적으로 !important를 하면, 잘되는 것을 볼 수 있었다.)

 

2. 우선순위가 문제라면 크게 두가지 경우의 수를 나눌 수 있을 거라고 판단하였다.

 ① media query 작성방법을 잘못 알고 있나?

 - media Query의 작성방법

@media screen and (max-width: 768px) { 
	body { background-color: lightgreen; } 
}

 ② media query의 위치가 잘못 된 건가?

*** css는 밑으로 내려갈 수록 우선순위가 높다! 즉, css 스타일링 > media Query 순으로 링크가 설정되어야하는 것이다. index.css 안에 media query를 링크하는 것이 아닌 html 내에 index.css > media query순으로 링크를 설정해야함!!

<!-- index.css -->
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./css/responsive.css">