2021.07.09 미디어쿼리
🚀 미디어쿼리
🌟🚀
✔ 반응형 적응형 웹사이트를 제작할때, 내가 제작한 웹사이트를
모바일 태블릿환경으로 자연스러운 변화를 줄때 사용하는 css속성
https://blog.teamtreehouse.com/which-page-layout
📌 반응형 웹사이트
✔ 브라우저를 줄였을때 공간자체가 자연스럽게 re-size되면서 모바일 버전으로 형태가 바뀌는 것
✔ %단위를 사용해서 제작
📌 적응형 웹사이트
http://sisikiller.dothome.co.kr/
✔ 브라우저를 줄였을때 뚝뚝끊겨 가면서 웹사이트의 형태가 바뀌는 것
✔ 고정값을 가지고 있는 픽셀단위를 사용해서 제작
최근에는 반응형과 적응형을 섞어 제작하는 추세
❔ 모바일 버전을따로 제작하는 이유?
👉 pc버전과 모바일 버전의 layout이 완전히 다를 경우 제작한다.
.pc {
color: red;
font-size: 50px;
background-color: pink;
}
✔ @media ( ) and () 기준점 만들어주기
👉 media ( ) and ( )
사용자가 모바일 접속인지 pc접속인지 알수있는 방법
width값의 크기를 기준으로 분기점 설정할때 사용되는 코드
스마트폰 : 320px~768px미만
태블릿 : 768px~1024px 미만
pc : 1024px이상
👉 @media (min-width: 600px) and (max-width: 767px) {
👉 .pc {
color: blue;
font-size: 20px;
/*background-color: yellow;*/
}
브라우저 폭을 줄였을때 내가 만든 미디어쿼리 기준점에 도달하면 pc에서 css는 미디어 쿼리 안쪽에 작성한 코드를 기반으로 적용
또 다른 미디어 쿼리(ex : 600이하에서 효과 적용하고싶다) 를 적용할때는 한번더 적어주기
👉 @media (min-width: 100px) and (max-width: 599px) {
.pc {
color: green;
font-size: 10px;
background-color: grya;
}
}📌 핵심기능
💡 min width값과 max width값을 설정하는 것으로 pc 버전과 태블릿 버전에 대한 맞춤형 css작업가능
📌 주의
1. 미디어쿼리 바깥쪽에 있는 코드를 미디어 쿼리는 상속받기 때문에 확인작업 필수
👉 pc버전, 모바일버전 따로만들기도 함
2.미디어쿼리를 사용할때 반드시 넣어줘야하는 매타 태그
html에서 head 태그 안에
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8">
viewport : 웹사이트에 접속하는데 사용되는 기기화면
width=device-width : 접속된 웹사이트 width값은 device width로 적용하고,
initial-scale=1.0 : width=device-width : 화면비율은 항상1.0 을 유지하겠다.💡참고
https://www.w3schools.com/css/css_rwd_viewport.asp
❔ viewport를 사용하는 이유
👉사용자가 웹사이트에 접속했을때 사이트의 크기를 사용자의 디바이스 비율에 맞게 scale up해줌
3. 스마트폰 기종별 코드 확인가능
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
스마트폰에 적용가능한 코드나와있음
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait)
screen : 사용자가 접속하는 디바이스의 화면 자체
@media screen을 print로 작성하는 겨웅도 있는데 이때는 사용자가 A4용지로 출력해야 할때 print와 관련된 결과물을 미디어 쿼리로 조절가능
orientation: portait (세로모드) / landscape(가로모드)4. 내가 만든 미디어쿼리가 실제 잘출력되는지 확인 필수
dot.home사이트에 서버올려서확인하는 방법
내가 만든 웹사이트 구글크롬으로 개발자도구로 모바일버전으로 확인
📌 display none
pc에서는 pc코드문자만 출력하고, 모바일에서는 모바일코드문자만 출력할때 사용하는 코드
.pc {
display: none;
color: red;
font-size: 50px;
background-color: pink;
}
html코드상으로는 존재하지만, css에서는 display none처리되어 보이지 않음
🌟 display none을 활용한 예제
html✍
<body>
<h1 class="pc">PC Hellow World</h1>
<h1 class="mobile">Mobile Hello world</h1>
css✍
.mobile {
👉 display: none;
}
@media (min-width: 320px) and (max-width: 767px) {
.pc {
👉 display: none;
}
.mobile {
💡h1태그가 블락요소의 특징을 갖고있으니깐 block 속성값으로하기
display: block;
}
}🌟 미디어쿼리 응용
✔ 모바일버전 -> 태블릿 -> pc버전 순으로 제작할때 사용하는 미디어 쿼리 작성법
🌟 코드분량이 줄어들게 되는 장점이 있다.
html ✍
<body>
<h1>미디어쿼리 응용</h1>
css ✍
✔ 모바일 버전
h1 {
font-size: 20px;
background-color: yellow;
}
✔ 태블릿 버전
@media (min-width: 768px) {
h1 {
font-size: 40px;
background-color: lightpink;
}
}
✔ pc 버전
@media (min-width: 1024px) {
h1 {
font-size: 80px;
background-color: gray;
}
}
💡 max-width를 사용하지 않아도 자연스럽게 1024px까지 조절가능
