흩어진 속성을 하나의 화면 요소로 묶기
지금까지는 글자색, 배경색, 여백, 테두리처럼 CSS 속성을 하나씩 살펴보았습니다. 이번 장에서는 이 속성들을 실제 화면 요소에 조합해 봅니다.
웹사이트에서 자주 만나는 요소는 생각보다 비슷합니다.
클릭을 유도하는 버튼
이미지와 설명을 담는 카드
소식이나 이벤트를 알리는 배너
이 셋을 꾸며 보면 CSS가 단순한 암기 목록이 아니라, 화면을 만드는 도구처럼 느껴지기 시작합니다. 핵심은 "어떤 요소를 고르고, 무엇을 바꿀지" 차례대로 생각하는 것입니다.
AI 생성 이미지
기본 링크를 버튼처럼 보이게 만들기
웹페이지에서 버튼처럼 보이는 것 중에는 실제 <button> 태그가 아니라 <a> 링크인 경우가 많습니다. 예를 들어 "자세히 보기", "구매하러 가기", "무료 상담 신청" 같은 문구는 다른 페이지로 이동해야 하므로 링크로 만드는 일이 흔합니다.
먼저 HTML은 이렇게 생겼다고 해 보겠습니다.
<a href="#" class="btn">자세히 보기</a>현재 이 링크는 보통 파란 글자와 밑줄로 보입니다. 우리가 원하는 결과는 다음과 같습니다.
배경색이 있는 버튼처럼 보인다.
글자는 흰색으로 보인다.
안쪽 여백이 있어 누르기 편해 보인다.
모서리가 살짝 둥글다.
밑줄은 사라진다.
CSS는 한 번에 많이 외우려고 하지 말고, 아래 순서로 생각하면 됩니다.
.btn {
display: inline-block;
background-color: #2563eb;
color: white;
padding: 12px 20px;
border-radius: 8px;
text-decoration: none;
font-weight: 700;
}여기서 display: inline-block;은 링크를 버튼처럼 다루기 위한 준비입니다. 기본 링크는 문장 속 글자처럼 행동합니다. 문장 속 글자는 위아래 여백을 크게 주기 어렵습니다. inline-block은 "글자처럼 옆으로 놓이지만, 작은 상자처럼 크기와 여백을 가질 수 있게 한다" 정도로 이해하면 됩니다.
각 속성의 역할은 분명합니다.
background-color: 버튼의 배경색color: 버튼 글자색padding: 글자와 버튼 가장자리 사이의 안쪽 여백border-radius: 모서리의 둥근 정도text-decoration: none: 링크 밑줄 제거font-weight: 글자를 조금 더 또렷하게 강조
버튼을 만들 때는 먼저 색, 여백, 모서리, 밑줄 제거만 챙겨도 충분히 버튼답게 보입니다.
마우스를 올렸을 때 반응하게 만들기
버튼은 가만히 있을 때보다, 마우스를 올렸을 때 살짝 반응하면 더 클릭 가능한 요소처럼 느껴집니다. 이때 사용하는 것이 :hover입니다.
hover는 "마우스가 요소 위에 올라와 있는 상태"를 뜻합니다. 매장 진열대에서 상품을 집어 들기 직전, 조명이 살짝 강조되는 느낌과 비슷합니다.
.btn:hover {
background-color: #1d4ed8;
}이렇게 쓰면 마우스를 버튼 위에 올렸을 때 배경색이 조금 더 진해집니다. 변화가 너무 갑작스럽다면 transition을 추가할 수 있습니다.
.btn {
display: inline-block;
background-color: #2563eb;
color: white;
padding: 12px 20px;
border-radius: 8px;
text-decoration: none;
font-weight: 700;
transition: background-color 0.2s;
}transition은 변화가 일어나는 시간을 정하는 속성입니다. 불이 한 번에 확 켜지는 대신, 아주 짧게 부드럽게 밝아지는 느낌이라고 생각하면 됩니다.
여기서는 배경색이 0.2초 동안 바뀌게 했습니다. 짧지만 화면이 덜 딱딱해 보입니다.
카드 디자인은 정보를 정리하는 상자다
카드는 쇼핑몰 상품, 블로그 글, 강의 소개, 팀원 프로필처럼 여러 정보를 하나로 묶을 때 사용합니다. 카드의 목적은 화려하게 꾸미는 것이 아니라, 사용자가 정보를 빠르게 훑어볼 수 있게 정리하는 것입니다.
이번에는 이미지, 제목, 설명, 버튼이 들어간 카드를 만들어 보겠습니다.
<div class="card">
<img src="product.jpg" alt="무선 이어폰" class="card-img">
<div class="card-body">
<h3>무선 이어폰</h3>
<p>가볍고 편안한 착용감으로 하루 종일 사용할 수 있습니다.</p>
<a href="#" class="btn">상품 보기</a>
</div>
</div>카드를 꾸밀 때는 바깥 상자부터 정리합니다.
.card {
width: 320px;
border: 1px solid #e5e7eb;
border-radius: 16px;
overflow: hidden;
background-color: white;
}width는 카드의 너비입니다. border는 카드 영역을 구분하는 선입니다. border-radius는 모서리를 둥글게 만듭니다.
overflow: hidden;은 카드 밖으로 삐져나오는 부분을 숨기는 속성입니다. 둥근 액자 안에 사진을 넣었을 때, 사진 모서리도 액자 모양에 맞게 잘리는 것과 비슷합니다. 이미지가 카드 위쪽에 들어갈 때 자주 사용합니다.
이제 이미지를 카드 너비에 맞춥니다.
.card-img {
width: 100%;
display: block;
}이미지에 width: 100%;를 주면 카드 너비에 맞게 채워집니다. display: block;은 이미지 아래에 생길 수 있는 작은 빈틈을 줄여 줍니다. 이미지를 "문장 속 그림"이 아니라 "한 줄을 차지하는 그림"처럼 다루는 설정입니다.
다음은 카드 안쪽 내용입니다.
.card-body {
padding: 20px;
}
.card-body h3 {
margin: 0 0 8px;
font-size: 20px;
}
.card-body p {
margin: 0 0 16px;
color: #4b5563;
line-height: 1.6;
}카드가 정돈되어 보이려면 내부 여백이 중요합니다. card-body에 padding을 주면 제목, 설명, 버튼이 카드 테두리에 너무 붙지 않습니다.
제목과 설명의 margin은 요소 사이 간격을 조절합니다. 제목 아래에는 조금, 설명 아래에는 버튼과의 간격을 위해 조금 더 여백을 둡니다. 이처럼 카드 안에서는 padding으로 안쪽 공간을 만들고, margin으로 요소 사이 간격을 조절한다고 생각하면 됩니다.
그림자는 살짝만 넣기
카드에는 그림자를 넣을 수도 있습니다. CSS에서는 box-shadow를 사용합니다. box-shadow는 상자 뒤에 생기는 그림자입니다. 종이 카드를 책상 위에 올려놓았을 때 생기는 아주 옅은 그림자와 비슷합니다.
.card {
width: 320px;
border: 1px solid #e5e7eb;
border-radius: 16px;
overflow: hidden;
background-color: white;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}그림자는 강할수록 고급스러워지는 것이 아닙니다. 너무 진하면 화면이 지저분해 보이고, 카드가 떠 있는 것처럼 어색할 수 있습니다.
처음에는 아래 기준으로 시작해 보세요.
그림자 색은 검정에 투명도를 낮게 준다.
rgba(0, 0, 0, 0.08)처럼 0.1보다 작은 값부터 사용한다.중요한 카드 한두 개에만 그림자를 쓰고, 모든 요소에 남발하지 않는다.
상단 공지 배너 만들기
배너는 사용자의 시선을 빠르게 모으는 영역입니다. 쇼핑몰의 "오늘만 무료 배송", 회사 사이트의 "서비스 점검 안내", 블로그의 "새 글 업데이트"처럼 짧은 메시지를 보여 줄 때 많이 씁니다.
상단 공지 배너 HTML은 간단합니다.
<div class="notice-banner">
오늘 오후 6시까지 주문하면 무료 배송됩니다.
</div>CSS는 배경색, 글자색, 정렬, 여백부터 적용합니다.
.notice-banner {
background-color: #fef3c7;
color: #92400e;
text-align: center;
padding: 12px 16px;
font-weight: 700;
}text-align: center;는 글자를 가운데 정렬합니다. 배너처럼 한 줄 메시지를 강조할 때 자주 사용합니다. padding은 배너의 위아래 높이를 만듭니다. 배너가 너무 얇으면 급하게 붙여 놓은 문구처럼 보이고, 너무 두꺼우면 본문을 밀어내는 느낌이 강해집니다.
공지 배너에는 보통 강한 원색보다 연한 배경색이 잘 어울립니다. 배경은 연하게, 글자는 진하게 두면 읽기 쉽고 부담이 적습니다.
이벤트 배너는 한 문장과 버튼을 함께 배치하기
이벤트 배너는 공지 배너보다 조금 더 적극적으로 행동을 유도합니다. 예를 들어 "신규 회원 20% 할인" 문구와 "쿠폰 받기" 버튼을 함께 보여 줄 수 있습니다.
<div class="event-banner">
<div>
<strong>신규 회원 20% 할인</strong>
<p>가입 후 첫 구매에 사용할 수 있는 쿠폰을 드립니다.</p>
</div>
<a href="#" class="banner-btn">쿠폰 받기</a>
</div>.event-banner {
background-color: #eff6ff;
border: 1px solid #bfdbfe;
border-radius: 16px;
padding: 24px;
}
.event-banner strong {
display: block;
font-size: 22px;
margin-bottom: 8px;
}
.event-banner p {
margin: 0 0 16px;
color: #4b5563;
}
.banner-btn {
display: inline-block;
background-color: #2563eb;
color: white;
padding: 10px 16px;
border-radius: 999px;
text-decoration: none;
font-weight: 700;
}border-radius: 999px;처럼 아주 큰 값을 주면 알약 모양 버튼이 됩니다. 정확히 999px이어야 하는 것은 아닙니다. 버튼 높이보다 충분히 큰 값을 주면 양쪽 끝이 둥글게 보입니다.
이 배너는 아직 가로 배치를 사용하지 않았습니다. 다음 장부터 배치를 다루면 문구는 왼쪽, 버튼은 오른쪽에 놓는 방식도 만들 수 있습니다. 지금은 색, 여백, 테두리만으로도 충분히 배너의 분위기를 만들 수 있다는 점에 집중하면 됩니다.
강조는 적게 쓸수록 더 잘 보인다
버튼, 카드, 배너를 꾸미다 보면 색도 더 넣고 싶고, 그림자도 크게 주고 싶고, 모서리도 많이 둥글게 만들고 싶어집니다. 하지만 화면은 강조가 많을수록 오히려 덜 읽힙니다.
디자인을 망치지 않기 위한 기준은 단순합니다.
강조색은 1개를 중심으로 쓴다. 버튼, 링크, 중요한 숫자에 같은 색을 반복하면 화면이 정리됩니다.
둥근 모서리는 비슷한 값으로 맞춘다. 카드마다 4px, 16px, 40px이 섞이면 통일감이 줄어듭니다.
그림자는 아주 연하게 시작한다. 진한 그림자는 특별히 띄워야 하는 요소에만 사용합니다.
여백은 색보다 먼저 확인한다. 색을 바꾸기 전에 요소가 너무 붙어 있지 않은지 보는 것이 좋습니다.
버튼은 가장 중요한 행동에 먼저 준다. 한 화면에 강한 버튼이 여러 개 있으면 사용자는 무엇을 눌러야 할지 망설입니다.
CSS를 잘 쓴다는 것은 많은 효과를 넣는다는 뜻이 아닙니다. 필요한 차이를 만들고, 불필요한 장식을 줄이는 일에 가깝습니다.
실습: 홍보 카드 하나 완성하기
아래 HTML을 준비해 보세요.
<div class="promo-card">
<p class="label">이번 주 추천</p>
<h3>비개발자를 위한 CSS 입문</h3>
<p class="desc">버튼, 카드, 배너를 직접 꾸미며 CSS의 기본 감각을 익혀 보세요.</p>
<a href="#" class="promo-btn">수업 보기</a>
</div>이제 CSS를 적용합니다.
.promo-card {
width: 340px;
padding: 24px;
border: 1px solid #e5e7eb;
border-radius: 16px;
background-color: white;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}
.label {
display: inline-block;
margin: 0 0 12px;
padding: 6px 10px;
border-radius: 999px;
background-color: #dbeafe;
color: #1d4ed8;
font-size: 14px;
font-weight: 700;
}
.promo-card h3 {
margin: 0 0 10px;
font-size: 22px;
}
.desc {
margin: 0 0 20px;
color: #4b5563;
line-height: 1.6;
}
.promo-btn {
display: inline-block;
background-color: #2563eb;
color: white;
padding: 12px 18px;
border-radius: 10px;
text-decoration: none;
font-weight: 700;
transition: background-color 0.2s;
}
.promo-btn:hover {
background-color: #1d4ed8;
}수정 전에는 제목, 설명, 링크가 단순히 위아래로 놓인 글 목록처럼 보입니다. 수정 후에는 추천 라벨, 제목, 설명, 버튼이 하나의 카드 안에 정리됩니다. 사용자는 "무엇을 읽고, 어디를 눌러야 하는지" 더 빨리 이해할 수 있습니다.
마지막으로 아래 항목을 바꿔 보며 화면 변화를 확인해 보세요.
.promo-card의padding을16px,32px로 바꿔 보기.promo-btn의background-color를 브랜드 색으로 바꿔 보기box-shadow의 투명도0.06을0.15로 바꿔 차이 보기border-radius를4px,24px로 바꿔 분위기 비교하기
이번 장의 목표는 완벽한 디자인을 만드는 것이 아닙니다. 버튼, 카드, 배너가 어떤 속성들의 조합으로 만들어지는지 눈으로 확인하는 것입니다. 이제 CSS 속성은 따로 떨어진 단어가 아니라, 실제 화면을 고치는 도구가 됩니다.
이 노트는 보도·비평·교육·연구 목적으로 작성되었습니다. 저작권 문의가 있으시면 에서 알려주세요.