반응형 CSS 만들기

이 포스트에서는 반응형 웹 페이지를 만들기 위한 CSS에 대해 서술합니다.

CSS에 미디어쿼리 기능이 있습니다. 같은 웹 페이지라도 인쇄하기 위한 레이아웃은 화면에 표시하기 위한 레이아웃과 다르게 해야 할 필요가 있고, 화면도 기기에 따라 해상도가 천차만별이기 때문에 다양한 해상도에서 레이아웃을 다르게 하기 위해 다양한 환경 조건에 따라 모양을 다르게 할 수 있는 기능을 제공합니다.

CSS에 미디어쿼리를 적용하는 방법은 다음과 같은 방법이 있습니다.

@media {not|only} 종류 [and (상세설정)] {
	...
}
<link rel="stylesheet"
      media="종류 [{and|not|only} (상세설정)]"
      href="스타일시트.css">

전자는 CSS 안에서 지정하는 방법이고, 후자는 환경에 따라 다르게 만들어진 CSS 파일을 불러오는 방법입니다.

우선, 미디어 종류는 다음과 같습니다.

all
모든 종류의 매체에 공통으로 적용하는 옵션입니다. (기본값)
print
인쇄용 페이지에 적용하는 옵션입니다.
screen
화면용 페이지에 적용하는 옵션입니다.
speech
시각장애인을 위한 스크린리더용 페이지에 적용하는 옵션입니다.

그 외에도 몇 가지 옵션이 더 있으나 현재 권장하지 않는(Deprecated) 옵션이므로 생략합니다.

또한, 종류를 지정하고 그에 따라 상세한 설정을 지정할 수도 있는데, 그 중 반응형을 만들 때 일반적으로 화면의 폭에 따라 다르게 하는 옵션이 많이 사용됩니다.

다음 CSS 코드를 봅시다.

h1  { color: #555555; }

/* Only screen (all width) */
@media only screen {
	h1              { border-bottom: 2px solid #555555; }
	body            { background-color: #ffff55; }
	.para2, .para3  { display: none; }
}

/* Wider than 480px */
@media only screen and (min-width: 481px) {
	body    { background-color: #55ff55; }
	.para2  { display: block; }
}

/* Wider than 960px */
@media only screen and (min-width: 961px) {
	body    { background-color: #55ffff; }
	.para3  { display: block; }
}

먼저 1번 줄은 h1 태그의 글자색을 어두운 회색으로 하는 코드입니다. CSS를 불러올 때 특별한 설정이 없다면 화면용과 인쇄용 페이지에 공통적으로 적용됩니다.

4번 줄부터 8번 줄까지는 @media only screen이라는 옵션이 있는 블록입니다. 이는 화면용 페이지에 한해 적용하는 코드입니다. 여기서는 h1 태그의 아래쪽에 어두운 회색의 선을 그리고 바탕색을 노랑으로, para2와 para3 클래스를 숨기는 코드입니다. 화면용으로 된 코드이므로 인쇄용에는 적용되지 않습니다. 이 예제에서는 인쇄 미리 보기를 해 보면 제목 아래의 선이 화면에만 나타나고 인쇄할 때는 나타나지 않습니다.

11번 줄부터 14번 줄까지는 @media only screen 다음에 and (min-width: 481px) 옵션이 추가로 붙어 있습니다. 이는 폭이 최소한 481px인 화면용 페이지에(즉, 폭이 481px 이상일 경우) 적용됩니다. 이 예제에서는 바탕색을 초록색으로 재지정하고 표시되지 않게 하였던 para2 클래스를 block 형태로 표시되게 재지정합니다.

17번 줄부터 20번 줄까지는 위와 같은 방법으로 폭이 최소한 961px인 화면용 페이지에(즉, 폭이 961px 이상일 경우) 적용됩니다. 이 예제에서는 바탕색을 초록색으로 재지정하고 표시되지 않게 하였던 para2 클래스를 block 형태로 표시되게 재지정합니다.

이 CSS를 HTML 문서에 실제로 적용시켜 봅시다.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<title>Responsive CSS Sample</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<style type="text/css">
			h1  { color: #555555; }
			
			/* Only screen (all width) */
			@media only screen {
				h1              { border-bottom: 2px solid #555555; }
				body            { background-color: #ffff55; }
				.para2, .para3  { display: none; }
			}
			
			/* Wider than 480px */
			@media only screen and (min-width: 481px) {
				body    { background-color: #55ff55; }
				.para2  { display: block; }
			}
			
			/* Wider than 960px */
			@media only screen and (min-width: 961px) {
				body    { background-color: #55ffff; }
				.para3  { display: block; }
			}
		</style>
	</head>
	<body>
		<h1>Responsive CSS Sample</h1>
		<p class="para1">First paragraph</p>
		<p class="para2">Second paragraph</p>
		<p class="para3">Third paragraph</p>
	</body>
</html>

(5번 줄에 강조 표시를 한 이유는 5번 줄의 코드가 페이지를 실제 화면 폭에 맞춰 표시되게 하는 메타 태그이기 때문입니다. 이를 넣지 않으면 스마트폰에서 데스크톱용 페이지로 인식하고 그에 맞추기 위해 페이지를 축소하기 때문에 반응형 CSS를 만든 의미가 없어집니다.)

이 CSS 코드에 의거한다면 위의 HTML 문서는 다음과 같이 표시될 것입니다.

  • 폭 480px 이하(스마트폰 세로화면 등): 노란 바탕색, 1번 문단만 표시
  • 폭 481px 이상 960px 이하(스마트폰 가로화면, 태블릿 등): 초록 바탕색, 1번과 2번 문단 표시
  • 폭 961px 이상(데스크톱 등): 청록 바탕색, 3개 문단 모두 표시

샘플 링크는 다음과 같습니다. 브라우저의 창 폭을 조절해 가면서 실험해 보시기 바랍니다.
https://pjw48.net/samp/responsive_css_sample.html

CSS 내에서 미디어쿼리를 지정할 때 주의사항

  • 외부 CSS나 헤더의 CSS 안에 미디어쿼리를 지정할 때 최하단에 지정하고 가급적이면 그 밑으로 다른 공통 CSS를 지정하지 않는 것이 좋습니다. CSS 중복에 따른 재지정으로 인하여 의도치 않은 결과가 발생할 수 있기 때문입니다.
  • A조건이 B조건을 포괄하는 경우 A조건을 B조건보다 앞에 놓습니다. 예를 들어, (min-width: 481px)(min-width: 961px)의 경우 전자가 후자를 포괄하므로 (min-width: 481px)을 먼저 지정하고 그 다음 (min-width: 961px)을 지정하는 식으로 합니다.

“반응형 CSS 만들기”의 2개의 생각

답글 남기기

이메일 주소는 공개되지 않습니다.