반응형 웹사이트 제작 3 - 미디어쿼리 적용하기

이이서 미디어쿼리를 적용하는 학습을 진행해 볼 것이다. 이론 학습은 이게 마지막이다. 하지만 실습이 정말 많아서 아직 공부를 마치려면 멀었다.

---

 

 

 

 

이론 3 - 미디워쿼리 적용하기

 

 

이전에 만들었던 엘리스 홈페이지를 모바일 버전으로 바꾸려고 한다.

 

 

 

 

 

 

 

상단과 본문을 모두 50%에서 100%로 변경한다.

 

 

 

 

좌우 정렬을 가운데 정렬로 바꾸게 된다.

---

 

 

 

 

실습 3 - 미디어쿼리 사용 시 주의사항 2 : 속성 상속

 

---

 

 

 

 

이 코드를 실행하고 크기를 축소해도 색깔이 변경되지 않는데 이것은 미디어쿼리 바깥쪽에 이미 yellow 속성이 들어가 있기 때문이다. 이제 지시사항대로 border를 추가해 만들어볼 것이다.

---

 

 

 

 

 

원래 크기로 하면 border가 빨간색으로 표시된다.

 

 

 

 

크기를 줄이니 이처럼 사라진다. 즉 모바일과 PC 버전을 다르게 적용함으로써 감추는 효과를 만들 수 있다.

 

 

 

---

 

 

 

 

퀴즈 3 - 미디어쿼리 사용 시 주의사항

 

 

 

 

---

 

 

 

학습을 마치고

별로 어렵지 않은 내용의 이론과 실습이었다. 어제 저녁에 공부하지 못한 부분을 미리 발행해서 다음날 새벽에 일찍 일어나 학습을 이어가고 있다. 원래 기상 시간 전에 했어야 하는 공부를 모두 마쳤다.

 

이제 오늘의 공부를 하면 될 것 같다. 매일 공부하며 올려야 하는 학습일지의 최소량은 10개로 잡고 매일 10개 이상씩 올리며 한 달에 300개 이상의 학습일지를 올리고 있다. 하지만 지난 며칠 동안의 학습량이 저조해서 오늘과 내일, 내일 모레까지 최대한 할 수 있는 만큼 많이 해볼 생각이다.