클론 코딩, 미디어쿼리.

 

미디어 쿼리

 

---

 

 

미디어쿼리는 사이트에 접속하는 디바이스에 따라 css 로 해당 디바이스에서 최적화된 화면으로 보이게끔 만들어주는 것으로 css 에서 원하는 디바이스의 화면에 맞게 레이아웃을 재구성한다.

 

 

 

 

 

1차로 강사님의 도움 없이 클론 코딩으로 미디어쿼리를 적용할 웹페이지를 피그마에 올라온 디자인을 보고 만들었고 2차로 강사님과 처음부터 끝까지 마크업 css 그리고 미디어쿼리 까지 다 같이 만들었다. 

 

1차로 만들었던 코드와 2차로 강사님과 함께 새로 짠 마크업을 비교하면서 처음보다는 많이 나아졌지만 아직 만족할만한 구조를 짜기에는 멀었다는 걸 느꼈다.  css 에서도 불필요한 코드들이 많이 있었고 정리하는 부분들도 느낄 수 있었던 수업이었다.

 

나는 처음에 미디어 쿼리의 개념을 듣고 나서 그럼 그냥 바디나 최상단 부모한테 스케일 줄여주면 되는 거 아닌가?라고 생각하고 그렇게 한번 해봤는데 아니었다. 작아진다는 느낌이 아니라 그냥 줌을 뒤로 당겨서 모바일에 봤을 때 화면이 이상하게 나왔기 때문이다. 

 

아무튼 1차로 이미 마크업과 css 은 피그마 디자인과 똑같이 만들었고 미디어 쿼리가 어떻게 작동하는지는 대략적으로 이해했기 때문에 아프로 실습과 과제 그리고 공부를 하면서 차근차근 익숙해져야겠다.

 

 

 

 

 

 

완성된 페이지 미디어쿼리 (max-width: 360px) 로 제작됐다.

 

 

https://chry8822.github.io/like_lion_daily/like_lion_daily/day10/day10/108_1%EB%A7%8C_%EA%B0%99%EC%9D%B4%EC%BD%94%EB%94%A9.html

1만시간 같이 하기

 

 

 

 

 

 

 

 

 

https://github.com/chry8822

chry8822 - Overview