• 빠른 이동을 원하시면, 아래 키워드를 클릭하세요!

🌿 flex와 grid의 혼합

.CSS_상자그룹 {
	display: flex;
	flex-wrap: wrap; /* 화면사이즈 작아지면, 사진 한개씩 아래로 내려줘 */
	gap: 10px;
	max-width: 1100px;
	height: 100%;
	background-color: skyblue;
	padding: 50px;
}
.CSS_상자 {
	width: 250px;
	height: 250px;
}

/* 사진 2개 이하일 때, 그리드로 변경(아래로 안 내려가고, 가로 사이즈만 줄음 => width 100%란? 가능한 범위에서 꽉차게를 의미) */
@media (max-width: 650px) {
	.CSS_상자그룹 {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}    
	.CSS_상자 {
		width: 100%;
	}    
}

이 코드에서는 두 가지 주요 CSS 레이아웃 도구인 Flexbox와 Grid를 함께 사용하여 다양한 화면 크기에서 유연하게 이미지를 배치하고 있습니다. 그리고 @media 쿼리를 사용하여 반응형 디자인을 구현하고 있습니다.

📝 실습 코드