1. 학습내용

• 미디어쿼리
  모바일, 테블릿, PC등의 미디어 타입을 구분하여 그 특성에 따라 화면의 크기를 달리하여 보여 줄 수 있다.

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

  코드를 작성하기에 앞서 위의 meta 태그를 하나 추가해준다. 해당 태그는 웹페이지에 크기 및 크기 조정을 제어하는 방법을 제공한다.

• 미디어쿼리 기초예제

index.html

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

style.css

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

width값이 767px 이상일 경우

width값이 300px~767px 미만일 경우

width값이 100px~599px 미만일 경우

이처럼 미디어쿼리를 통해 자신이 지정한 범위에 따라 스타일 속성을 바꿀 수 있다.

• 미디어쿼리 사용시 주의할 점
  미디어쿼리 바깥쪽 속성값이 안쪽값으로 상속된다. 그래서 항상 작업할 때 주의해야한다.

index.html

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

style.css

.pc {
	color: red;
	font-size: 50px;
	background-color: pink;
}
@media (min-width: 320px) and (max-width: 767px) {
	.pc {
		color: blue;
		font-size: 20px;
		/*background-color: yellow;*/
	}
}

위의 예시처럼 크기가 변하면서 미디어쿼리의 바깥쪽 속성값을 안쪽값이 그대로 상속하게 된다

• 유용한 사이트
  미디어쿼리 스탠다드 디바이스
  w3school - 뷰포트
  awwwards - 웹사이트 참고

• 미디어쿼리 실무팁

index.html

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

style.css

.pc {	
	color: red;
	font-size: 50px;
	background-color: pink;
}
.mobile {
	display: none;
}
@media (min-width: 320px) and (max-width: 720px) {
	.pc {
		display: none; 
	}
	.mobile {
		display: block;
	}
}

PC

Mobile

display:none 을 사용하여 쉽게 구분 할 수 있다.

index.html

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

style.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 미만

768px ~ 1024px 미만

1024px 이상

위처럼 min-width값만 사용하여 구분할 수 있다.

2. 학습한 내용 중 어려웠던 점 또는 해결못한 것들

다양한 미디어 타입에 맞춰 작업을 진행해야하는 점에서 어려움을 느꼈다. 또한 크기에 대한 지정범위를 설정하는 부분도 어렵게 느꼈다.

3. 해결방법 작성

유용한 사이트들을 참고하여 해결해야 할 것 같다.

4. 학습 소감

다양한 미디어 타입이 존재하기 때문에 미디어쿼리가 필수라는 것을 학습을 통해 알 수 있었다. 이를 통해 미디어쿼리의 중요성을 알게 된 것 같다.