반응형 웹사이트 제작 2 - 미디어 쿼리 사용 시 주의사항

이어서 미디어쿼리 사용시 주의사항에 대해서 살펴보겠다.

---

 

 

 

이론 2 - 미디어쿼리 사용 시 주의 사항

 

 

뷰포트의 메타태그를 반드시 기록해야 한다. 만약 그렇지 않으면 정상적으로 작동되지 않는다.

 

 

 

 

 

 

 

 

기기값을 디바이스의 기기값으로 대체하겠다는 의미이다. initial-scale은 사용자가 접속했을 때 처음 화면 비율을 말한다. 만약 이 내용을 설정하지 않으면 비율이 깨질 수도 있다.

 

 

 

 

 

 

아래 배경색을 명시하지 않아도 바깥쪽의 코드가 적용되어 미디어쿼리는 노란색으로 적용된다.

---

 

 

 

 

 

실습 1 - 미디어쿼리 사용 시 주의 사항 1 : viewport

 

 

 

---

 

 

코드 작성하기

 

 

 

 

모바일로 전환하니 크기가 이처럼 줄어들었다.

 

 

 

처음에는 오타가 있어서 한번 틀렸다가 이번에는 다 맞았다.

---

 

 

 

 

 

퀴즈 2 - 미디어쿼리 속성

 

 

 

---

 

 

 

 

학습을 마치고

미디어쿼리의 viewport 속성에 대해서 학습해보았다. 미디어쿼리를 사용할 때는 meta 영역 안에 무엇을 써야 하는지 알게 된 시간이었다. 새벽에 공부하니 집중도 잘 되고 정말 좋다. 오늘은 운동 전까지 5시간을 공부할 수 있을 것 같다.

처음 css 공부할 때는 정말 어렵게 느껴져서 과연 여기까지 다 할 수 있을까 걱정했었는데 지금까지의 나의 성장이 정말 놀라울 정도이다.