⏺학습한 내용🕵️‍♂️

⭕ CSS (media query) 강의내용

✅ website 특성

🔘 적응형 web

> 뚝뚝 끊겨 공간의 크기가 바뀜. pc/모바일 별 고정된 픽셀 값을 가짐

🔘 반응형 web

> 주로 % 값을 넣기 때문에 형태별로 자연스럽게 resize됨

☑ layout 특성 별 화면 조작 확인

---

✅ media query

🔷 제작한 웹 사이트를 각 기기의 환경에 맞게 변화를 주는 code

⭕ pc / mobile code를 다르게 적용해야 한다.

media 쿼리 바깥쪽의 코드를 안쪽에서도 영향을 받기때문에 따로 만들거나 수시확인해줘야함.

( 편하게 css 파일을 분할해서 만드는 방법도 있음 )

⭕ media query 를 사용할 때 꼭 써야하는 meta tag

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

1. viewpoint => 웹 사이트를 사용하는 기기의 화면을 의미

2. width 값은 디바이스의 width값으로 적용하겠다, 비율은 1.0으로 유지하겠다.

viewport 적용 전/후 비교가능
기기별로 적용 width 값 확인가능

⭕ T I P !!

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

media query 와 display를 결합하면 원하는 기기에 원하는 정보를 표현할 수 있다.

---

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
}
=====> portrait - 스마트폰을 세로로 들었을 때의 화면

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
}
=====> landscape - 스마트폰을 가로로 들었을 때의 화면

---

1. 기기별 layout 화면변화를 볼 수 있다.

2. media query 화면 확인 가능

⏺학습내용 중 어려웠던 점🤦‍♂️

🔘 호환작업이 어려울 줄 알았는데 생각보다 어렵진 않고 다만 꼼꼼해야 되는 부분인 것 같다. 여태 내용은 다른 자료를 참고하면서 응용하는 내용이었다면 이번엔 자료를 참고해서 꼭 맞춰서 넣어줘야 하는 그런 느낌,,

⏺해결방법🙋‍♂️

🔘 다른 기기들이 없어서 직접 확인 못해봤지만 테스트 사이트에서 간단한 확인작업들을 해봤다.

⏺학습소감🙇‍♂️

🔘 오늘도 뭔가 쉬운 듯 복잡한 듯 오묘한 느낌이다,, 감 잃지 않게 화이팅!