작은 웹페이지를 완성하며 CSS 감각 익히기
이번 장에서 만들 화면
지금까지 우리는 선택자, 글자, 색, 여백, 배치, 반응형, 우선순위, 접근성을 따로 배웠습니다. 마지막 장에서는 이 조각들을 모아 작은 웹페이지 하나를 완성해 보겠습니다.
예시는 개인 프로필 겸 작은 회사 소개 페이지입니다. 실제로는 프리랜서 소개, 작은 브랜드 랜딩페이지, 동아리 소개, 1인 쇼핑몰 소개 페이지로 바꿔 쓸 수 있습니다.
완성할 화면은 네 부분으로 나눕니다.
상단 헤더: 이름과 메뉴
히어로 배너: 가장 먼저 보이는 소개 문구와 버튼
카드 목록: 제공하는 서비스나 강점 소개
문의 영역: 사용자가 행동하도록 돕는 마지막 버튼
CSS를 잘 쓰는 사람은 처음부터 예쁜 효과를 넣지 않습니다. 먼저 화면을 덩어리로 나누고, 각 덩어리의 역할을 정합니다.
AI 생성 이미지
먼저 HTML 구조를 살펴보기
CSS는 HTML에 붙어 있는 요소를 꾸밉니다. 그래서 스타일을 쓰기 전에 "무엇을 꾸밀 것인가?"를 먼저 봐야 합니다.
아래 HTML은 이번 실습의 기본 구조입니다.
<header class='site-header'>
<div class='container header-inner'>
<strong class='logo'>Green Studio</strong>
<nav class='nav'>
<a href='#about'>소개</a>
<a href='#services'>서비스</a>
<a href='#contact'>문의</a>
</nav>
</div>
</header>
<main>
<section id='about' class='hero'>
<div class='container'>
<p class='eyebrow'>작은 브랜드를 위한 웹 디자인</p>
<h1>깔끔한 소개 페이지로 첫인상을 정리합니다</h1>
<p class='hero-text'>복잡한 설명보다 필요한 정보를 보기 좋게 배치해 방문자가 빠르게 이해하도록 돕습니다.</p>
<a class='primary-button' href='#contact'>상담 문의하기</a>
</div>
</section>
<section id='services' class='section'>
<div class='container'>
<h2>우리가 도와드리는 일</h2>
<div class='card-grid'>
<article class='card'>
<h3>소개 페이지 제작</h3>
<p>회사, 개인, 서비스의 핵심 정보를 한 페이지에 정리합니다.</p>
</article>
<article class='card'>
<h3>브랜드 색상 정리</h3>
<p>버튼, 제목, 배경색을 통일해 더 전문적인 인상을 만듭니다.</p>
</article>
<article class='card'>
<h3>모바일 화면 개선</h3>
<p>작은 화면에서도 읽기 쉽고 누르기 편한 구조로 다듬습니다.</p>
</article>
</div>
</div>
</section>
<section id='contact' class='contact-section'>
<div class='container'>
<h2>프로젝트를 시작해 볼까요?</h2>
<p>필요한 내용과 원하는 분위기를 알려 주세요.</p>
<a class='primary-button' href='mailto:[email protected]'>이메일 보내기</a>
</div>
</section>
</main>처음 보면 길어 보이지만, 구조는 단순합니다. header는 상단, main은 주요 내용, section은 페이지 안의 큰 구역입니다. container는 본문 폭을 일정하게 잡기 위한 공통 상자입니다. 넓은 책상 위에 종이를 한 장 올려놓는다고 생각하면 됩니다. 화면은 넓어도 실제 글이 놓이는 폭은 적당히 제한하는 것입니다.
메뉴의 href='#about', href='#services', href='#contact'는 각각 같은 이름의 id를 가진 영역으로 이동합니다. 예를 들어 소개를 누르면 id='about'이 붙은 히어로 영역으로 이동합니다. 메뉴 링크와 section의 id가 서로 맞아야 제대로 움직인다는 점도 함께 기억해 두세요.
꾸밀 영역을 먼저 나누기
CSS를 쓰기 전에 다음처럼 영역을 나눠 봅니다.
body: 페이지 전체의 기본 글꼴, 글자색, 배경색.container: 본문이 너무 넓어지지 않게 잡는 공통 폭.site-header: 상단 메뉴 영역.hero: 첫인상을 만드는 큰 배너.card-grid: 카드들을 정렬하는 목록.card: 각각의 카드 디자인.contact-section: 문의를 유도하는 마지막 영역.primary-button: 주요 행동 버튼
이렇게 나누면 CSS를 수정할 때도 덜 헤맵니다. "버튼 색을 바꾸고 싶다"면 .primary-button을 찾으면 되고, "카드 사이 간격이 좁다"면 .card-grid의 gap을 보면 됩니다.
전체 디자인 기준부터 만들기
작은 페이지라도 기준이 있어야 합니다. 기준 없이 각 요소를 따로 꾸미면 버튼은 파랗고, 카드 테두리는 회색이고, 배너는 너무 넓고, 글자 크기는 제각각이 됩니다.
먼저 전체에 적용할 기본 CSS를 작성합니다.
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, sans-serif;
color: #1f2937;
background-color: #f8fafc;
line-height: 1.6;
}
a {
color: inherit;
text-decoration: none;
}
.container {
width: min(100% - 32px, 1080px);
margin: 0 auto;
}box-sizing: border-box;는 요소의 실제 크기를 계산하기 쉽게 만드는 설정입니다. 가방의 크기를 잴 때 안쪽 공간만 재는 것이 아니라, 천 두께까지 포함해 재는 것과 비슷합니다. 버튼이나 카드에 padding을 넣어도 예상보다 크게 튀어나가는 일을 줄여 줍니다.
.container의 width: min(100% - 32px, 1080px);는 화면이 작을 때는 좌우 여백을 남기고, 화면이 클 때는 최대 1080px까지만 넓어지게 합니다. 어렵게 느껴진다면 "본문 폭 제한 장치"라고 이해하면 됩니다.
헤더 스타일링하기
헤더는 사용자가 페이지의 성격과 이동 경로를 빠르게 파악하는 곳입니다. 로고는 왼쪽, 메뉴는 오른쪽에 두겠습니다.
.site-header {
background-color: #ffffff;
border-bottom: 1px solid #e5e7eb;
}
.header-inner {
display: flex;
justify-content: space-between;
align-items: center;
padding: 18px 0;
}
.logo {
font-size: 20px;
color: #166534;
}
.nav {
display: flex;
gap: 20px;
font-size: 15px;
}
.nav a:hover {
color: #16a34a;
}
.nav a:focus-visible {
outline: 3px solid #86efac;
outline-offset: 4px;
border-radius: 6px;
}여기서 핵심은 .header-inner에 display: flex;를 준 것입니다. 로고와 메뉴를 각각 손으로 밀어 배치하는 대신, 부모 요소에게 "안에 있는 것들을 가로로 정리해 줘"라고 맡기는 방식입니다.
justify-content: space-between;은 양쪽 끝으로 벌려 배치합니다. 회사 소개 페이지의 상단에서 자주 보는 구조입니다. 그리고 메뉴 링크에도 :focus-visible을 넣어 두면 키보드로 이동하는 사용자가 현재 어느 메뉴에 와 있는지 알아보기 쉽습니다.
히어로 배너 만들기
히어로 배너는 페이지에 들어왔을 때 가장 먼저 보이는 큰 소개 영역입니다. 여기서는 방문자가 "무엇을 하는 곳인지" 바로 알 수 있어야 합니다.
.hero {
padding: 96px 0;
background: linear-gradient(135deg, #dcfce7, #eff6ff);
}
.eyebrow {
margin: 0 0 12px;
color: #16a34a;
font-weight: 700;
}
.hero h1 {
max-width: 720px;
margin: 0;
font-size: 48px;
line-height: 1.15;
letter-spacing: -0.03em;
}
.hero-text {
max-width: 620px;
margin: 20px 0 32px;
font-size: 18px;
color: #4b5563;
}linear-gradient는 배경에 두 가지 이상의 색이 부드럽게 이어지도록 만드는 값입니다. 종이에 물감을 한쪽에서 다른 쪽으로 옅게 번지게 칠하는 느낌과 비슷합니다. 꼭 써야 하는 효과는 아니지만, 단색 배경보다 부드러운 첫인상을 줄 수 있습니다.
max-width는 긴 문장이 너무 넓게 퍼지지 않도록 막습니다. 화면이 넓다고 글도 끝없이 길어지면 읽기 어렵습니다. 좋은 소개 문구는 적당한 폭 안에서 읽혀야 합니다.
버튼을 공통 스타일로 만들기
페이지에는 "상담 문의하기"와 "이메일 보내기" 버튼이 있습니다. 둘 다 중요한 행동을 유도하므로 같은 class인 .primary-button으로 꾸밉니다.
.primary-button {
display: inline-block;
padding: 14px 22px;
background-color: #16a34a;
color: #ffffff;
border-radius: 999px;
font-weight: 700;
transition: background-color 0.2s ease, transform 0.2s ease;
}
.primary-button:hover {
background-color: #15803d;
transform: translateY(-2px);
}
.primary-button:focus-visible {
outline: 3px solid #86efac;
outline-offset: 3px;
}display: inline-block;은 링크를 버튼처럼 다루기 위한 설정입니다. 링크는 원래 글자처럼 흐르지만, 이렇게 바꾸면 안쪽 여백과 둥근 모서리를 안정적으로 줄 수 있습니다.
:focus-visible은 키보드로 버튼에 도착했을 때 표시되는 상태입니다. 마우스를 쓰지 않는 사용자도 현재 위치를 볼 수 있어야 하므로, 마지막 장에서도 접근성을 함께 챙깁니다.
카드 목록 정리하기
서비스나 강점을 보여 줄 때는 카드 목록이 유용합니다. 카드 하나에는 하나의 정보만 담는 것이 좋습니다. 너무 많은 설명을 넣으면 카드가 아니라 작은 문서가 됩니다.
.section {
padding: 80px 0;
}
.section h2,
.contact-section h2 {
margin: 0 0 28px;
font-size: 32px;
}
.card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.card {
padding: 28px;
background-color: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 20px;
box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
}
.card h3 {
margin: 0 0 10px;
font-size: 20px;
}
.card p {
margin: 0;
color: #6b7280;
}.card-grid에는 Grid를 사용했습니다. 카드가 여러 개이고 행과 열이 필요하기 때문입니다. Flexbox가 한 줄 정렬에 강하다면, Grid는 카드 목록처럼 바둑판 모양으로 정리할 때 편합니다.
gap은 카드 사이 간격입니다. 카드 각각에 margin을 주는 것보다 부모인 .card-grid에서 한 번에 관리하면 수정이 쉽습니다.
문의 영역으로 마무리하기
페이지의 마지막에는 사용자가 다음 행동을 할 수 있게 안내합니다. 소개만 하고 끝내면 방문자는 무엇을 해야 할지 모를 수 있습니다.
.contact-section {
padding: 80px 0;
text-align: center;
background-color: #064e3b;
color: #ffffff;
}
.contact-section p {
margin: 0 0 28px;
color: #d1fae5;
}text-align: center;는 문의 영역처럼 짧고 명확한 행동을 유도하는 구역에 잘 어울립니다. 단, 긴 본문 전체를 가운데 정렬하면 읽기 어려워질 수 있습니다. 가운데 정렬은 짧은 제목, 버튼, 안내 문구에 제한적으로 쓰는 것이 좋습니다.
모바일 화면에서 점검하기
PC에서 보기 좋아도 모바일에서 깨질 수 있습니다. 특히 3열 카드 목록은 작은 화면에서 너무 좁아집니다. 화면 폭이 768px 이하일 때 카드 목록을 1열로 바꾸겠습니다.
@media (max-width: 768px) {
.header-inner {
flex-direction: column;
gap: 12px;
}
.hero {
padding: 72px 0;
}
.hero h1 {
font-size: 36px;
}
.hero-text {
font-size: 16px;
}
.card-grid {
grid-template-columns: 1fr;
}
.section,
.contact-section {
padding: 64px 0;
}
}미디어 쿼리는 "특정 조건에서만 적용되는 CSS"입니다. 여기서는 화면이 768px보다 좁을 때만 안쪽 코드가 적용됩니다.
모바일 점검은 다음 순서로 해 보세요.
제목이 두세 줄로 자연스럽게 줄바꿈되는가?
카드가 너무 좁거나 답답하지 않은가?
버튼을 손가락으로 누르기 충분한 크기인가?
좌우로 불필요한 스크롤이 생기지 않는가?
메뉴 간격이 너무 붙어 있지 않은가?
브라우저 개발자 도구에서 모바일 화면을 흉내 낼 수 있습니다. 화면 폭을 줄였다 늘리며 어느 지점에서 답답해지는지 확인하세요. CSS 감각은 코드를 외워서보다, 화면을 바꿔 보며 "왜 이렇게 보이지?"를 관찰할 때 더 빨리 자랍니다.
완성 후 CSS 정리하기
페이지가 완성되면 CSS 파일을 한 번 정리합니다. 나중에 다시 수정할 사람은 미래의 나일 수도 있습니다.
추천하는 순서는 다음과 같습니다.
/* 1. 기본 설정 */
/* body, a, img, container */
/* 2. 헤더 */
/* site-header, logo, nav */
/* 3. 히어로 */
/* hero, eyebrow, hero-text */
/* 4. 공통 버튼 */
/* primary-button */
/* 5. 카드 섹션 */
/* section, card-grid, card */
/* 6. 문의 영역 */
/* contact-section */
/* 7. 반응형 */
/* @media */주석은 코드를 설명하는 짧은 메모입니다. 모든 줄에 달 필요는 없습니다. 큰 구역을 나누는 정도면 충분합니다. 주석이 너무 많으면 오히려 읽기 어렵습니다.
CSS를 정리할 때는 같은 색상과 같은 여백이 반복되는지도 봅니다. 예를 들어 초록색이 여러 곳에서 쓰인다면, 나중에는 CSS 변수로 묶을 수 있습니다.
:root {
--brand-color: #16a34a;
--text-color: #1f2937;
--soft-border: #e5e7eb;
}CSS 변수는 자주 쓰는 값을 이름표로 저장하는 방법입니다. 물건마다 가격표를 붙이는 대신, 공통 가격표 목록을 만들어 두는 것과 비슷합니다. 색상을 바꿔야 할 때 여러 줄을 찾아다니지 않고 한곳만 수정할 수 있습니다.
수정 전후 비교
수정 전 화면은 이런 상태입니다.
모든 글자가 기본 크기와 기본 색으로 보인다.
본문이 화면 끝까지 넓게 퍼진다.
메뉴, 배너, 카드의 구분이 약하다.
버튼이 일반 링크처럼 보여 클릭해야 하는지 헷갈린다.
모바일에서 카드 3개가 좁게 눌릴 수 있다.
CSS를 적용한 후에는 이렇게 바뀝니다.
본문 폭이 정리되어 읽기 편하다.
헤더, 히어로, 카드, 문의 영역의 역할이 분명하다.
브랜드 색상이 버튼과 강조 문구에 반복되어 통일감이 생긴다.
카드 목록이 Grid로 가지런히 배치된다.
모바일에서는 카드가 1열로 바뀌어 좁은 화면에서도 읽기 좋다.
좋은 CSS는 화면을 화려하게 만드는 기술만은 아닙니다. 사용자가 정보를 더 빨리 이해하고, 다음 행동을 더 쉽게 선택하도록 돕는 정리 기술입니다.
마지막 실습
이번 장의 코드를 그대로 따라 한 뒤, 아래 세 가지만 바꿔 보세요.
브랜드 색상 바꾸기
#16a34a를 파란색 계열#2563eb으로 바꿔 봅니다. 페이지의 인상이 어떻게 달라지는지 확인하세요.카드 개수 늘리기
article.card를 하나 더 복사해 4개의 카드로 만들어 봅니다. PC와 모바일에서 목록이 어떻게 정렬되는지 봅니다.히어로 문구 줄이기
제목을 더 짧게 바꿔 보세요. 긴 문장보다 짧은 문장이 첫 화면에서 더 힘 있게 보일 때가 많습니다.
마지막으로 스스로에게 세 가지 질문을 해 보세요.
이 CSS는 어떤 요소를 고르고 있는가?
어떤 속성을 바꿔서 화면이 달라졌는가?
PC와 모바일에서 모두 읽고 누르기 편한가?
이 세 질문에 답할 수 있다면 CSS를 다루는 기본 감각은 이미 갖춘 것입니다. 이제 템플릿을 수정하거나, 간단한 소개 페이지를 만들거나, 개발자에게 원하는 수정 사항을 설명할 때 훨씬 구체적으로 말할 수 있습니다.
이 노트는 보도·비평·교육·연구 목적으로 작성되었습니다. 저작권 문의가 있으시면 에서 알려주세요.