지금까지 배운 CSS는 재료였습니다. 이제는 그 재료로 실제 웹페이지에서 자주 만나는 요소를 손에 익게 다뤄 볼 차례입니다. 링크는 클릭하기 쉬워야 하고, 리스트는 읽기 편해야 하며, 이미지는 화면을 망가뜨리지 않아야 합니다. 버튼은 눌러 보고 싶어야 하고, 폼은 입력하기 편해야 합니다.
이 챕터의 목표는 단순합니다. 배운 속성을 눈에 보이는 UI에 적용해 보면서 CSS를 "아는 상태"에서 "쓸 수 있는 상태"로 바꾸는 것입니다.
먼저 기억할 세 가지 원칙
실전에서 요소를 꾸밀 때는 예쁘게 만드는 것만큼 "쓰기 쉬운가?"도 중요합니다.
링크는 링크답게 보여야 합니다. 클릭 가능한지 헷갈리면 사용자는 멈칫합니다.1
버튼은 동작이 느껴져야 합니다. 마우스를 올렸을 때와 눌렀을 때 변화가 있어야 자연스럽습니다.
폼은 입력 흐름이 편해야 합니다. 여백, 테두리, 포커스 상태가 정리되어 있으면 훨씬 덜 답답합니다.4
보기 좋은 디자인은 결국 사용하기 좋은 디자인과 연결됩니다.
링크 꾸미기
링크는 웹의 기본 중의 기본입니다. 그런데 초보자가 가장 자주 하는 실수도 여기 있습니다. 밑줄을 무조건 지워 버리거나, 일반 텍스트와 거의 같은 색으로 만들어서 링크가 안 보이게 만드는 일이죠. 링크는 사용자가 "여기를 누르면 이동하겠구나" 하고 바로 알아차릴 수 있어야 합니다.1
가장 많이 쓰는 상태는 다음 다섯 가지입니다.
기본 상태:
a방문 전 상태:
a:link방문 후 상태:
a:visited마우스를 올린 상태:
a:hover키보드 포커스 상태:
a:focus클릭 중 상태:
a:active
실무에서는 hover만 챙기고 focus를 잊는 경우가 많습니다. 하지만 키보드로 이동하는 사용자에게는 focus가 길잡이 역할을 합니다.
예제: 읽기 쉬운 본문 링크
<p>
자세한 내용은
<a href="#" class="text-link">CSS 선택자 정리</a>를 참고하세요.
</p>.text-link {
color: #1d4ed8;
text-decoration: underline;
text-underline-offset: 3px;
font-weight: 600;
}
.text-link:hover {
color: #1e40af;
}
.text-link:focus {
outline: 3px solid #93c5fd;
outline-offset: 2px;
border-radius: 4px;
}
.text-link:active {
opacity: 0.8;
}여기서 핵심은 세 가지입니다. 첫째, 링크 색을 본문과 구분했습니다. 둘째, 밑줄을 남겨 두었습니다. 셋째, 포커스 표시를 분명히 했습니다.
예제: 버튼처럼 보이는 링크
페이지 이동용 링크는 가끔 버튼처럼 보이게 만들기도 합니다. 예를 들어 "상품 보기", "회원가입하러 가기" 같은 경우입니다.
<a href="#" class="cta-link">무료로 시작하기</a>.cta-link {
display: inline-block;
padding: 0.75rem 1rem;
background-color: #2563eb;
color: white;
text-decoration: none;
border-radius: 10px;
font-weight: 700;
}
.cta-link:hover {
background-color: #1d4ed8;
}
.cta-link:focus {
outline: 3px solid #93c5fd;
outline-offset: 3px;
}이 경우에도 역할은 여전히 링크입니다. 클릭하면 다른 페이지나 다른 위치로 이동해야 자연스럽습니다. 반대로 모달 열기, 좋아요 누르기, 폼 제출처럼 "동작"을 실행한다면 <button>이 더 알맞습니다.
리스트 꾸미기
리스트는 생각보다 자주 등장합니다. 메뉴, 체크리스트, 공지 목록, 가격표, 단계 설명까지 전부 리스트로 만들 수 있습니다. 기본 불릿이나 숫자를 그대로 써도 괜찮지만, 상황에 따라 조금만 손보면 훨씬 정돈된 느낌이 납니다.
리스트를 다룰 때 가장 먼저 알아둘 속성은 list-style-type, list-style-position, list-style-image, 그리고 축약형인 list-style입니다.2
예제: 기본 리스트를 깔끔하게 정리하기
<ul class="feature-list">
<li>설치 없이 바로 사용 가능</li>
<li>모바일 화면에도 자연스럽게 대응</li>
<li>초보자도 이해하기 쉬운 구조</li>
</ul>.feature-list {
padding-left: 1.25rem;
color: #334155;
}
.feature-list li {
margin-bottom: 0.5rem;
line-height: 1.6;
}이 정도만 해도 숨이 좀 트입니다. 기본 리스트를 무조건 지울 필요는 없습니다. 내용 중심의 문서라면 불릿을 남기는 편이 읽기 더 좋을 때가 많습니다.
예제: 불릿 모양 바꾸기
.feature-list {
list-style-type: square;
}이렇게 하면 동그라미 대신 네모 불릿이 나옵니다. 순서가 있는 리스트라면 decimal, upper-roman, lower-alpha 같은 값도 쓸 수 있습니다.
예제: 메뉴용 리스트 만들기
내비게이션 메뉴처럼 보이게 만들려면 기본 불릿과 여백을 지우는 일이 많습니다.
<nav>
<ul class="menu">
<li><a href="#">홈</a></li>
<li><a href="#">강의</a></li>
<li><a href="#">블로그</a></li>
<li><a href="#">문의</a></li>
</ul>
</nav>.menu {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: 1rem;
}
.menu a {
display: block;
padding: 0.5rem 0.75rem;
color: #0f172a;
text-decoration: none;
border-radius: 8px;
}
.menu a:hover {
background-color: #e2e8f0;
}여기서 list-style: none; margin: 0; padding: 0; 조합은 아주 자주 등장합니다.1 브라우저 기본 여백을 지우고, 직접 간격을 설계하겠다는 뜻입니다.
예제: 커스텀 불릿 느낌 내기
list-style-image로 이미지 마커를 줄 수도 있지만, 위치를 더 세밀하게 잡고 싶다면 배경 이미지를 쓰는 방식이 더 다루기 쉬울 때가 많습니다.12
<ul class="check-list">
<li>HTML과 CSS만으로 구성</li>
<li>복잡한 라이브러리 없이 시작</li>
<li>작은 프로젝트에 바로 적용 가능</li>
</ul>.check-list {
list-style: none;
margin: 0;
padding: 0;
}
.check-list li {
padding-left: 1.5rem;
margin-bottom: 0.75rem;
background-image: url("check.svg");
background-repeat: no-repeat;
background-position: left 0.3rem;
background-size: 1rem;
}불릿 대신 작은 아이콘이 들어가면 서비스 소개, 장점 목록, 기능 설명 같은 곳에서 꽤 그럴듯한 분위기가 납니다.
이미지 꾸미기
이미지는 웹페이지의 분위기를 한 번에 바꾸지만, 동시에 레이아웃을 가장 쉽게 무너뜨리는 요소이기도 합니다. 큰 이미지를 그대로 넣으면 부모 박스를 뚫고 나가 버리기도 하죠.
초보자에게 가장 먼저 추천하는 기본값은 이것입니다.
img {
max-width: 100%;
height: auto;
}이 두 줄만 있어도 이미지는 부모 너비를 넘지 않고, 비율도 자연스럽게 유지됩니다.
예제: 카드 안의 이미지
<div class="card">
<img src="product.jpg" alt="노트북과 커피가 놓인 책상">
<h3>집중이 잘 되는 작업 환경</h3>
<p>심플한 구성으로 눈이 편한 디자인을 소개합니다.</p>
</div>.card {
max-width: 360px;
border: 1px solid #e5e7eb;
border-radius: 16px;
overflow: hidden;
background-color: white;
}
.card img {
display: block;
width: 100%;
height: 220px;
object-fit: cover;
}
.card h3,
.card p {
margin: 0;
padding: 0 1rem 1rem;
}
.card h3 {
padding-top: 1rem;
}object-fit: cover;는 박스 크기에 맞춰 이미지를 꽉 채우는 속성입니다. 일부가 잘릴 수는 있지만, 카드 썸네일처럼 일정한 비율이 중요할 때 정말 유용합니다.
이미지 스타일링에서 자주 쓰는 조합
border-radius: 둥근 이미지 만들기box-shadow: 카드 느낌 살리기display: block: 이미지 아래의 어색한 빈틈 줄이기object-fit: cover: 썸네일 비율 맞추기
이미지는 장식이면서 동시에 정보이기도 합니다. 그래서 alt 속성도 꼭 챙겨야 합니다. 보이지 않아도 중요한 설명은 들어 있어야 합니다.
버튼 꾸미기
버튼은 사용자가 가장 직접적으로 상호작용하는 요소입니다. 그래서 "예쁜가?"보다 "눌러도 될 것처럼 보이는가?"가 먼저입니다. 적당한 여백, 분명한 색 대비, 그리고 눌렀을 때의 반응이 필요합니다.3
예제: 가장 많이 쓰는 기본 버튼
<button class="btn">저장하기</button>
<button class="btn btn--secondary">취소</button>.btn {
border: none;
padding: 0.8rem 1rem;
border-radius: 10px;
background-color: #2563eb;
color: white;
font-size: 1rem;
font-weight: 700;
cursor: pointer;
transition: background-color 0.2s ease, transform 0.1s ease;
}
.btn:hover {
background-color: #1d4ed8;
}
.btn:active {
transform: translateY(1px);
}
.btn:focus {
outline: 3px solid #93c5fd;
outline-offset: 2px;
}
.btn--secondary {
background-color: #e2e8f0;
color: #0f172a;
}
.btn--secondary:hover {
background-color: #cbd5e1;
}버튼은 padding, background-color, border-radius, cursor, hover, focus만 잘 잡아도 완성도가 크게 올라갑니다.3
링크와 버튼, 헷갈리지 않게 정리하기
다른 페이지로 이동하면 링크
현재 페이지에서 어떤 동작을 실행하면 버튼
겉모습은 비슷해도 역할은 다름
이 구분을 잘해 두면 HTML도 깔끔해지고, 나중에 접근성이나 자바스크립트를 붙일 때도 훨씬 편합니다.
폼 꾸미기
폼은 사용자와 웹페이지가 대화하는 창구입니다. 그런데 기본 폼은 솔직히 말하면 조금 투박합니다. 문제는 투박한 것보다도, 어떤 칸에 무엇을 써야 하는지 한눈에 안 들어올 때입니다. 그래서 폼 스타일링은 "장식"보다 "정리"에 가깝습니다.
입력창을 다룰 때 자주 쓰는 속성은 width, padding, border, border-radius, background-color, color, box-sizing, :focus입니다.4
예제: 기본 입력 폼 꾸미기
<form class="signup-form">
<label for="name">이름</label>
<input type="text" id="name" placeholder="홍길동">
<label for="email">이메일</label>
<input type="email" id="email" placeholder="[email protected]">
<label for="message">메시지</label>
<textarea id="message" placeholder="궁금한 점을 남겨 주세요"></textarea>
<button type="submit" class="btn">보내기</button>
</form>.signup-form {
max-width: 480px;
}
.signup-form label {
display: block;
margin-bottom: 0.4rem;
font-weight: 600;
color: #0f172a;
}
.signup-form input,
.signup-form textarea,
.signup-form select {
width: 100%;
padding: 0.85rem 1rem;
margin-bottom: 1rem;
border: 1px solid #cbd5e1;
border-radius: 10px;
background-color: white;
color: #0f172a;
box-sizing: border-box;
font: inherit;
}
.signup-form textarea {
min-height: 140px;
resize: vertical;
}
.signup-form input:focus,
.signup-form textarea:focus,
.signup-form select:focus {
border-color: #2563eb;
outline: 3px solid #bfdbfe;
}여기서 특히 중요한 것은 box-sizing: border-box;입니다. width: 100%를 줬는데 패딩과 테두리 때문에 삐져나오는 일을 줄여 줍니다. 그리고 font: inherit;를 넣으면 입력창만 유독 다른 글꼴로 보이는 어색함도 줄일 수 있습니다.
체크박스와 라디오 버튼은 이렇게 정리해 보자
체크박스와 라디오 버튼은 처음부터 화려하게 커스텀하려고 하면 오히려 복잡해집니다. 초보자라면 먼저 "정렬"과 "간격"부터 잡는 것이 좋습니다.
<div class="option-row">
<input type="checkbox" id="agree">
<label for="agree">이메일 소식 받기에 동의합니다</label>
</div>.option-row {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 1rem;
}
.option-row input {
width: 1rem;
height: 1rem;
}
.option-row label {
margin-bottom: 0;
}정교한 커스텀 체크박스는 나중에 배워도 늦지 않습니다. 우선은 줄 맞춤이 먼저입니다.
실전 예제: 카드형 뉴스레터 섹션 만들기
이제 링크, 리스트, 이미지, 버튼, 폼을 한 번에 묶어 보겠습니다. 이런 예제는 블로그, 강의 사이트, 서비스 소개 페이지에서 아주 자주 볼 수 있습니다.
HTML
<section class="newsletter-card">
<img src="newsletter.jpg" alt="뉴스레터를 읽는 사람의 작업 공간">
<div class="newsletter-content">
<a href="#" class="category-link">주간 CSS 뉴스</a>
<h2>실무 감각을 키우는 CSS 뉴스레터</h2>
<p>
너무 어렵지 않게, 하지만 너무 얕지도 않게.
매주 한 번씩 꼭 필요한 CSS 팁을 보내드립니다.
</p>
<ul class="benefit-list">
<li>실전 예제 중심 설명</li>
<li>반응형과 UI 패턴 요약</li>
<li>초보자도 이해 가능한 난이도</li>
</ul>
<form class="inline-form">
<label for="newsletter-email">이메일</label>
<input type="email" id="newsletter-email" placeholder="[email protected]">
<button type="submit" class="btn">구독하기</button>
</form>
</div>
</section>CSS
.newsletter-card {
max-width: 760px;
margin: 2rem auto;
background-color: white;
border: 1px solid #e5e7eb;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}
.newsletter-card img {
display: block;
width: 100%;
height: 260px;
object-fit: cover;
}
.newsletter-content {
padding: 1.5rem;
}
.category-link {
display: inline-block;
margin-bottom: 0.75rem;
color: #1d4ed8;
text-decoration: none;
font-weight: 700;
}
.category-link:hover {
text-decoration: underline;
}
.newsletter-content h2 {
margin: 0 0 0.75rem;
font-size: 1.5rem;
}
.newsletter-content p {
margin: 0 0 1rem;
color: #475569;
line-height: 1.7;
}
.benefit-list {
margin: 0 0 1.5rem;
padding-left: 1.25rem;
}
.benefit-list li {
margin-bottom: 0.5rem;
}
.inline-form label {
display: block;
margin-bottom: 0.5rem;
font-weight: 600;
}
.inline-form input {
width: 100%;
padding: 0.85rem 1rem;
margin-bottom: 0.75rem;
border: 1px solid #cbd5e1;
border-radius: 10px;
box-sizing: border-box;
}
.inline-form input:focus {
border-color: #2563eb;
outline: 3px solid #bfdbfe;
}이 예제에서 우리가 한 일은 거창하지 않습니다. 그동안 배운 여백, 색상, 테두리, 둥근 모서리, 링크 상태, 리스트 간격, 버튼 스타일, 폼 포커스를 한 군데에 모아 적용했을 뿐입니다. 그런데 바로 이 과정이 중요합니다. CSS는 속성 하나를 외우는 것보다, 여러 속성을 목적에 맞게 조합하는 능력이 더 중요하기 때문입니다.
자주 하는 실수
실전에서 초보자가 자주 겪는 문제를 미리 알고 있으면 시행착오를 줄일 수 있습니다.
링크의 밑줄과 포커스 표시를 모두 지워서 클릭 가능한지 알기 어렵게 만드는 경우
이미지에 고정 너비만 주고
max-width: 100%를 빼서 모바일 화면에서 넘치는 경우리스트의 기본 여백을 지우지 않고 직접 여백을 더해 간격이 이상해지는 경우
입력창에
width: 100%를 줬는데box-sizing: border-box가 없어 부모 밖으로 튀어나오는 경우버튼의
hover만 만들고focus를 빼서 키보드 사용자 흐름이 끊기는 경우
이런 문제는 대단한 고급 기술이 없어서 생기는 게 아닙니다. 대부분 기본기를 실제 요소에 붙여 보지 않아서 생깁니다.
마무리
링크, 리스트, 이미지, 버튼, 폼은 웹페이지의 단골손님입니다. 이 요소들을 자연스럽게 꾸밀 수 있으면 작은 랜딩 페이지, 블로그, 소개 페이지, 회원가입 화면까지 훨씬 수월하게 만들 수 있습니다.
중요한 것은 "멋진 속성"을 많이 아는 것이 아닙니다. 요소의 역할을 이해하고, 필요한 속성을 적당히 조합해, 보기 좋고 쓰기 쉬운 상태로 만드는 것입니다. CSS 실력은 바로 이런 순간에 자랍니다.
다음 챕터에서는 왜 어떤 스타일은 잘 적용되고, 어떤 스타일은 뜻대로 먹지 않는지 살펴봅니다. 캐스케이드, 상속, 특이성을 이해하면 CSS가 갑자기 말을 안 듣는 이유를 훨씬 잘 설명할 수 있게 됩니다.
참고
이 노트는 보도·비평·교육·연구 목적으로 작성되었습니다. 저작권 문의가 있으시면 에서 알려주세요.