07.09 미디어쿼리

김민지·2021년 7월 9일

개발일지

목록 보기

10/13

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

실습 코드 깃허브 링크

미디어 쿼리란?

미디어 쿼리는 CSS3에 도입된 CSS 기술이다.
@media특정 조건이 true인 경우에만 CSS 속성 블록을 포함하는 규칙을 사용한다.

반응형 웹디자인이란?

반응형 웹 디자인은 웹 페이지를 모든 장치에서 보기 좋게 만든다.
반응형 웹 디자인은 HTML과 CSS만 사용한다.
반응형 웹 디자인은 프로그램이나 JavaScript가 아니다.

적응형 : px 단위로 뚝뚝 끊김

반응형 : 자연스러운 리사이징

*네이버처럼 웹버전과 모바일버전 레이아웃이 전혀 다른경우
->반응형X 모바일 버전 따로 만드는것이 좋다.

미디어쿼리 주의점

1.미디어쿼리 바깥쪽에서 작성된 css를 매번 다르게 코딩해주어야한다. (상속을 받는다)
이 방법이 번거롭다면 pc버전 css와 모바일버전 css를 따로 저장하는 방법도 있다.

2.미디어쿼리 사용시 반드시 넣어야하는 meta태그

<meta name="viewport" content="width=device-width, initial-scale=1.0">
viewport : 웹사이트를 보는 기기의 화면 
content="width=device-width" : 너비는 디바이스의 값으로 설정함 
initial-scale=1.0 : 비율은 항상 일정하게 유지하겠다.

https://www.w3schools.com/css/css_rwd_viewport.asp
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
개발자도구 크롬>f12 > 모바일버전 크기 확인 가능함.

다른사람이 코딩 해놓은 미디어쿼리도 개발자도구로 확인가능.
https://www.awwwards.com/

display: none; 설정한 후 미디어쿼리 코드로 화면크기 설정.
원하는 정보를 원하는 기기에 보여줄 수 있다.

@media (min-width: 320px) and (max-width: 767px) {
    .pc {
    	display: none;
    } 320px~767px 화면에서는 pc를 보여주지 않겠다.

    .mobile {
    	display: block;
    } 320px~767px 화면에서는 mobile을 보여준다.

웹사이트 제작

1.모바일버전 > 2.태블릿버전 > 3.PC버전
이 순서가 일반적.

학습 소감

반응형 웹사이트 제작에 대하여 알아보는 시간이었다. 단순히 '반응형'에 대해서만 알고 있었는데 '적응형' 웹사이트도 있다는 것을 배웠다. 그리고 내가 생각했던 웹사이트 제작 순서가 보편적인 순서와는 다르다는 사실을 알게되었다. 먼저 복잡한 웹사이트를 만들고 나서 태블릿, 모바일까지 줄여가는 것이 수월하다고 생각하고 있었는데, 일반적인 실무에서는 모바일로 먼저 구현하고 PC버전 웹사이트까지 확장해간다고 해서 조금 놀랐다. 다시 생각해보면 간단한 뼈대 구조를 잡고나서 (html) CSS와 Javascript로 살을 덧붙여 나가는 웹사이트 설계 및 제작 순서와 비슷한 것 같기도 하다.