HTML과 CSS는 웹의 기초입니다. 하지만 "그냥 동작하게 만드는 것"과 "올바르게 구조화하고 스타일링하는 것"은 다릅니다. 이 가이드에서는 시맨틱 마크업과 현대 CSS 레이아웃의 핵심을 다룹니다.
HTML and CSS are the foundation of the web. However, "just making it work" and "properly structuring and styling" are different things. This guide covers the essentials of semantic markup and modern CSS layouts.
시맨틱 HTML: 의미 있는 마크업 Semantic HTML: Meaningful Markup
시맨틱(Semantic) HTML은 태그 자체가 콘텐츠의 의미를 설명합니다. 이는 SEO와 웹 접근성에 중요한 역할을 합니다.
Semantic HTML uses tags that describe the meaning of content. This plays an important role in SEO and web accessibility.
❌ 비시맨틱 ❌ Non-semantic
<div class="nav">...</div>
</div>
<div class="main">...</div>
<div class="footer">...</div>
✅ 시맨틱 ✅ Semantic
<nav>...</nav>
</header>
<main>...</main>
<footer>...</footer>
주요 시맨틱 태그 Key Semantic Tags
<header>사이트 헤더, 로고, 네비게이션</header>
<nav>내비게이션 링크 모음</nav>
<main>페이지의 주요 콘텐츠 (페이지당 1개)</main>
<article>독립적인 콘텐츠 (블로그 글, 뉴스 기사)</article>
<section>관련 콘텐츠의 그룹</section>
<aside>부가 콘텐츠 (사이드바)</aside>
<footer>사이트 푸터, 저작권, 연락처</footer>
<!-- 텍스트 시맨틱 -->
<h1> ~ <h6> 제목 계층 (h1은 페이지당 1개 권장)
<p>문단</p>
<strong>중요한 텍스트</strong>
<em>강조된 텍스트</em>
<time datetime="2024-01-01">2024년 1월 1일</time>
<header>Site header, logo, navigation</header>
<nav>Navigation links collection</nav>
<main>Main content of page (one per page)</main>
<article>Standalone content (blog post, news article)</article>
<section>Group of related content</section>
<aside>Supplementary content (sidebar)</aside>
<footer>Site footer, copyright, contact</footer>
<!-- Text Semantics -->
<h1> ~ <h6> Heading hierarchy (one h1 per page recommended)
<p>Paragraph</p>
<strong>Important text</strong>
<em>Emphasized text</em>
<time datetime="2024-01-01">January 1, 2024</time>
Flexbox: 1차원 레이아웃 Flexbox: One-Dimensional Layout
Flexbox는 한 방향(가로 또는 세로)으로 아이템을 배치하는 레이아웃 모델입니다. 정렬, 간격, 순서 조정이 매우 쉽습니다.
Flexbox is a layout model for arranging items in one direction (horizontal or vertical). Alignment, spacing, and order adjustments are very easy.
display: flex;
justify-content: center; /* 가로 정렬 */
align-items: center; /* 세로 정렬 */
gap: 16px; /* 아이템 간격 */
}
display: flex;
justify-content: center; /* horizontal alignment */
align-items: center; /* vertical alignment */
gap: 16px; /* item spacing */
}
justify-content: space-between 예시: justify-content: space-between example:
justify-content: flex-start; /* 왼쪽 정렬 */
justify-content: flex-end; /* 오른쪽 정렬 */
justify-content: center; /* 가운데 정렬 */
justify-content: space-between; /* 양끝 정렬 */
justify-content: space-around; /* 균등 간격 */
/* Flex 아이템 속성 */
.item {
flex: 1; /* 남은 공간 균등 분배 */
flex-shrink: 0; /* 줄어들지 않음 */
flex-basis: 200px; /* 기본 크기 */
}
justify-content: flex-start; /* left align */
justify-content: flex-end; /* right align */
justify-content: center; /* center align */
justify-content: space-between; /* ends align */
justify-content: space-around; /* even spacing */
/* Flex item properties */
.item {
flex: 1; /* distribute remaining space equally */
flex-shrink: 0; /* don't shrink */
flex-basis: 200px; /* base size */
}
Grid: 2차원 레이아웃 Grid: Two-Dimensional Layout
Grid는 행과 열 모두를 다루는 2차원 레이아웃 시스템입니다. 복잡한 레이아웃을 간단하게 만들 수 있습니다.
Grid is a two-dimensional layout system that handles both rows and columns. It can make complex layouts simple.
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3열 균등 */
gap: 20px;
}
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
gap: 20px;
}
grid-template-columns: repeat(3, 1fr) 예시: grid-template-columns: repeat(3, 1fr) example:
.responsive-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 24px;
}
/* 영역 지정 */
.layout {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.responsive-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 24px;
}
/* Area Assignment */
.layout {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
CSS 변수 (Custom Properties) CSS Variables (Custom Properties)
CSS 변수를 사용하면 값을 재사용하고 테마를 쉽게 관리할 수 있습니다.
CSS variables allow you to reuse values and easily manage themes.
--primary-color: #3b82f6;
--text-color: #1f2937;
--spacing: 16px;
--radius: 8px;
}
.button {
background: var(--primary-color);
padding: var(--spacing);
border-radius: var(--radius);
}
/* 다크 모드 */
[data-theme="dark"] {
--text-color: #f3f4f6;
--bg-color: #111827;
}
--primary-color: #3b82f6;
--text-color: #1f2937;
--spacing: 16px;
--radius: 8px;
}
.button {
background: var(--primary-color);
padding: var(--spacing);
border-radius: var(--radius);
}
/* Dark Mode */
[data-theme="dark"] {
--text-color: #f3f4f6;
--bg-color: #111827;
}
반응형 디자인: Media Queries Responsive Design: Media Queries
.container {
padding: 16px;
}
/* 태블릿 이상 */
@media (min-width: 768px) {
.container {
padding: 32px;
}
}
/* 데스크톱 이상 */
@media (min-width: 1024px) {
.container {
max-width: 1200px;
margin: 0 auto;
}
}
.container {
padding: 16px;
}
/* Tablet and above */
@media (min-width: 768px) {
.container {
padding: 32px;
}
}
/* Desktop and above */
@media (min-width: 1024px) {
.container {
max-width: 1200px;
margin: 0 auto;
}
}
CSS 애니메이션 CSS Animation
.button {
transition: all 0.3s ease;
}
.button:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
/* 키프레임 애니메이션 */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.element {
animation: fadeIn 0.5s ease forwards;
}
.button {
transition: all 0.3s ease;
}
.button:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
/* Keyframe Animation */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.element {
animation: fadeIn 0.5s ease forwards;
}
💡 왜 이 패턴들이 타자 연습에 포함되었는가? 💡 Why are these patterns included in typing practice?
Flexbox와 Grid 속성, CSS 변수, 미디어 쿼리는 현대 웹 개발에서 매일 사용됩니다. 이 패턴들을 손에 익히면 스타일 작성 속도와 정확도가 크게 향상됩니다.
Flexbox and Grid properties, CSS variables, and media queries are used daily in modern web development. Mastering these patterns greatly improves your styling speed and accuracy.