CSS 미디어 쿼리를 통한 블록 재구성

다양한 화면 너비에서 블록 재구성을 수행하는 방법을 배워봅시다. 예를 들어 다음과 같은 동작을 구현해 보겠습니다:

먼저 블록의 HTML 코드를 작성해 봅시다:

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
</div>

이제 블록들의 부모 요소에 스타일을 적용해 보겠습니다:

.parent {
	display: flex;
	width: 90%;
	margin: 50px auto;
	border: 1px solid red;
}

이제 블록 자체에 스타일을 적용하겠습니다. 미디어 쿼리로 변경될 속성은 지정하지 않습니다:

.child {
	box-sizing: border-box;
	padding: 20px;
	border: 1px solid green;
}

큰 화면 너비에서는 블록 사이의 간격이 자동으로 계산되도록 합시다:

@media (min-width: 500px) {
	.parent {
		justify-content: space-between;
	}
}

간격을 남기기 위해 블록의 너비를 50%보다 약간 작게 설정합시다:

@media (min-width: 500px) {
	.child {
		width: 49.5%;
	}
}

작은 화면 너비에서는 블록들을 세로로 배치합시다:

@media (max-width: 500px) {
	.parent {
		flex-direction: column;
	}
}

블록들에 아래쪽 여백을 지정합시다:

@media (max-width: 500px) {
	.child {
		margin-bottom: 10px;
	}
}

모든 것을 합치면 다음과 같은 코드가 됩니다:

.parent {
	display: flex;
	width: 90%;
	margin: 50px auto;
}
.child {
	box-sizing: border-box;
	padding: 20px;
	border: 1px solid green;
}

@media (max-width: 500px) {
	.parent {
		flex-direction: column;
	}
	.child {
		margin-bottom: 10px;
	}
}
@media (min-width: 500px) {
	.parent {
		justify-content: space-between;
	}
	.child {
		width: 49.5%;
	}
}

아래의 예제를 따라 해보세요: