반응형 작업 시 미디어쿼리 최소화 하는 방법

 

1. 미디어 쿼리

화면(screen), 티비(tv), 프린터(printer)와 같은 미디어 타입과 적어도 하나 이상의 표현식으로 구성된다. 표현식은 width, height, color와 같은 미디어 특성들을 이용하여 그 특성들의 상태에 따라 다른 스타일 시트를 적용할 수 있다. 미디어쿼리는 CSS3에 포함되어 있으며, 컨텐츠의 변경없이 주로 화면의 크기에 따라 스타일 시트를 달리하여 적절한 모양을 보여줄 수 있다.

미디어 쿼리는 1) link요소에 media 속성으로 적용하는 방법

<link rel="stylesheet" media="screen and (max-width: 768px)" href="mystyle.css" />

 

2) 스타일 시트 내에서 @media를 사용하는 방법

@media screen and (max-width: 768px) {
	body {
		background-color: lightgreen;
	}
}

미디어 타입은 스크린이고 화면의 너비가 768px이하 일 때 적용한다.

 

2. 반응형 작업시 미디어 쿼리를 최소화로 잡는 방법

1) vw,vh사용하기

 스타일 시트를 작업할 때 주로 px을 사용한다. 하지만 px은 고정단위이기 때문에 반응형 작업할 때 어려움을 느낄 때도 있다. 유동단위인 %를 사용하면 반응형 작업시에 좀 더 유연한 코드를 만들 수 있고, 유지보수에도 편리하다.

%말고도 VW(Viewport Width)나 VH(Viewport Height)도 유연한 값을 가지는데 뷰포트를 기준으로 한 단위이며 보여지는 영역에서의 사이즈를 지정하는 단위이다.

1vw=뷰포트 너비의 1%, 1vh=뷰포트 높이의 1%

 

2) em,rem 사용하기

 

em,rem역시 동적인 단위로 폰트 크기의 영향을 받는다.

1em=부모의 폰트 크기, 1rem= html의 폰트크기