HTML·CSS와 반응형 웹
1주 의미 있는 HTML 명단과 2주 긴 콘텐츠·작은 화면에 대응하는 CSS 레이아웃 만들기
이번 문서에서 만드는 것
1주는 HTML로 의미 있는 회원 명단을 만들고 2주는 CSS로 작은 화면에서도 읽을 수 있는 레이아웃을 만듭니다. 디자인 도구나 JavaScript 경험은 필요하지 않습니다. 이후 JavaScript와 React에서 같은 명단을 데이터로 바꿉니다.
웹 브라우저는 HTML의 구조, CSS의 표현, JavaScript의 동작을 조합합니다. 개발자 도구 Network에서는 문서 요청을, Elements에서는 브라우저가 구성한 DOM과 적용된 스타일을 볼 수 있습니다. 파일을 수정했는데 화면이 그대로라면 저장 여부와 실제로 연 파일부터 확인합니다.
1주: 문서 구조와 의미
빈 폴더 lion-web에 index.html을 만듭니다. 아래 전체 코드를 저장한 뒤 브라우저로 엽니다. 아직 검색 동작은 만들지 않습니다.
<!doctype html><html lang="ko"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>멋사 회원 명단</title> <link rel="stylesheet" href="style.css"></head><body> <header class="site-header"> <a href="#main">본문으로 이동</a> <p>LIKELION · 연습용 가상 명단</p> </header> <main id="main" class="container"> <h1>함께 만드는 사람들</h1> <p>각자의 역할을 알아보고 함께 공부할 동료를 찾아보세요.</p> <section aria-labelledby="members-title"> <h2 id="members-title">회원 명단</h2> <ul class="member-grid"> <li class="member-card"> <h3>가람</h3> <p>프론트엔드 · 누구나 사용할 수 있는 화면을 만듭니다.</p> <a href="https://developer.mozilla.org/ko/">학습 자료 보기</a> </li> <li class="member-card"> <h3>나래</h3> <p>기획·디자인 · 사용자의 문제와 해결 과정을 연결합니다.</p> <a href="https://www.figma.com/">디자인 도구 보기</a> </li> <li class="member-card"> <h3>다온</h3> <p>백엔드 · 데이터와 요청을 안정적으로 처리합니다.</p> <a href="https://www.python.org/">언어 자료 보기</a> </li> </ul> </section> </main> <footer class="container"><p>세션에서 만든 학습용 페이지입니다.</p></footer></body></html>제목은 글자 크기를 고르기 위해서가 아니라 내용의 계층을 표현하기 위해 사용합니다. 이동은 a, 저장·열기 같은 동작은 button을 사용합니다. 클릭 가능한 div로 모두 대체하면 키보드 조작과 의미를 직접 구현해야 합니다.
lang은 문서 언어, charset은 문자 인코딩, viewport는 모바일 화면의 레이아웃 기준입니다. 이미지가 정보를 전달한다면 의미를 담은 alt를, 순수 장식이라면 빈 alt를 사용합니다. 이 실습은 불필요한 이미지 파일 없이 시작합니다.
1주 실습과 완료 기준
권장 80분: 요청·DOM 확인 15분, HTML 작성 30분, 의미·키보드 점검 20분, 짝 설명 15분입니다. 회원 한 명과 소개 문장을 추가하고 Tab으로 모든 링크를 이동합니다. 제출물은 HTML과 “이 요소를 div 대신 사용한 이유” 세 가지입니다.
완료 기준: CSS 없이도 제목·목록·링크의 흐름을 이해할 수 있고 h1→h2→h3 관계와 상대 경로를 설명합니다. 스타일 파일이 아직 없다면 Network의 404는 다음 단계에서 해결합니다.
2주: 박스 모델과 반응형 레이아웃
같은 폴더에 style.css를 만듭니다.
* { box-sizing: border-box; }body { margin: 0; font-family: system-ui, sans-serif; line-height: 1.6; color: #172033; background: #f5f7fb;}a { color: #174ea6; text-underline-offset: 0.2em; }a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid #174ea6; outline-offset: 4px;}.site-header { padding: 1rem max(1rem, calc((100% - 68rem) / 2)); }.container { width: min(100% - 2rem, 68rem); margin-inline: auto; }main { padding-block: 2rem; }h1 { font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.2; }.member-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; padding: 0; list-style: none;}.member-card { padding: 1.5rem; border: 1px solid #c8cfda; border-radius: 0.75rem; background: #fff; overflow-wrap: anywhere;}.member-card h3 { margin-top: 0; }@media (min-width: 44rem) { .member-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }}content·padding·border·margin이 박스의 공간을 만듭니다. border-box에서는 지정한 width 안에 padding과 border가 포함됩니다. Grid는 여러 카드의 행·열 배치에, Flex는 한 줄의 버튼이나 내비게이션 정렬에 적합합니다. 둘 중 하나를 모든 상황의 정답으로 외우지 않습니다.
이 예제는 좁은 화면 한 열에서 시작하고 콘텐츠가 충분히 들어갈 때 세 열로 바꿉니다. 특정 휴대폰 이름에 맞추기보다 카드가 읽히는 폭을 기준으로 분기합니다. minmax(0, 1fr)와 긴 문자열 줄바꿈은 콘텐츠가 열 너비를 밀어내는 문제를 줄입니다.
스타일이 예상과 다를 때
개발자 도구 Computed에서 최종 값을 보고 Styles에서 취소선 처리된 선언을 확인합니다. cascade·명시도·선언 순서 때문에 덮였는지 판단한 뒤 수정합니다. 이유를 모른 채 !important를 반복해서 붙이지 않습니다. 브라우저 기본 여백도 스타일의 일부입니다.
2주 실습과 완료 기준
권장 90분: 박스 모델 20분, Grid 적용 25분, 화면·콘텐츠 변화 검사 30분, 리뷰 15분입니다.
| 검사 | 통과 조건 |
|---|---|
| 360px와 1280px 폭 | 가로 스크롤 없이 카드와 문장 읽기 가능 |
| 브라우저 200% 확대 | 내용이 잘리거나 겹치지 않음 |
| 이름·소개를 두 배로 늘림 | 카드 밖으로 넘치지 않음 |
| 키보드 Tab | 현재 링크에 포커스 표시가 보임 |
| CSS 연결 제거 | 내용과 이동 의미가 유지됨 |
완료 결과는 두 화면 폭의 캡처, HTML·CSS, 고친 레이아웃 문제 한 건입니다. 색상만으로 상태를 구분하지 않고 글과 형태를 함께 사용합니다. 화면을 이미지 한 장처럼 고정 좌표로 배치하는 구현은 완료로 보지 않습니다.
더 읽어보기
연결된 PBL 미션과 VOD
| 주차·미션 | 참고 VOD 범위 |
|---|---|
| 1주 · HTML과 웹의 동작 | 사이트 기본 구조 2·3·4·6·7장 / 리액트 실무 1·2장 |
| 2주 · CSS 레이아웃과 반응형 | 사이트 기본 구조 8·9장 / 리액트 실무 1·2장 |
강좌 안내: 참고 강좌 1 · 참고 강좌 2. 이 문서는 영상 전체를 옮긴 전사 자료가 아닙니다. 세부 내용은 위 공식 문서에서 확인합니다.