[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 - 미디어쿼리란?

 

🍐 미디어쿼리란?

CSS를 공부하다보면 미디어쿼리에 대해 자연스레 알게된다. 

 

미디어 쿼리는 반응형 웹 디자인의 핵심 부분이다. 뷰포트의 크기에 따라 서로 다른 레이아웃을 생성할 수 있기 때문이다. 보통 스크린 사이즈를 조건으로 많이 사용하며, 특정 스타일이 인쇄된 문서 또는 화면 판독기에서만 사용되도록 할 수 도 있다.

 

 

 

🍐 미디어쿼리 기본문법

미디어 쿼리 기본문법은 아래와 같다. css 코드와 함께 작성하며, 사이즈조건 부분에는 'max-width: 1024px'과 같은 조건을 넣어주면 된다. 

또한 all / screen / print / speech 네 가지 미디어 유형을 지정해 줄 수 있다. 

@media screen and (사이즈조건) {
	body {
    	background-color: green;
    }
}

 

 

 

 

🍐 지난 번에 세이프홈즈 랜딩페이지 구조 잡는 것이 과제였는데, 이번 과제는 랜딩페이지를 반응형으로 만드는 것이었다. 

미디어쿼리는 많이 들어보고, 강의도 꽤 보았는데 사실 이렇게 여러 조건을 두고 반응형으로 만들어 보는 것은 처음이었다. 

 

반응형으로 퍼블리싱을 하며 많이 후회하고(?) 반성했다. 처음부터 뼈대를 제대로 잡지 않아서, 반응형도 잘 안되고, 그냥 어거지로 margin에 음수값을 넣어서 페이지를 꾸려 나가는 나를 발견..🥹

간단한 페이지를 만들더라도 차근차근 레이아웃을 만들고 css도 더 심도 깊게 생각하여 진행해야겠다고 다짐했다. 

 

 

 

 

 

사실 완벽하게 반응형 구현이 안되었고, 중간에 휴대폰 이미지가 나오는 부분은 설명과 이미지 부분이 뒤바껴야 하는데.. 

그렇게 하려면 HTML 코드도 모두 뒤집어야 할 것 같아서 그냥 포기하였다 😶‍🌫️

미디어쿼리에 대해서는 더 공부하고, 많이 연습해야지.. 다짐 또 다짐 

 

 

 

 

🍐 완벽한 반응형은 아니지만.. 깃허브 코드도 첨부합니다. 

https://github.com/udemy-team13/training/tree/main/Yuni/Safehomes

GitHub - udemy-team13/training: Practice & Homework

 

 

 

 

 

 

 

 

 

 

 

 

본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.