개발일지 210709

이동섭·2021년 7월 9일

대구AI스쿨 미디어쿼리기초

대구AI스쿨 개발일지

목록 보기

10/48

10일차 요약

학습 내용

실습 내용 / 결과물 출력 첨부

미디어쿼리

: 반응형 웹디자인의 핵심으로 웹페이지가 조건에 따라 다른 결과물을 출력하도록 하는 CSS 스타일 모듈이다.

단말기의 유형
특성이나 수치(화면 해상도, 뷰포트)

와 같은 조건에 따라 반응하게 된다.

뷰포트란?

컴퓨터 그래픽에서, 뷰포트(viewport)는 현재 화면에 보여지고 있는 다각형(보통 직사각형)의 영역입니다. 웹 브라우저에서는 현재 창에서 문서를 볼 수 있는 부분(전체화면이라면 화면 전체)을 말합니다. 뷰포트 바깥의 콘텐츠는 스크롤 하기 전엔 보이지 않습니다.

뷰포트 중에서도 지금 볼 수 있는 부분을 시각적 뷰포트 (en-US)라고 부릅니다. 스마트폰에서 사용자가 화면을 확대했을 때와 같은 특정 상황에서 레이아웃 뷰포트 (en-US)의 크기는 변하지 않지만 시각적 뷰포트는 더 작아집니다.

미디어쿼리의 특성

아래 메타태그와 함께 사용한다

<meta name="viewport" content="width=device-width, initial-scale=1.0">
이 위의 뷰포트 용어 설명에서 추론할 수 있듯 출력 결과를 디바이스의 폭과 1:1로 스케일링 한다는 의미이다.

선택자에 대한 특정 구간을 조건으로 지정하며 그 방식은 아래와 같다

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

@media 즉, 미디어쿼리 아래의 선택자는 미디어쿼리로 감싸기 전 기존 선택자의 속성값을 상속받는다.

.pc {
	color: red;
	font-size: 50px;
	background-color: pink;
}
@media (min-width: 600px) and (max-width: 767px) {
	.pc {
		color: blue;
		font-size: 20px;
	}
}
이 경우 600px이상 767px이하 구간에서도 빨간색으로 배경색이 지정되게 된다.

width값에 따른 분류

일반적인 분류는 아래와 같다

스마트폰 : 320~768px 미만
태블릿pc : 768~1024px 미만
노트북,데스크탑 : 1024px ~

일반적으로 사용되는 대부분의 디바이스에 대한 정확한 뷰포트를 알고 싶다면 아래 페이지를 참조하면 된다

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
검색어 : media query for standard devices

결과물의 확인

가장 정확한 방법은 제작한 웹사이트를 서버에 올려 모든 디바이스로 확인하는 방법이나 현실적으로 어렵다.
브라우저가 제공하는 기능 활용(크롬)

검사 기능에서 표시한 버튼을 통해 다양한 디바이스를 기준으로 미디어쿼리의 작동 여부를 검사할 수 있다.

또한, 추가적인 디바이스를 바로가기 리스트에 등록하거나 커스텀 디바이스를 만들수도 있다.

반대로 요소 검사에서 미디어쿼리가 사용되었는지 알기 위해서는 해당 조건을 충족한 상태여야 한다.

위와 같이 미디어쿼리가 적용되고 기존 선택자의 속성에 취소선이 그어진 것을 볼 수 있다. (cascading의 적용)

display:none;을 활용한 예제

html
<body>
	<h1 class="pc">pc hello world</h1>
	<h1 class="mobile">mobile hello world</h1>
</body>
CSS
.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;
	}
}
미디어쿼리 영역 밖에서 .mobile 선택자의 display 속성값을 none으로 감추고 반대로 영역 안에서 .pc선택자의 display를 none으로, .mobile의 display를 block로 지정해 출력시킴

실무에서의 미디어쿼리 적용

일반적으로 뷰포트가 작고, 따라서 인터페이스가 비교적 단순한 모바일 버전을 먼저 제작한 후 테블릿, pc에 맞게 확장해나가는 방식으로 미디어쿼리를 적용시키는 경우가 많다.

html
<h1>미디어쿼리 응용</h1>
CSS
h1 {
	font-size: 20px;
	background-color: yellow;
}
@media (min-width: 768px) {
	h1 {
		font-size: 40px;
		background-color: pink;
	}
}
@media (min-width: 1024px) {
	h1 {
		font-size: 80px;
		background-color: gray;
	}
}
위와 같이 CSS를 작성하면 코드를 입력하지는 않았지만 사실상 max-width의 값이 1024px 미만이 된다. 이 경우 코드 작성 분량이 적어지는 장점이 있다. 작업 효율의 상승.

cascading 된 모습을 확인할 수 있음