Devlog 7월 9일 미디어쿼리

9359 단어 htmlhtml

1. 학습내용

미디어쿼리

반응형 적응형 웹사이트를 만들때 사용

모바일, 태블릿 환경에 맞게 자연스러운 변화를 주는 css코드

적응형

뚝뚝 끊어지면서 웹사이트 레이아웃의 구조가 바뀌는 형태

pc버전은 가로폭 100px 모바일은 50px 이런식으로 고정값을 가지고있는 픽셀단위를 사용해서 제작하는 기법

반응형

자연스럽게 resize가 되면서 모바일버전에 맞춰서 레이아웃 구조가 바뀌는것

% 단위를 자주사용

m.naver.com 같은 사이트는 모바일버전용 사이트를 따로 제작한것 (pc버전용 html파일, 모바일버전용 html 파일 따로)
따로 제작이유는 pc버전과 모바일버전이 레이아웃 구조가 180도 다른경우

미디어쿼리 적용하기

뭐든 시작하기전에 초기화작업!
<h1 class="pc">PC Hello World</h1>
html, body, h1, h2 {
    margin: 0;
    padding: 0;
}
.pc {
    color:  red;
    font-size:  50px;
    background-color:   pink;
}

media의 기준점을 만들어줘야한다

사용자가 웹사이트에 접속했을때 pc로 접속했는지 모바일로 접속했는지 알 수 있는 직관적인 방법은 바로 사용자가 접속한 기기의 width값을 기준으로 파악
320px이상 768px미만 : 스마트폰
768px 이상 1024px 미만 : 태블릿
1024px 이상 : pc
브라우저 폭을 줄였을때 미디어쿼리로 만들어놓은 기준점에 도달하게 된다면 pc class의 css는 미디어쿼리 안쪽에 작성된 코드를 기반으로 적용됨
@media (min-width: 300px) and (max-width: 767px) {
    .pc {
        color: blue;
        font-size: 20px;
        background-color: yellow;
    }
}

범위 수정해보기

설정해놓은 범위를 벗어나면 다시 이전의 원래 코드로 돌아옴
@media (min-width: 600px) and (max-width: 767px) {
    .pc {
        color: blue;
        font-size: 20px;
        background-color: yellow;
    }
}

또다른 미디어쿼리를 적용하고 싶을때

밑에 추가
@media (min-width: 100px) and (max-width: 599px) {
    .pc {
        color: green;
        font-size: 10px;
        background-color: gray;
    }
}

미디어쿼리 사용시 주의점

600px~767px 사이 배경색 제거
배경을 넣지않았는데 미디어쿼리 바깥쪽 코드인 핑크색을 유지하고 있음
@media (min-width: 600px) and (max-width: 767px) {
    .pc {
        color: blue;
        font-size: 20px;
}

1. pc버전에서 css를 모바일버전에서는 다르게 적용해야 할때는 미디어쿼리 바깥쪽 코드를 매번 확인해가면서 변경해줘야한다. 그렇지않으면 지금처럼 미디어쿼리 바깥쪽에 있는 background color가 그대로 미디어쿼리 안쪽에도 상속된다

이게 번거롭다면 pc버전용 css파일과 모바일버전 css파일을 따로 만드는 방법도 있음

2. 미디어쿼리를 사용하면 반드시 넣어줘야하는 meta 태그가 있음

viewport : 웹사이트에 접속하는데 이용되는 기기화면을 의미
width=device-width : 웹사이트 width값은 device의 width값으로 적용시키겠다는 의미
initial-scale : 비율은 항상 1.0을 유지한다는 의미
<head>
	<meta name="viewport" 
    	content="width=device-width, initial-scale=1.0">
</head>

device 크기의 width값을 알고 싶을 때

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

참고

min-device-width : 살짝 다르게 표기하고있지만 실무에선 이렇게 안쓰이니 배운대로 사용하면됨
screen : 사용자가 접속하는 디바이스 화면
orientation : 스마트폰 가로모드(landscape), 세로모드(portrait)
일반적으로 세로모드로 적용하는 경우가 많고 아니면 orientation을 따로 사용하지않고 새로운 기준점을 더 추가 해주는 방식 사용

내가 만든 미디어쿼리 스마트폰 환경에서 제대로 나오는지 확인방법

구글 페이지검사에서 지원

미디어쿼리 코드확인법

그냥 확인하면 찾을 수가 없다, 모바일버전처럼 줄였을때 보임

실무팁

웹사이트 작업시 모바일버전에 맞는 텍스트정보를 제공해야할 경우가 있고 pc버전에 맞는 텍스트정보를 제공해야하는 경우도 있다.

pc 접속시 모바일영역 글씨는 보여주면 안됨, 반대로 모바일 접속시 pc버전의 코드는 사용자에게 노출시켜서는 안됨
<h1 class="pc">PC Hello World</h1>
<h1 class="mobile">Mobile Hello World</h1>
.pc {
    color:  red;
    font-size:  50px;
    background-color:   pink;
}

display 속성 사용하면됨

display가 inline, block 요소 성격을 바꿀때 사용했었음
근데 사전적의미는 전시하다, 보여주다라는 의미
.pc {
    display: none;
}

display를 활용한 미디어쿼리 예제

display를 block 준이유 : 보이게 하려는 h1 태그가 block요소라서, none에서 block요소로 보이게 한다는 뜻
.mobile {
	display: none;
}
@media (min-width: 320px) and (max-width: 767px) {
    .pc {
        display: none;
    }
    .mobile {
        display: block;
    }
}

굉장히 좋은 작업은 아님, 즉 기획단계에서 pc버전과 모바일버전 양쪽 모두를 고려해서 컨텐츠를 작성하는 것이 중요

미디어쿼리 응용

반응형,적응형 웹사이트 작업을 할때 기획자나 디자이너한테 모바일버전으로 기획해달라고함. 그리고나서 태블릿, pc버전으로 조금씩 조금씩 레이아웃을 확장시켜달라고 요청 - 훨씬 더쉽게 접근가능

모바일 버전 -> 태블릿 -> pc버전 제작시 사용되는 미디어 쿼리 작성 기법

미디어쿼리 안쪽에서 작성된 코드로 pc버전 화면이 적용된걸 알 수 있다.
미디어쿼리 기준점을 잘 조절하면 안쪽의 코드로 pc버전 작업을 진행할 수 있다.
<h1>미디어쿼리 응용</h1>
h1 {
    font-size: 20px;
    background-color: yellow;
}
@media (min-width: 768px) {
    h1 {
        font-size: 40px;
        background-color: pink;
    }
}

구간 추가

minwidth 값을 더 추가해서 이전에 작성된 minwidth 값보다 더 큰 수치를 넣었으면 768px이 작성된 미디어쿼리에 maxwidth는 작성하지 않아도 1024미만의 수치를 자연스럽게 가지게 된다.
1024는 pc버전 768은 태블릿버전 미디어쿼리 바깥쪽은 모바일버전으로 css 작업가능
@media (min-width: 1024px) {
    h1 {
        font-size: 80px;
        background-color: gray;
    }
}

셸스크립트를 사용하여 Email 확인
JavaScript-30-Day-7

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage