[개발일지9일차]미디어쿼리

1.학습내용

미디어쿼리?

내가 제작한 웹사이트를 모바일, 태블릿 환경에 맞게 자연스러운 변화를 줄 때 사용되는 css코드
반응형/적응형 웹사이트를 만들 때 사용된다.
(treehouse layout에서 반응형,적응형 차이 참고)
반응형 웹사이트 :
%단위 사용
자연스러운 resize, 형태변형
적응형 웹사이트 :
고정값을 갖고 있는 픽셀에 맞춰 제작하는 기법
고정값에 닿으면 툭툭 끊기면서 공간 재배열

최근에는 둘이 섞어서 제작하기도,
혹은 m.naver처럼 모바일버전 웹페이지를 따로 제작하기도 한다.

미디어쿼리의 설정법

min-width() and max-width()를 설정함으로써 기기에 따른 맞춤형 css설정 가능.
반드시 넣어야 할 html meta태그 존재

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

viewport: 웹사이트 접속에 사용되는 기기 화면 (스마트폰 화면, 태블릿 화면, 모니터)

width=device-width : 웹사이트 width값은 디바이스 width값으로 적용시키겠다.

initial-scale=1.0:비율은 항상 1.0으로 유지하겠다.

기기의 width
= 사용자가 웹사이트 접속 시, 어떤 기기로 접속했는지 아는 직관적 방법
320px ~ 768px 미만 :스마트폰
768px ~ 1024px : 태블릿
1024px 이상 :pc
모든 기기 화면 크기 알고싶을 때.
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
or 웹페이지에서 미디어쿼리 확인하는 법
or

미디어쿼리 주의점

pc버전 css를 모바일버전 css에서 다르게 설정할 경우,
미디어쿼리 바깥에서 작성된 pc css쿼리를 매번 확인하면서 변경해야한다.
왜?
바깥 css가 미디어쿼리에도 상속되기 때문에.
미디어쿼리에는 배경색이 없지만 .pc css배경이 그대로 출력

이 과정이 번거롭다면 아예 pc버전 모바일버전 따로 만드는 방법도 있다.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	
	<meat name="viewport" content="width=device-width initial-scale=1.0">

	<link rel="stylesheet" type="text/css" href="css/style.css">
<body>
	<h1 class="pc">PC Hello World</h1>
</body>
</html>

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

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

미디어쿼리 연속적으로 사용하면 max-width사용하지 않아도 다음 미디어쿼리 최소 넓이=최대 넓이

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

(모바일)
h1 {
	font-size: 20px;
	background-color: yellow;
}

(태블릿)
@media (min-width: 768px) {

	h1 {
		font-size: 40px;
		background-color: pink;
	}
}

(pc버전)
@media (min-width: 1024px) {
	h1 {
		font-size: 80px;
		background-color: gray;
	}
}

실무TIP!
html파일에 pc버전 텍스트와 mobile버전 텍스트가 있을 때, 각 기기마다 버전에 맞지 않은 글씨는 나오면 안된다.
이를 해결하는 방법은? display사용

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

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


.mobile {
	display: none;
(pc버전일때는 mobile글씨 안나오게)
}

@media (min-width: 300px) and (max-width: 767px) {
	.pc {
		display: none;
(모바일버전일 때는 pc글씨 안나오게)
		color: blue;
		font-size: 20px;
		background-color: yellow;
	}

	.mobile {
		display: block;
(모바일버전 글씨 display:none;해제)        
(none이 아닌 inline을 넣어도 처리 가능.
그러나 기존 html속성과 같은 속성 적는게 좋음.
h1태그는 block요소니까 그대로 처리.)
		
	}
}

한 html에 비슷한 의미를 담은 글자정보가 2개 있는 건 좋지 않음.
기획단계에서 pc버전 모바일버전을 모두 고려해서 작성하는 게 중요하다.

2.어려운 내용 or 기억할 내용

미디어쿼리 meta기억하기

3.해결방법

4.학습소감

여러 css요소를 많이 알게 됐다. 하나 둘 씩 css요소가 더해질 때마다 신기했다. 오늘 여러 기기버전에 맞춘 변화까지 배우고나니 점점 더 내가 아는 웹페이지 모습에 다가갈 수 있었다.

Author And Source

이 문제에 관하여([개발일지9일차]미디어쿼리), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@youjeongchoi0730/개발일지9일차미디어쿼리

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