반응형
Web Development · CSS Practice
HTML 마켓 전단지 —
container · 강조 클래스 종합 정리
사과 판매 전단지로 배우는 실전 마크업 패턴
#container { width: 650px; margin: 0 auto; } h1 { color: white; background: #222; padding: 10px; } h2 { color: #ff0000; text-align: center; } p { font-size: 1.5em; font-weight: bold; text-align: center; } .accent { color: blue; } .smalltext { font-size: 0.7em; }
[상품 이미지 자리]
확인하세요
주문 및 배송
오후 2시 이전 주문건은 당일 발송
2시 이후는 다음날 발송
교환 및 환불
불만족시 100% 환불
고객센터로 전화주세요
고객센터
0000-0000
상담 9시~18시
1 #container 패턴
width + margin: 0 auto로 가운데 정렬된 고정 너비. 인터넷 쇼핑몰의 표준 레이아웃.
2 검은 배너 헤더 — 시각적 구분
color: white; background: #222 — 흰 글씨 + 검은 배경으로 강한 대비. 페이지의 시작점·라벨로 자주 쓰임.
3 강조 클래스 .accent
.accent { color: blue } — 본문 중 핵심 단어만 파란색으로 강조. 주문·배송·환불 등 사용자가 반드시 알아야 할 부분.
※ "오후 2시 이전" 같은 시간 정보, "100% 환불" 같은 약속 — 다른 색으로 시선 끌기. 광고 디자인의 기본.
4 .smalltext — 부가 정보
font-size: 0.7em — 부모의 70% 크기. 상담 시간, 약관, 면책 문구 등 부가 정보를 작게.
반응형
5 종합 패턴 — 쇼핑몰 페이지 빌드 블록
| 구성 | 역할 |
|---|---|
| 이미지 상단 | 상품 시각 정보 |
| 검은 배너 라벨 | 구역 구분 |
| 빨간 소제목 | 각 섹션 제목 |
| 강조 색 본문 | 핵심 메시지 |
| hr 구분선 | 주제 전환 |
| 작은 부가 글씨 | 약관·시간 등 |
핵심 한 줄 요약
#container고정 너비 + margin auto = 가운데
검은 배너color white + background dark
.accent핵심 단어 색상 강조
.smalltext0.7em 부가 정보
hr 구분선섹션 사이 시각적 분리
실무 적용쇼핑몰·이벤트·상세 페이지
Tags
#container #margin #padding #h1 #accent #smalltext #마켓전단지 #쇼핑몰 #CSS #HTML #종합 #강조 #웹개발 #티스토리
▼ 티스토리 태그 입력란 복사용
container, margin, padding, h1, accent, smalltext, 마켓전단지, 쇼핑몰, CSS, HTML, 종합, 강조, 웹개발, 티스토리
반응형
'php' 카테고리의 다른 글
| CSS box-shadow — 박스 그림자 완전 정리 (0) | 2026.05.04 |
|---|---|
| CSS Border — 테두리 스타일·색상·단축 완전 정리 (0) | 2026.05.04 |
| CSS 구글 웹폰트 — @import · Google Fonts 완전 정리 (0) | 2026.05.03 |
| CSS 웹폰트 — @font-face 로컬 폰트 완전 정리 (0) | 2026.05.03 |
| CSS text-transform — 대소문자 변환 완전 정리 (0) | 2026.05.03 |
댓글