1) 학습한 내용
오늘은 미디어쿼리에 대해서 알아보았다.
1. 미디어쿼리
-html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>미디어 쿼리</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<!-- treehouse layout static responsive
https://blog.teamtreehouse.com/which-page-layout -->
<!-- <h1 class="pc">PC Hello world</h1>
<h1 class="mobile">Mobile Hello</h1> -->
<!-- <h1>미디어쿼리 응용</h1> -->
</body>
</html>먼저, width값에 따른 브라우저의 변화를 볼 수 있는 사이트로 어떻게 변화가 되는 지
알아보았다.
treehouse layout static responsive
처음에 배울때 나왔던 내용으로
정적(static),동적(liquid),적응형(adoptive),반응형(responsive)이 있다.
오늘은 적응형,반응형 레이아웃 구조를 이용한다.
또, 미디어 쿼리를 이용을 할때는
html에서 디폴드값으로 꼭 들어가야하는 meta태그가 있다.
'<meta name="viewport(웹사이트 접속시 사용되는 기기화면)"
content="width=device-width(접속된 화면은 디바이스의 width값으로 적용겠다,
initial-scale=1.0(비율은 1.0을 유지 하겠다)" '
2. 미디어쿼리 css와 사용시 주의점, display를 이용한 모바일과pc버전 글
-css
html,body, h1 {
margin: 0;
padding: 0;
}
/*.pc {
color: red;
font-size: 50px;
background-color: pink;
}
.mobile {
display: none;
}
@media (min-width: 320px) and (max-width: 767px) {
.pc {
display: none;
color: blue;
font-size: 20px;
background-color: yellow;
}
.mobile {
display: block;
}
}
*/
/*display를 이용하여
mobile과 pc 버전에서 따로 쓰는 글 을 나타낼수있다.*/
/*@media (min-width: 320px) 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: 100px;
background-color: gray;
}
}*/
/*min 이하의 사이즈가되면 그전에 설정값으로 돌아간다.
또 검사에서 미디어 쿼리 코드를 확인하고 싶을때는 그사이즈가 되었을때만 css에 코드가 보인다.
*/
/*
미디어쿼리 : width 값의 크기를 기준으로 어떤 분기점을 설정 할때 사용되는 것
최소 위드값과 최대 위드 값을 설정하느것으로 각각 pc와 모바일 버전을 설정할 수 있다.
*사용자가어떤것으로 접속했는지 알수있는 가장 직관적인 방법
-사용자가 접속한 width 값으로 파악
-320px ~ 768px 미만 : 스마트폰
-768px ~ 1024px 미만 : 태블릿
-1024px 이상 : PC
사용시 주의점
1.미디어쿼리 안쪽은 바깥쪽의 상속을 받는다
- pc버전의 css 코드를 매번 확인해 가면서 변경을 해야한다.
2.미디어쿼리 사용시 반드시 메타 태그를 넣어줘야한다.
-<meta name="viewport(웹사이트 접속시 사용되는 기기화면)"
content="width=device-width(접속된 화면은 디바이스의 width값으로 적용겠다,
initial-scale=1.0(비율은 1.0을 유지 하겠다)" >
!참고
viewport - https://www.w3schools.com/css/css_rwd_viewport.asp
기기별 크기 -
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
3. 크롬 내가만든 웹브라우저 검사에서 toggle device toolbar 를 이용해 여러 기기버전 확인 가능
*/참고 사이트
viewport
https://www.w3schools.com/css/css_rwd_viewport.asp
기기별 크기
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
( width의 크기에 따라 나타나는 글자와 배경의색이 달라지는 것을 볼 수 있다.)
(display:none; 의 사용으로 모바일과 pc 버전에서 볼 수 있는 글이 다름을 알 수 있고,
크롬 검사에서 여러기기로 검사 방법을 알 수 있다.)
3.미디어쿼리 응용
-css
/*일반적으로 mobile - tablet - pc 버전 순으로 제작이 되는 경우가 많다. */
/*h1 {
font-size: 20px;
background-color: yellow;
}*/
/*미디어 쿼리를 이렇게 연속적으로 사용할 경우
자연스레 max-width는 1024px 미만이 된다.*/
/*@media (min-width: 768px) {
h1 {
font-size: 40px;
background-color: pink;
}
}
@media (min-width: 1024px) {
h1 {
font-size: 80px;
background-color: gray;
}
}
*/
간단한 모바일 버전을 제작을 해서 점점 복잡한 pc 버전으로 확장을 해나가는 것이 일반적이다.
but 보통 기간이 넉넉하지 않을때는 이렇게 하지못하는 경우도 많다.
2) 학습내용 중 어려웠던 점 및 해결방법
오늘은 미디어 쿼리에 대해서 알아보았다. 여러 기기마다 화면크기가 다르기 때문에 거기에 맞는 브라우저 크기를 정하고, 그크기에 맞게 가독성이 좋게 나타날 수 있도록 해준다.
여기서 크게 어려웠던 점은 없었지만, 미디어쿼리 밖에서 어떤 버전에서 시작했는지, 또 사용하면서 주의사항을 잘 지키고 있는지를 계속 확인해가면서 해야하는것이 조금 번거로울 것 같다.
특히나 안쪽영역이 바깥쪽 영역에 의해 상속이 되었는지 계속 확인을 해가면서 작업을 해야한다는 주의점이 있다.
3) 학습소감
오늘은 모바일, 태블릿 버전 등 의 pc 외에 다양한 크기의 웹브라우저에도 서로 응용 할 수 있도록 하는 방법을 알아보았다.
다양한 기기들이 발전하므로써 css 와같은 코드들도 점점 발전을 하는 것같았다.
생각해보면 옛날에는 모바일 버전이 없어 핸드폰으로 웹브라우저를 볼때도 pc와 같은 화면창이 나오고 작은화면에 더작은 글자들로 봤어야했었다.
그러나 어느순간부터 모바일버전으로 보았던 것같다.
이렇게 기기들이 우리의 삶에 자리를 잡으면서 이런 코드들도 나타나기 시작한것같다.
그래서 생각이 든것이 앞으로도 더 다양한 것들이 만들어 질텐데, 정말 공부는 끝이 없겠다는 생각이 들었다.
그래도 우리가 보고있는 모바일 버전 등을 내가 직접 만들어 볼 수 있다는 것이 신기하고 재밌었다.
