💻 학습내용

💛미디어 쿼리

• 반응형 적응형 웹사이트를 만들 때 사용
• 모바일, 태블릿 환경에 맞게 자연스러운 변화를 줄 때 사용되는 css코드

적응형 : 뚝뚝 끊겨감 고정값 픽셀을 가지고 만드는거
반응형: %를 활용해서 만들어감 , 자연스러운 resize
-> 하나의 html코드를 가지고 css만 나눠서 사용

➕ width 크기
320px ~ 768px 미만 : 스마트폰
768px-1024px 미만 : 태블릿
1024px 이상 : Pc

디바이스 width 화면 크기

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

▶︎ 우리가 지정한 범위가 되면 변경된 사항을 실행시킨다

💛 미디어 쿼리 주의점

1. pc버전의 css를 모바일 버전에서 다르게 적용해야 되면 미디어 쿼리 바깥쪽에서 작성된 코드를 매번 확인해주면서 변경을 해줘야함

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

Viewport : 기기의 화면 웹사이트의 width값은 기기의 width크기로 지정, 비율은 1.0으로 한다

➕ 주의해야할 점

• 스마트폰 사용시 가로모드 세로모드가 들어가 있는데 Portrait는 사용자가 세로로 들었을 때 화면 자체
  landscape는 가로로 들었을 때 화면 크기

• 크롬의 개발자 도구 에서 미리 확인해볼 수 있다.

• 브라우저를 늘렸다 줄였다 하면서 미디어 쿼리 코드를 확인해 주어야한다.

💛실무팁

• pc버전, mobile버전의 코드들은 다른 상황에서는 보여지면 안된다.
  이럴 때 사용 할 수 있는게 display

@media (min-width: 320px) and (max-width: 767px){
	.pc{
		display: none;
}
	.mobile{
		display: block;
	}
}

• display: none; ▶︎ 안보이게 하는거
• 최초 제작을 할 때는 모바일 버전에 맞춰서 제작하는게 좀 더 쉽다.
  왜냐하면 모바일은 중앙 정렬이 대부분이고 간결하기 때문에, 모바일로 먼저 제작한 다음에 태블릿, pc 버전으로 확장 해나가는게 일반적이다.

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

➡️ @medai 밖에 모바일 버전 css 태그를 입력하고 ,첫 번째 media 에 태블릿 그 다음 pc버전을 입력하는 순서

📝 마무리

오늘은 미디어 쿼리를 활용하여 브라우저의 크기를 키우거나 줄이는 것에 따라 브라우저의 레이아웃들을 변형 시키는 방법에 대해 배웠습니다.
각 기기마다 설정된 width값이 있다는 사실도 알았습니다. 크롬 웹을 이용하면 내가 만든 사이트를 모바일, 태블릿 등 값을 수정하여 미리보기로 확인할 수 있습니다.
어려운 부분은 없었고 오늘도 많이 배웠습니다.