CSS 미디어 쿼리 소개

특별한 명령어 @media가 있으며, 이 명령어를 사용하면 화면 너비에 따라 다른 코드를 실행할 수 있습니다.

다음 예제에서는 화면 너비가 300px부터 1200px까지일 때 일부 코드가 실행됩니다:

@media (min-width: 300px) and (max-width: 1200px) {
	/* 일부 코드 */
}

다음 예제에서는 화면 너비가 300px보다 클 때 일부 코드가 실행됩니다:

@media (min-width: 300px) {
	/* 일부 코드 */
}

다음 예제에서는 화면 너비가 1200px보다 작을 때 일부 코드가 실행됩니다:

@media (max-width: 1200px) {
	/* 일부 코드 */
}

우리의 미디어 쿼리에 어떤 코드를 작성해 봅시다. 예를 들어, 특정 화면 크기에서 단락을 빨간색으로 칠하겠습니다:

@media (min-width: 300px) and (max-width: 1200px) {
	p {
		color: red;
	}
}

@media (min-width: 300px) and (max-width: 1200px) {
	p {
		color: red;
	}
}

이제 화면 너비에 따라 단락을 다양한 색상으로 칠해 봅시다:

@media (max-width: 300px) {
	p {
		color: red;
	}
}
@media (min-width: 300px) and (max-width: 900px) {
	p {
		color: green;
	}
}
@media (min-width: 900px) and (max-width: 1200px) {
	p {
		color: blue;
	}
}
@media (min-width: 1200px) {
	p {
		color: orange;
	}
}

다음 코드가 0부터 800px까지의 화면 너비에 적용되도록 하세요:

p {
	font-size: 20px;
}

그리고 다음 코드가 800px 이상의 화면 너비에 적용되도록 하세요:

p {
	font-size: 30px;
}

다음 코드가 0부터 500px까지의 화면 너비에 적용되도록 하세요:

p {
	font-size: 15px;
}

다음 코드가 500px부터 900px까지의 화면 너비에 적용되도록 하세요:

p {
	font-size: 20px;
}

다음 코드가 900px 이상의 화면 너비에 적용되도록 하세요:

p {
	font-size: 30px;
}