모바일 고려 + 광고 테스트

 핸드폰과 태블렛으로 체크하면서 모바일 화면에 최적화 된 레이아웃 구성을 노렸는데 

순간 궁금해서 찾아본 모바일 쿼리의 결과 PC 화면과 모바일 화면을 구분하여 블로그 body 컨텐츠를 구분해서 표시하는게 좋겠다는 생각이 들었다. 

 

블로그 글 작성을 하나하나 하는것이면 이것은 미친짓이지만 어차피 틀 구성만 세우고 돌려먹기할건데 초기 셋업만 할 것이면 상관없다는 생각이 들었다. 

 

해당 문서는 다음과 같다.

 

https://www.google.com/search?q=%40media+queries&sourceid=chrome&ie=UTF-8 

 

https://www.w3schools.com/cssref/css3_pr_mediaquery.asp https://www.w3schools.com/cssref/css3_pr_mediaquery.asp https://www.google.com/search?q=%40media+javascript&oq=%40media+java&aqs=chrome.0.0i512j69i57j0i22i30l2j0i15i22i30j0i22i30l5.9230j0j4&sourceid=chrome&ie=UTF-8

https://www.w3schools.com/howto/howto_js_media_queries.asp

https://ishadeed.com/article/styling-the-good-old-button/

css는 다음과 같다.

 

@media only screen and (max-width: 600px) {

body {

}

}

 

 

골뱅이 @는 영어로 at이라고 부르며 css에서는 at rule이라고 하는 룰셋을 작성하는데 쓰인다

@media는 미디아 관련 룰셋 only는 일치? 스크린은 스크린이고 max-width: 600px이란 말은 최대 길이가 600 이내인 모든 디바이스에 이 룰셋을 적용하라는 말이다. 즉 다시 말해서 

 

max-width: 600px 는 최대크기가 600 이하인 브라우져에 모조리

min-width: 600px 는 최소크기가 600 이상인 브라우져에 모조리 

 

적용하라는 말이다. 이는 스크린이나 기타 크기가 아닌 유저가 현재 보고있는 브라우져가 제한하는 페이지의 크기라는것에 유의해야 한다. 창 크기 줄이면 적용된다.

 

 

자바스크립트로 들어가면

 

<script>

function myFunction(x) {

if (x.matches) { // If media query matches

document.body.style.backgroundColor = "yellow";

} else {

document.body.style.backgroundColor = "pink";

}

}



var x = window.matchMedia("(max-width: 700px)")

myFunction(x) // Call listener function at run time

x.addListener(myFunction) // Attach listener function on state changes

</script>

 

 

가 된다.