왕진 블로그
반응형
Web Development · Layout
솔로의 식탁
시맨틱 레이아웃 · 외부 CSS · 반응형 그리드
5개 메뉴를 1열 → 2열 → 3열로 자동 변환하는 레시피 사이트 골격
시작 오늘 분석할 코드
"솔로의 식탁" 레시피 사이트의 메인 페이지 골격이다. HTML 본문은 단순한 시맨틱 마크업만 두고, 디자인·레이아웃은 외부 CSS 파일(style-result-1.css)에서 처리한다. 화면 크기에 따라 1열 → 2열 → 3열로 메뉴가 재배치되는 반응형이 핵심이다.
<!-- index-result-1.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="css/style-result-1.css"> </head> <body> <div id="container"> <header> <h1>솔로의 식탁</h1> </header> <section id="menus"> <div id="menu1"><h2>밥/죽</h2></div> <div id="menu2"><h2>국/찌개</h2></div> <div id="menu3"><h2>반찬</h2></div> <div id="menu4"><h2>일품요리</h2></div> <div id="menu5"><h2>음료/칵테일</h2></div> </section> <footer><p>솔로의 식탁</p></footer> </div> </body> </html>
실제 출력 미리보기 (PC 너비)
솔로의 식탁
밥/죽
국/찌개
반찬
일품요리
음료/칵테일
솔로의 식탁
용어 핵심 키워드
시맨틱 태그의미가 있는 태그 — header, section, footer 등
<link>외부 CSS 파일 연결 — head 안에 작성
box-sizing: border-boxpadding·border 포함해서 width 계산
position: relative/absolute자식의 절대 위치 기준점/실제 절대 위치
background: url(...)CSS로 div에 배경 이미지 깔기
background-size: cover박스를 꽉 채우도록 이미지 확대 — 잘리는 부분 발생
@media미디어 쿼리 — 화면 너비별 다른 CSS 적용
display: flex자식 요소를 가로로 정렬하는 플렉스 레이아웃
flex-wrap: wrap자식이 넘치면 다음 줄로 줄바꿈
justify-contentflex 자식의 가로 정렬 방식
1 외부 CSS — <link>로 분리
HTML에 <style>로 직접 쓰지 않고 별도의 .css 파일에 모은 뒤 <link>로 가져온다. 이 사이트는 css/style-result-1.css에 모든 스타일이 들어 있다.
<link rel="stylesheet" href="css/style-result-1.css">
내부 <style> (인라인)
- HTML 안에 직접 작성
- 한 페이지에서만 쓰는 작은 스타일
- 여러 페이지에 동일한 코드 중복
외부 .css + <link>
- HTML과 분리 → 유지보수 용이
- 여러 페이지에서 공유
- 브라우저가 캐시 → 재방문 시 빠름
📌 실무 기준 — 3페이지 이상 또는 30줄 이상 스타일이라면 외부 CSS로 빼는 게 표준이다.
2 시맨틱 태그 — 의미가 있는 골격
본문은 <header>, <section>, <footer> 같은 의미가 있는 태그로 구성된다. 모두 <div>로 만들 수도 있지만 시맨틱 태그를 쓰면 검색엔진·스크린리더가 구조를 이해할 수 있다.
| 태그 | 역할 | 이 코드에서 |
|---|---|---|
<header> |
페이지·섹션의 머리말 | "솔로의 식탁" 큰 제목 |
<section> |
의미 단위 블록 | id="menus" — 메뉴 카드 묶음 |
<footer> |
페이지·섹션의 꼬리말 | 저작권 / 사이트명 |
<div id="container"> |
전체 묶는 일반 컨테이너 | 너비 100% 잡고 모든 내용 감쌈 |
⚠ id="notice"인 빈 section은 원본에 있지만 내용이 없다. 실제 운영 시 공지·새 글 등을 넣을 자리. 빈 채로 두면 화면에 안 보이지만 SEO·접근성 관점에서는 채우는 게 좋다.
3 박스 모델 리셋 — * 셀렉터
모든 요소의 기본 margin·padding을 0으로 만들고 box-sizing: border-box를 적용한다. 이게 CSS의 첫 줄이다.
* { margin: 0; padding: 0; box-sizing: border-box; }
※ 왜 이렇게 시작하는가
- 브라우저마다
<h1>·<p>의 기본 여백이 미묘하게 다름 - 모두 0으로 리셋해야 디자이너가 의도한 대로 정확하게 그려짐
border-box: 너비 계산이 직관적 —width: 100%면 padding·border 포함해서 정확히 100%
content-box (기본)
너비 100% + padding 20px → 실제 차지 너비는 100% + 40px → 가로 스크롤 발생
border-box
너비 100% + padding 20px → 정확히 100% 안에 padding이 포함됨 → 레이아웃 안정
반응형
4 메뉴 카드 — 배경 이미지 + 텍스트 위치
#menus > div { position: relative; /* 자식 absolute 기준점 */ height: 400px; border: 1px solid black; margin-bottom: 15px; } #menu1 { background: url("../images/dish1.jpg") no-repeat center; background-size: cover; } #menus h2 { position: absolute; /* 부모 카드 기준 절대 위치 */ right: 3%; bottom: 10px; color: white; text-shadow: 3px 3px 5px black; }
⚙ position relative + absolute 패턴 — 메뉴 카드(부모)에
relative를 주고, 안의 <h2>(자식)에 absolute를 주면, h2가 "가장 가까운 relative 부모" 기준으로 우측 하단에 고정된다. 화면 크기가 바뀌어도 카드의 우측 하단을 그대로 따라간다.background-size: cover
이미지가 박스보다 크든 작든 박스를 가득 채우도록 자동 확대/축소한다. 비율은 유지되므로 일부가 잘릴 수 있다. 음식 사진처럼 "박스에 꽉 차야 예쁜" 경우에 적합하다.
⚠
../images/dish1.jpg의 ../는 "한 단계 위 폴더"를 가리킨다. CSS는 css/ 폴더 안에 있고, 이미지는 images/ 폴더에 있어서 한 번 위로 올라가야 한다.5 반응형 — @media 미디어 쿼리
화면 너비에 따라 메뉴 배치가 바뀐다. 이 사이트는 3단계 분기를 사용한다.
| 너비 | 레이아웃 | menu1~4 | menu5 |
|---|---|---|---|
| ~767px (모바일) | 1열 | 100% | 100% |
| 768~991px (태블릿) | 2열 | 49%씩 | 100% (한 줄 차지) |
| 992px~ (PC) | 3열 | 33%씩 3개 | flex: 2 → menu4와 함께 둘째 줄 |
@media all and (min-width: 768px) { #menus { display: flex; flex-wrap: wrap; justify-content: space-between; } #menu1, #menu2, #menu3, #menu4 { width: 49%; } #menu5 { width: 100%; } } @media all and (min-width: 992px) { #menu1, #menu2, #menu3, #menu4, #menu5 { width: 33%; } #menu5 { flex: 2 2 0; } }
~767px (모바일)
768~991px
992px~
※ min-width로 분기하는 이유 (모바일 퍼스트)
- 기본 스타일은 모바일(가장 좁은 화면) 기준으로 작성
min-width: 768px는 "768px 이상이면 추가 적용"이라는 뜻- 화면이 커질수록 스타일이 누적 → 모바일 코드가 가장 단순하고 빠름
6 justify-content: space-between
flex 컨테이너 안에서 첫 자식은 왼쪽 끝, 마지막 자식은 오른쪽 끝에 붙이고, 사이에는 균등 간격을 자동으로 둔다. 이 사이트는 메뉴를 49%씩 두 개 배치하면서 사이의 2% 간격을 자동으로 만든다.
[ menu1 49% ] 2% [ menu2 49% ] ← 한 줄 [ menu3 49% ] 2% [ menu4 49% ] ← 다음 줄 (wrap) [ menu5 100% ] ← 셋째 줄
⚙
flex: 2 2 0은 "남은 공간을 2배로 차지"는 뜻. PC에서 menu5가 menu4보다 두 배 넓게 자라도록 한 설정이다.7 푸터 텍스트 세로 가운데 — line-height 트릭
footer { height: 200px; background: #373737; } footer p { line-height: 200px; /* footer 높이와 같게 → 세로 가운데 */ text-align: center; /* 가로 가운데 */ }
📌 line-height = 박스 높이 트릭 — 한 줄짜리 텍스트를 박스의 세로 중앙에 두는 가장 간단한 방법. 줄이 두 줄 이상이면 깨지므로 다음 단계는 flex(
display: flex; align-items: center;)로 해결한다.8 화면이 그려지는 흐름
1) HTML 파싱 → <link>로 외부 CSS 다운로드 시작 2) CSS의 *{margin:0;padding:0;border-box} 적용 — 모든 기본값 리셋 3) #container 너비 100% — 화면 전체 4) header → h1 가운데, 폰트 크기 3em 5) #menus → 안의 div들이 1열로 쌓임 (모바일 기본) 6) 각 div → 배경 이미지 깔리고 cover로 채워짐 7) h2 → 카드 우측 하단(absolute)에 흰 글씨로 표시 8) footer → 어두운 회색 바, 흰 글씨로 사이트명 9) [화면 768px↑] → @media 발동 → flex로 2열 재배치 10) [화면 992px↑] → 다시 발동 → 3열, menu5는 2배 폭
9 자주 하는 실수
| 실수 | 증상 | 해결 |
|---|---|---|
| 외부 CSS 경로 오타 | 스타일이 전혀 안 먹음 | F12로 콘솔에서 404 확인 → 경로 수정 |
이미지 경로 ../ 누락 |
배경이 비어 보임 | CSS 위치 기준 상대 경로 다시 확인 |
| position: absolute만 줌 | h2가 화면 전체 기준으로 떠다님 | 부모에 position: relative 필수 |
| max-width 대신 width: 768px로 분기 | 의도와 반대로 동작 | 모바일 퍼스트는 min-width 사용 |
| vendor prefix 빼먹음 | 구형 브라우저(IE10 등)에서 깨짐 | 요즘은 PostCSS·Autoprefixer가 자동 처리 |
| line-height 가운데 정렬을 두 줄에도 적용 | 둘째 줄이 박스 밖으로 빠짐 | 두 줄 이상은 flex + align-items 사용 |
핵심 한 줄 요약
link[rel=stylesheet]외부 CSS 연결 — 유지보수·캐시 측면에서 표준
시맨틱 골격header / section / footer로 의미 있는 구조
* {margin:0;padding:0;border-box}CSS 첫 줄 — 브라우저 차이 리셋 + 너비 계산 안정
relative + absolute부모에 relative 자식에 absolute → 카드 안 위치 고정
background-size: cover박스를 꽉 채우도록 이미지 자동 확대 (일부 잘림)
@media min-width모바일 퍼스트 — 화면 커질수록 스타일 누적
flex + space-between자식 49%씩 양쪽 끝 정렬 → 사이 간격 자동
line-height = height한 줄 텍스트 세로 가운데 정렬 트릭
Tags
#시맨틱태그 #header #section #footer #외부CSS #모바일퍼스트 #미디어쿼리 #flex #space-between #position #background-size #line-height #카드레이아웃 #CSS #HTML #웹개발 #티스토리
▼ 티스토리 태그 입력란 복사용
시맨틱태그, header, section, footer, 외부CSS, 모바일퍼스트, 미디어쿼리, flex, space-between, position, background-size, cover, line-height, 카드레이아웃, CSS, HTML, 웹개발, 티스토리
반응형
'php' 카테고리의 다른 글
| jQuery Mobile 버튼 그룹 — controlgroup 완전 정리 (0) | 2026.06.22 |
|---|---|
| jQuery Mobile 버튼 3종류 — a · button · input 완전 정리 (0) | 2026.06.22 |
| jQuery Mobile navbar · fullscreen · data-icon 완전 정리 (0) | 2026.06.22 |
| jQuery Mobile 뒤로가기 버튼 — data-add-back-btn 완전 정리 (0) | 2026.06.22 |
| 미디어쿼리 3단계 카드 레이아웃 — 모바일·태블릿·데스크톱 완전 정리 (0) | 2026.06.22 |
댓글