1)학습내용

미디어쿼리

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="ftp-8">
    <link rel="stylesheet" type="text/css" href="css/style.css"
</head>
<body>

   
</body>
</html>

CSS

body {
	background-color: yellow;
}

반복적인 기본양식, 연결이 잘 되어있는지 확인

<!DOCTYPE html>
<html>
<head>
    <meta charset="ftp-8">
    <link rel="stylesheet" type="text/css" href="css/style.css"
</head>
<body>

		<meta name="viewport" content="width=divice-width, initial-scale=1.0">


	<h1 class="pc">PC Hellow World</h1>

</body>
</html>

CSS

body {
	background-color: yellow;
}

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;
    }
}
*/

@media (min-width: 600px) and (max-width: 767px) {
	.pc {
    	color: green;
    	font-size: 20px;
    	background-color: yellow;
    }
}

320px~768px미만 : 스마트폰
768px~1024px미만 : 태블릿
1024px 이상 ~ : PC

사용자가 접속한 기기의 값을 기준으로 어떤 기기인지 알아냄
미디어 쿼리로 알아냄
브라우저 폭 미디어 쿼리 안쪽에서 적용, 기준점에서 크기가 변경되면서 바뀜
PC버전, 모바일 버전 으로 변경

*** 미디어쿼리 사용할 때, pc버전의 코드(미디어쿼리 밖에서 코드 확인하면서) 모바일 변경할 때, 밖의 코드는 안쪽 코드에 상속이 그대로 되므로 조심 (아예 다르게 할 수도 있음)

*** 반드시 넣어야 하는 메타태그가 있음

HTML

	<meta name="viewport" content="width=divice-width, initial-scale=1.0">

기기의 화면, 접속된 기기 웹사이트의 가로 적용된 기기에 맞춤, 비율은 항상 1.0을 유지하겠다
w3school.com 의 viewport 사용자가 보는 기기에 맞게 자동으로 맞춰줌
css-tricks.com 에서 기기에 맞는 width확인가능하나 어려우면 min-width 와 max-width만 확인해도 무방
awwwards.com 미디어쿼리 사용하여 모바일 버전까지 활용, 우클릭 검사, 브라우저폭 줄였을 때 버전변경

PC버전 모바일버전

HTML


	<h1 class="pc">PC Hello World</h1>
    <h1 class="mobile Hellow Wolrd"></h1>

CSS

.pc {
	display: none; ---> PC의 클래스가 css로 볼 때는 사라짐, 내가 원하는 정보를 기기에 맞춰 보여줄 수 있음

	color: red;
    font-size: 50px
    background-color: pink;
}

.mobile {
	display: none;
    
}

@media (min-width: 320px) and (max-width: 767px) {
	.pc {
    	display: none;
    }
    
    .mobile {
    	display: block; ---> h1 태크 블록요소, 인라인으로 바꿔도 괜찮음, 감춰줬던 영역이 나타남. 기존의 속성과 같은 것이 좋음.
    }
}

각 기기에 맞는 전용 텍스트를 보여줄 필요가 있음

보통은 모바일부터 만들고 웹페이지로 넘어간다

중앙정렬이고 나타나는 정보도 적음(개발 기간이 짧음)
helbak.com 모바일 부터 만들어졌었음

HTML

<h1>미디어쿼리 응용</h1>

CSS

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;
    }
}

768px 이상부터는 PC로 바꿔라
노랑은 작아졌을 때 노랑이 적용되고 아래쪽 미디어 쿼리는 숨겨짐
코드 분량이 줄어들어 좋음

2)어려운점

미디어쿼리에 대한 밖과 안의 개념, 약간씩 헷갈림

3)해결방법

class 상송에 관한 부분이 헷갈려서 그런 것 같음
반복할 것

4)학습소감

모바일페이지에서 자연스럽게 PC버전으로 변화하는 것이 굉장히 흥미로움
생각보다 할 수 있는 부분이 많아서 신기함

Author And Source

이 문제에 관하여([dg_ai_school] 웹프로그래밍 10), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@chaehwan_lee/dgaischool-web-10

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

[dg_ai_school] 웹프로그래밍 10

1)학습내용

미디어쿼리

PC버전 모바일버전

보통은 모바일부터 만들고 웹페이지로 넘어간다

2)어려운점

3)해결방법

4)학습소감

Author And Source

좋은 웹페이지 즐겨찾기