[WEB-003][입문] 작은 화면부터 반응형 카드 화면 만들기
페이지 정보
본문
[이번 수업]
반응형 웹은 화면 너비에 맞춰 배치와 여백이 바뀌는 웹입니다. 같은 HTML을 한 열, 두 열, 세 열로 재배치하며, 작은 화면 규칙을 기본값으로 쓰는 ‘모바일 우선’ 방식을 사용합니다.
[선수지식]
WEB-001의 HTML 요소와 WEB-002의 CSS 선택자, 박스 모델을 알면 좋습니다. 파일 저장과 브라우저 실행만 알아도 따라할 수 있습니다.
[학습목표]
1. viewport 설정의 역할을 설명합니다.
2. CSS Grid와 미디어 쿼리로 열 수를 바꿉니다.
3. 콘텐츠 상태를 보고 분기점을 정합니다.
[핵심개념]
뷰포트(viewport)는 브라우저가 페이지를 그리는 보이는 영역입니다. viewport 메타는 이 영역을 기기 너비에 맞춥니다. 미디어 쿼리는 출력 환경의 조건에 따라 CSS를 적용하는 문법이며, `min-width`는 해당 너비 이상에서 규칙을 추가합니다.
모바일 우선에서는 한 열을 기본으로 두고 48rem 이상에서 두 열, 72rem 이상에서 세 열을 추가합니다. rem은 문서의 기본 글자 크기를 기준으로 하는 상대 단위입니다. 분기점은 기기 이름이 아니라 제목과 버튼이 겹치거나 카드가 답답해지는 순간을 보고 정합니다.
[따라하기]
아래 내용을 `responsive.html`로 저장하세요.
```html
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>반응형 카드 연습</title>
<style>
* { box-sizing: border-box; }
body { margin: 0; font-family: sans-serif; }
main { width: min(100% - 2rem, 70rem); margin: 2rem auto; }
.cards { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.card { padding: 1rem; border: 1px solid #ccd3da; }
@media (min-width: 48rem) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
</style>
</head>
<body><main>
<h1>오늘의 학습 카드</h1>
<section class="cards" aria-label="학습 목록">
<article class="card"><h2>HTML</h2><p>문서 구조</p><button>열기</button></article>
<article class="card"><h2>CSS</h2><p>모양과 배치</p><button>열기</button></article>
<article class="card"><h2>JavaScript</h2><p>동작 추가</p><button>열기</button></article>
</section>
</main></body>
</html>
```
파일을 두 번 클릭하거나 Windows의 `start responsive.html`, macOS의 `open responsive.html`, Linux의 `xdg-open responsive.html`을 실행합니다. 창을 줄이면 48rem 미만은 한 열, 48rem 이상은 두 열, 72rem 이상은 세 열이 됩니다. 개발자 도구에서도 320px부터 넓혀 보세요. `minmax(0, 1fr)`은 긴 내용 때문에 열이 밖으로 밀리는 일을 줄입니다.
[흔한 실수]
`width: 1200px`처럼 너비를 고정하면 작은 화면에 가로 스크롤이 생깁니다. viewport 메타를 빼거나 기종별 분기점을 계속 추가하지 마세요. 중간 너비와 글자를 확대했을 때도 제목·버튼이 겹치지 않는지 확인합니다.
[보안 주의]
CSS의 `display: none`은 권한 보호가 아닙니다. 개발자 도구나 응답 원문으로 볼 수 있으므로 비밀값과 권한 없는 데이터는 서버에서 보내지 마세요. 화면 너비로 관리자 권한을 판단해서도 안 됩니다. 운영 환경의 인라인 스타일은 기존 콘텐츠 보안 정책(CSP)의 nonce·hash를 따르거나 검토된 외부 CSS로 옮기며 CSP를 약화하지 않습니다.
[직접 해볼 과제]
네 번째 ‘접근성’ 카드를 추가하고 제목을 길게 바꿔 보세요. 48rem과 72rem 근처에서 잘림·겹침·가로 스크롤이 없는지 확인한 뒤 분기점이나 여백을 조정합니다. Tab 키로 모든 버튼에 도달되는지도 기록하세요.
[확인문제]
1. 한 열 규칙을 미디어 쿼리 밖에 두는 이유는 무엇인가요?
2. 분기점을 기기 이름보다 콘텐츠 상태로 정해야 하는 이유는 무엇인가요?
3. CSS로 숨긴 정보를 보안 처리로 볼 수 없는 이유는 무엇인가요?
[다음 학습]
전체 순환의 다음 수업은 BACK-003 ‘HTTP 요청·응답과 REST’입니다. 웹 화면 과정을 이어가려면 WEB-004 ‘웹 접근성과 키보드 사용’을 학습하세요.
[공식 참고 자료]
WHATWG HTML viewport 메타: https://html.spec.whatwg.org/multipage/semantics.html#meta-viewport
W3C Media Queries Level 5: https://www.w3.org/TR/mediaqueries-5/
W3C CSS Grid Layout Level 2: https://www.w3.org/TR/css-grid-2/
W3C WCAG 2.2 Reflow: https://www.w3.org/WAI/WCAG22/Understanding/reflow.html
반응형 웹은 화면 너비에 맞춰 배치와 여백이 바뀌는 웹입니다. 같은 HTML을 한 열, 두 열, 세 열로 재배치하며, 작은 화면 규칙을 기본값으로 쓰는 ‘모바일 우선’ 방식을 사용합니다.
[선수지식]
WEB-001의 HTML 요소와 WEB-002의 CSS 선택자, 박스 모델을 알면 좋습니다. 파일 저장과 브라우저 실행만 알아도 따라할 수 있습니다.
[학습목표]
1. viewport 설정의 역할을 설명합니다.
2. CSS Grid와 미디어 쿼리로 열 수를 바꿉니다.
3. 콘텐츠 상태를 보고 분기점을 정합니다.
[핵심개념]
뷰포트(viewport)는 브라우저가 페이지를 그리는 보이는 영역입니다. viewport 메타는 이 영역을 기기 너비에 맞춥니다. 미디어 쿼리는 출력 환경의 조건에 따라 CSS를 적용하는 문법이며, `min-width`는 해당 너비 이상에서 규칙을 추가합니다.
모바일 우선에서는 한 열을 기본으로 두고 48rem 이상에서 두 열, 72rem 이상에서 세 열을 추가합니다. rem은 문서의 기본 글자 크기를 기준으로 하는 상대 단위입니다. 분기점은 기기 이름이 아니라 제목과 버튼이 겹치거나 카드가 답답해지는 순간을 보고 정합니다.
[따라하기]
아래 내용을 `responsive.html`로 저장하세요.
```html
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>반응형 카드 연습</title>
<style>
* { box-sizing: border-box; }
body { margin: 0; font-family: sans-serif; }
main { width: min(100% - 2rem, 70rem); margin: 2rem auto; }
.cards { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.card { padding: 1rem; border: 1px solid #ccd3da; }
@media (min-width: 48rem) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
</style>
</head>
<body><main>
<h1>오늘의 학습 카드</h1>
<section class="cards" aria-label="학습 목록">
<article class="card"><h2>HTML</h2><p>문서 구조</p><button>열기</button></article>
<article class="card"><h2>CSS</h2><p>모양과 배치</p><button>열기</button></article>
<article class="card"><h2>JavaScript</h2><p>동작 추가</p><button>열기</button></article>
</section>
</main></body>
</html>
```
파일을 두 번 클릭하거나 Windows의 `start responsive.html`, macOS의 `open responsive.html`, Linux의 `xdg-open responsive.html`을 실행합니다. 창을 줄이면 48rem 미만은 한 열, 48rem 이상은 두 열, 72rem 이상은 세 열이 됩니다. 개발자 도구에서도 320px부터 넓혀 보세요. `minmax(0, 1fr)`은 긴 내용 때문에 열이 밖으로 밀리는 일을 줄입니다.
[흔한 실수]
`width: 1200px`처럼 너비를 고정하면 작은 화면에 가로 스크롤이 생깁니다. viewport 메타를 빼거나 기종별 분기점을 계속 추가하지 마세요. 중간 너비와 글자를 확대했을 때도 제목·버튼이 겹치지 않는지 확인합니다.
[보안 주의]
CSS의 `display: none`은 권한 보호가 아닙니다. 개발자 도구나 응답 원문으로 볼 수 있으므로 비밀값과 권한 없는 데이터는 서버에서 보내지 마세요. 화면 너비로 관리자 권한을 판단해서도 안 됩니다. 운영 환경의 인라인 스타일은 기존 콘텐츠 보안 정책(CSP)의 nonce·hash를 따르거나 검토된 외부 CSS로 옮기며 CSP를 약화하지 않습니다.
[직접 해볼 과제]
네 번째 ‘접근성’ 카드를 추가하고 제목을 길게 바꿔 보세요. 48rem과 72rem 근처에서 잘림·겹침·가로 스크롤이 없는지 확인한 뒤 분기점이나 여백을 조정합니다. Tab 키로 모든 버튼에 도달되는지도 기록하세요.
[확인문제]
1. 한 열 규칙을 미디어 쿼리 밖에 두는 이유는 무엇인가요?
2. 분기점을 기기 이름보다 콘텐츠 상태로 정해야 하는 이유는 무엇인가요?
3. CSS로 숨긴 정보를 보안 처리로 볼 수 없는 이유는 무엇인가요?
[다음 학습]
전체 순환의 다음 수업은 BACK-003 ‘HTTP 요청·응답과 REST’입니다. 웹 화면 과정을 이어가려면 WEB-004 ‘웹 접근성과 키보드 사용’을 학습하세요.
[공식 참고 자료]
WHATWG HTML viewport 메타: https://html.spec.whatwg.org/multipage/semantics.html#meta-viewport
W3C Media Queries Level 5: https://www.w3.org/TR/mediaqueries-5/
W3C CSS Grid Layout Level 2: https://www.w3.org/TR/css-grid-2/
W3C WCAG 2.2 Reflow: https://www.w3.org/WAI/WCAG22/Understanding/reflow.html
- 이전글[BACK-003][입문] 할 일 REST API 설계하고 실행하기 26.08.30
- 다음글[JSTS-003][입문] 배열·객체를 원본 변경 없이 다루기 26.08.30
댓글목록
등록된 댓글이 없습니다.