미디어쿼리 3단계 카드 레이아웃 — 모바일·태블릿·데스크톱 완전 정리

 

 

Web Development · Responsive Cards

3단계 카드 레이아웃 — 모바일/태블릿/데스크톱

미디어쿼리 분기 · 카드 폭/높이 변환 · 절대 위치 텍스트 재배치

시작 오늘 분석할 코드

같은 HTML(카드 3개)인데 화면 너비에 따라 모양이 완전히 달라진다. 모바일은 카드가 세로로 길게(이미지 위, 텍스트 아래), 태블릿은 가로로 넓게(이미지 옆, 텍스트 옆), 데스크톱은 카드 3개가 한 줄에 가로 배치.

/* 기본 — 모바일 (320px) */ #container { width:320px; margin:50px auto; } .card { position:relative; width:300px; height:500px; } .words { position:absolute; left:10px; top:300px; } /* 태블릿 — 768~1719px */ @media screen and (min-width:768px) and (max-width:1719px) { #container { width:570px; } .card { width:550px; height:250px; } .words { left:310px; top:50px; width:200px; } /* 옆으로 이동 */ } /* 데스크톱 — 1720px+ */ @media screen and (min-width:1720px) { #container { width:1710px; } .card { float:left; width:550px; height:250px; } /* 카드 3개 가로 */ .words { left:310px; top:50px; width:200px; } }

실제 출력 미리보기 — 3단계 시각화

📱 모바일 (~767px) — 카드 세로 길게

 

일 분 전만큼 먼 시간은 없다.

- Jim Bishop

📱 태블릿 (768~1719px) — 카드 가로 넓게

 

웃음은 마음의 조깅이다.

- Norman Cousins

 

낡은 옷은 그냥 입고 새 책을 사라.

- Austin Phelps

🖥 데스크톱 (1720px+) — 카드 3개 가로 한 줄

 

일 분 전만큼...

- Bishop

 

웃음은...

- Cousins

 

낡은 옷은...

- Phelps

용어 용어 정리

3단계 분기기본 + 768px + 1720px (3개 폭)

min-width AND max-width범위 지정 — 두 값 사이에만 적용

card width화면별 다른 값으로 재정의

.words 재배치absolute top/left로 위치 이동

float:left데스크톱에서 카드 가로 배치

breakpoint스타일이 바뀌는 너비 — 768·1720

기본값미디어쿼리 밖 — 가장 작은 화면용

3단 분기 효과한 HTML, 화면별 완전히 다른 모양

---

1 같은 HTML, 다른 디자인 — 미디어쿼리의 매력

이 코드의 핵심은 HTML이 변하지 않는다는 것이다. 카드 3개의 마크업은 그대로지만, CSS만으로 모바일에선 세로 긴 형태, 데스크톱에선 가로 한 줄로 완전히 다른 인상을 만든다.

---

2 모바일 기본 + 너비별 덮어쓰기

모든 미디어쿼리 밖의 규칙은 "기본"이다. 화면이 320px이든 4000px이든 일단 적용되고, 미디어쿼리 안의 규칙이 추가로 덮어쓴다.

[화면 1500px일 때] 기본 규칙: width:320px (적용 후) 768~1719px 미디어쿼리: ✓ width:570px (덮어씀) 1720px+ 미디어쿼리: ✗ (해당 안 됨) → 최종: 570px

---

3 절대 위치(.words) 재배치 트릭

.words가 position:absolute이라 top/left 값만 바꾸면 위치가 자유롭게 이동한다. 모바일에선 이미지 아래(top:300px), 태블릿·데스크톱에선 이미지 옆(left:310px, top:50px).

[모바일] [태블릿/데스크톱] ┌────────┐ ┌────────┬────────┐ │ 이미지 │ │ 이미지 │ 텍스트 │ │ │ │ │ │ ├────────┤ └────────┴────────┘ │ 텍스트 │ .words { left:310px; └────────┘ top:50px; } .words { left:10px; top:300px; }

---

 

반응형

 

4 데스크톱의 float:left — 가로 배치

데스크톱(1720px+)에서만 .card에 float:left가 추가된다. 카드 폭 550px × 3개 + 마진 = 약 1700px가 wrapper(1710px) 안에 들어가 한 줄에 카드 3개가 배치된다.

※ 현대식 권장은 display: flex 또는 grid다. float보다 정렬·간격 통제가 쉽고, clearfix 같은 부수효과가 없다.

---

5 breakpoint 선택 — 768·1720 의미

breakpoint	대상 디바이스	이유
~767px	스마트폰	iPhone·갤럭시 폭 ~430px 이내
768~1719px	태블릿·일반 노트북	iPad 768px / 일반 모니터 1440px 등
1720px+	큰 모니터·고해상도	1920px 이상 — 카드 3개 한 줄

※ 일반적인 breakpoint

• 576px — 작은 폰
• 768px — 태블릿
• 1024px — 작은 노트북
• 1280px / 1440px — 일반 모니터
• 1720px / 1920px — 큰 모니터

---

6 자주 하는 실수

실수	증상	해결
min과 max가 겹침	같은 화면에 두 규칙 적용 — 충돌	범위가 겹치지 않게 (768~1719, 1720+)
중복 코드 많음	유지보수 어려움	공통 속성은 기본에, 변경분만 미디어쿼리
position:absolute 부모 빠뜨림	.words가 페이지 어딘가로 날아감	부모에 position:relative
너무 많은 breakpoint	유지보수 지옥	3~4개 정도가 적당
float clear 누락	다음 영역 위로 올라감	clearfix 또는 flex/grid 사용

---

핵심 한 줄 요약

3단 분기기본(모바일) + 768 + 1720

min and max범위 지정 — 두 값 사이만

기본값모바일 우선 — 미디어쿼리 밖

.words 재배치absolute top/left로 위치 이동

float:left데스크톱 가로 배치 (옛 방식)

현대 대안flex/grid로 정렬 깔끔히

breakpoint 갯수3~4개 — 너무 많으면 지옥

Tags

#media-query #breakpoint #모바일퍼스트 #태블릿 #데스크톱 #카드레이아웃 #min-width #max-width #position-absolute #float #flex대안 #반응형 #CSS #HTML #웹개발 #티스토리

▼ 티스토리 태그 입력란 복사용

media-query, breakpoint, 모바일퍼스트, 태블릿, 데스크톱, 카드레이아웃, min-width, max-width, position-absolute, float, flex대안, 반응형, CSS, HTML, 웹개발, 티스토리