반응형 웹사이트 제작 1 - 미디어 쿼리 소개

HTML/CSS 과정의 마지막 주차 학습을 시작해본다. 벌써 눈이 감기며 잠이 오는 저녁시간이지만 할 수 있는데까지 공부해볼 것이다.

---

 

 

 

이론 1 - 미디어쿼리 소개

 

반응형은 웹사이트에 접속해서 브라우저의 창을 늘이거나 줄였을 때 자연스러운 크기 조절 효과가 일어나는 것이다. 적응형은 레이아웃의 변화가 뚝뚝 끊기며 달라진다. 즉 자연스러운 변화가 있느냐 없느냐에 따라 반응형과 적응형으로 나뉜다.

 

 

 

 

가로폭을 설정하는 것 자체가 미디어쿼리이다. 먼저 영역을 설정하고 width, height 등을 지정해준다.

 

 

 

 

 

 

왼쪽이 이 아이콘을 클릭하면 모바일 화면으로 바뀐다. 도메인 주소를 클릭하면 기기 화면에 어을리는 모바일 출력 결과물을 확인할 수 있다. 가장 정확한 방법은 자신이 보는 테블릿이나 스마트폰으로 보는 것이다.

---

 

 

 

 

실습 1 - 미디어쿼리 적용 방법

 

---

 

 

문제 풀기

 

 

원래 이 크기인데 800px이 되는 지점에서 크기와 색깔이 변경되는 것을 알 수 있다.

 

 

 

 

 

미디어 영역을 찍으면 내부 CSS를 볼 수 있다. 

 

 

 

하지만 PC 버전으로 바꾸면 미디어쿼리 영역은 보이지 않는다.

 

 

미디어쿼리에서 어떤 코드를 작성하지 않으면 미디어쿼리 밖에 있는 코드를 상속받아서 background-color가 적용된 효과를 갖게 되기도 한다. 이렇게 미디어쿼리를 사용해 태블릿, 모바일 버전을 만들 때는 미디어쿼리 안쪽에 어떤 코드가 작성되어 있는지 조사해야 할 것이다.

 

 

코드가 잘 작성되어 제출되었다.

---

 

 

 

 

 

퀴즈 1 - 미디어 쿼리란

 

 

 

---

 

 

 

학습을 마치고

어제는 너무 졸려서 다 하지 못했던 내용을 오늘 이어서 학습하니 정말 좋았다. 난 역시 새벽에 공부가 잘 된다. 오늘은 평소보다 1시간 일찍 일어나서 공부를 시작했다.

미디어쿼리가 어떤 원리도 작동되는지 배울 수 있는 시간이었다.