210709 개발일지

juyoungkim·2021년 7월 9일

1) 학습한 내용

미디어쿼리

미디어쿼리
: 모바일, 웹으로 볼때 자연스럽게 바꿔주는 css코드

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

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: 320px) and (max-width: 767px) 
	.pc 	{color: blue;
		font-size: 20px;
		/*background-color: yellow;}*/

/*
@media (min-width: 100px) and (max-width: 559px) 
	.pc 	{color: green;
		font-size: 10px;
		background-color: gray;}
*/

⬇️ 미디어 쿼리 사용시 항상 넣어야함

<meta name="viewport" content="width=device-width, initial-sacle=1.0">

참고사이트

https://www.w3schools.com/css/css_rwd_viewport.asp
w3schhols.com

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
css-trick

실무팁

display 속성과 미디어쿼리 결합 pc,mobile 맞춤형 보이는 기능

<h1 class="mobile">Mobile Hello World</h1>

.pc 	{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;}}

미디어쿼리 응용

모바일 제작 후 태블릿,pc 제작하는 미디어쿼리 기법 (ex.heabak)
-> 장점 : 코드분량이 줄어듬

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

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