반응형 디자인이란?
반응형 디자인은 다양한 디바이스 크기(데스크탑, 태블릿, 모바일)에 맞춰 웹 콘텐츠가 유동적으로 레이아웃을 조정하도록 설계하는 방법입니다.
주요 기술로는 미디어 쿼리, 유동적인 유닛, 그리고 Flexbox와 같은 레이아웃 시스템을 활용합니다.
반응형 디자인 구현 방법
다양한 해상도에서도 레이아웃이 어색하지 않게 보이도록 설계하려면 다음의 전략을 사용할 수 있습니다:
- 미디어 쿼리: 화면 크기에 따라 스타일을 조정.
- Flexbox: 유동적 배치를 통해 콘텐츠 간 간격을 조절.
- 유동적 크기: 상대적인 단위(% 또는 vw/vh)를 사용해 레이아웃 크기를 조정.
반응형 Flexbox 예제
아래는 반응형 Flexbox 레이아웃을 구현한 예제입니다. 화면 크기에 따라 아이템 배치 방식이 유동적으로 조정됩니다.
기본 설정:
-
display: flex;: Flexbox를 활성화하여 아이템을 유연하게 배치합니다. -
flex-wrap: wrap;: 아이템이 컨테이너 너비를 초과하면 다음 줄로 배치됩니다. -
flex: 1 1 300px;: 아이템의 기본 크기를 300px로 지정하고, 유동적으로 크기를 변경할 수 있습니다.
아이템 1
아이템 2
아이템 3
아이템 4
아이템 5
/* Flex 컨테이너 설정 */
.flex-container {
display: flex;
flex-wrap: wrap;
gap: 10px;
padding: 20px;
justify-content: center;
}
/* Flex 아이템 설정 */
.flex-item {
background-color: #f7ca71;
color: white;
text-align: center;
border-radius: 4px;
padding: 20px;
flex: 1 1 300px;
}
/* 미디어 쿼리 설정 */
@media (max-width: 375px) {
.flex-item {
flex: 1 1 100%;
}
}
@media (max-width: 1024px) {
.flex-item {
flex: 1 1 45%;
}
}
@media (min-width: 1025px) {
.flex-item {
flex: 1 1 30%;
}
}
- 화면 너비 375px 이하: 각 아이템이 한 줄에 하나씩 배치됩니다.
- 화면 너비 1024px 이하: 한 줄에 두 개씩 배치됩니다.
- 화면 너비 1025px 이상: 한 줄에 세 개씩 배치됩니다.