미디어쿼리
제작한 웹사이트를 모바일, 태블릿 환경에 맞게 자연스러운 변화를 줄 때 사용하는 css 코드
https://blog.teamtreehouse.com/which-page-layout
- 반응형 웹사이트
: 브라우저 폭을 줄였을 때, 공간자체가 자연스럽게 리사이즈가 되면서 모바일 버전에 맞춰서 레이아웃 형태도 바뀌는 형태. % 단위를 주로 사용. ex) HELBAK 덴마크 쇼핑몰
- 적응형 웹사이트
: 브라우저 폭을 줄였을 때, 뚝뚝 끊겨가면서 웹사이트 구조가 바뀌는 형태.
고정값을 갖고 있는 픽셀단위를 사용해서 제작하는 기법. ex) 키즈가오
ps. 최근에는 %와 픽셀을 섞어서 제작이 대다수
모바일용 html 버전. 즉, pc용 html과 모바일용 html 이 구분되어 있다.
모바일과 pc 버전의 구조가 전혀 다른 구조로 구성될 때 제작
적응형, 반응형 웹사이트는 하나의 html 파일을 css 코드로 나눠서 pc, mobile 버전을 제작
반응형과 적응형 웹사이트를 만들 때 사용하는 미디어쿼리
피씨 연동
모바일 버전
html, body {
margin: 0;
padding: 0;
}
h1 {
margin: 0;
padding: 0;
}
.pc {
color: red;
font-size: 50px;
background-color: pink;
}
@media (min-width: 300px) and (max-width: 767px) {
.pc{
color: blue;
font-size: 20px;
background-color: yellow;
}
}
적용하고 브라우저 줄이게 되면 특정 지점에서 위와같이 변화.
미디어쿼리 안쪽에 작성된 코드를 기반으로 적용.
@media (min-width: 100px) and(max-width: 599px) {
.pc {
color: blue;
font-size: 10px;
background-color: gray; }
}
}
700 지점에서 첫 효과, 600 보다 작아진 지점에서 두번째로 설정해 놓은 미디어쿼리 디자인 적용. 최소 최대 width값으로 맞춤형 css 적용 가능. <<<< 미리어쿼리의 핵심
주의점
1) pc버전 css를 모바일 버전에서 다르게 적용해야 할때, pc버전의 코드(미디어쿼리의 바깥쪽 부분) 에서 작성된 css 코드를 매번 확인해 가면서 변경해야 한다. 그렇지 않을 경우, 미디어쿼라 바깥쪽 코드가 안쪽 코드에 상속. =미디어쿼리 안쪽 코드는 바깥쪽 코드의 상속을 받는다.
2) 미디어쿼리 사용 시 반드시 넣어야 하는 메타태그
<meta name="viewport" content="width=device-width, initial-scale=1.0">
viewport: 웹사이트에 접속하는 데 사용되는 기기화면 ex. 스마트폰, 태블릿
width=device-width : device의 width값으로 적용 시키겠다.
initial-scale=1.0 : 비율은 항상 1.0으로 유지하겠다.
3) 모든 디바이스기기의 크기에 맞춰서 적용하고자 할때 or 디바이스 크기의 width 값 알고 싶을 때
- 스마트폰 화면 확인하기
1) dothome 서버에 올려서 도메인으로 들어가기: 실제 가지고있는 디바이스만 테스트가능
2) 크롬 브라우저 내 검사도구
elements 클릭
index.html의 모바일버전 크기 확인 가능
add customs
참고사이트
응용
<h1>미디어쿼리 응용</h1>
</body>
</html>
h1 {
font-size: 20px;
background-color: yellow;
}
미디어쿼리 안쪽 코드로 적용
768에서 변화 확인
화면을 줄여보면 768px 보다 작아졌을때 첫번째 효과 적용
미디어쿼리는 보이지 않게 됨.
min-width 값 사용시,
피씨버전
모바일버전
July, 9
모바일에서 접속하는 경우 불편함을 많이 느꼈던 경험이 있는데 어떤 기능을 적용해야 하는지,
용량에도 신경을 써야 하겠다는 점을 생각해봤다. 한 html에서도 모바일과 pc를 적용할 수 있다는 점에서 흥미롭다.
