6강 미디어쿼리 (처음 - 01:01:41)
학습내용
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<h1 class="pc">PC Hello World</h1>
</body>
</html>css
html, body {
margin: 0;
padding: 0;
}
h1 {
margin: 0;
padding: 0;
}
.pc {
color: red;
font-size: 50px;
background-color: pink;
}
/*
320px ~ 768px : 스마트폰
768px ~ 1024px 미만 : 태블릿
1024px 이상 ~ : PC
*/
@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: green;
font-size: 10px;
background-color: gray;
}
}사용자 접속한 기기의 값을 보고 무엇을 통해 접속했는지 알 수 있다.
320px ~ 768px : 스마트폰
768px ~ 1024px 미만 : 태블릿
1024px 이상 ~ : PC
브라우저의 크기를 줄이면 min-width와 max-width의 범위에 따라서 글자와 글자의 배경이 바뀐다.
미디어 쿼리를 사용할 때 추가해야 하는 부분
html
<meta name="viewport" content="width=device-width, initial-scale=1.0">viewport : 웹사이트에 접속하는 기기의 화면
device-width : width값은 device의 width값 사용하겠다
참고사이트 https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
orientation: portrait
orientation: landscape
portrait 세로로 들었을 때 화면(일반적)
landscape 가로로 들었을 때 화면
기종 선택을 할 때 내가 원하는 기기가 목록에 없다면 Edit 누르고 고르면 된다.
html
<h1 class="mobile">Mobile Hello World</h1>css
.mobile {
display: none;
}
@media (min-width: 320px) and (max-width: 767px) {
.pc {
display: none;
}
.mobile {
display: block;
}
}mobile 부분에서 display: none;
모바일 버전으로 접속했을 때 안보이게 하는 것
mobile 부분에서 display: block;
하면 none 처리 되었던 것들이 다시 보이게 된다.
display: inline; 도 가능
none 외에 다 가능
html
<h1>미디어쿼리 응용</h1>css
h1 {
font-size: 20px;
background-color: yellow;
}
@media (min-width: 768px) {
h1 {
font-size: 40px;
background-color: pink;
}
}
@media (min-width: 1024px) {
h1 {
font-size: 80px;
background-color: gray;
}
}자연스럽게 max-width 1024px 미만
어려웠던 점 및 해결 방법
어려웠던 부분은 없었습니다.
학습소감
평소 스마트폰을 사용하면서 pc버전에서만 확인이 가능하다고 알림창이 뜨는 경우가 있었는데 오늘 그것에 대한 궁금증이 해결되었다. 크기 범위를 직접 설정해서 각각의 기기에 맞게 한다는 것이 새로웠다.
0개의 댓글
관련 채용 정보
