아이콘과 이미지는 글자보다 먼저 눈에 들어오지만, 크기와 정렬이 조금만 어긋나도 화면 전체가 삐뚤어 보입니다. 이번에는 아이콘을 글자에 맞추고, 이미지가 레이아웃을 망가뜨리지 않게 잡는 CSS를 코드로 정리하겠습니다. 아래 예제는 그대로 복사해 확인할 수 있습니다.
10.1 아이콘을 글자 높이에 맞추기
아이콘을 텍스트 옆에 그냥 두면 베이스라인이 어긋나 살짝 떠 보입니다. 흔한 초기 상태는 이렇습니다.
.label svg {
width: 20px;
height: 20px;
}
인라인 요소라 아래로 처지죠. 글자와 아이콘을 flex로 한 줄에 세우고 가운데로 맞추면 깔끔해집니다.
.label {
display: inline-flex;
align-items: center;
gap: 6px;
}
.label svg {
width: 1em;
height: 1em;
flex: none;
}
크기를 1em으로 두면 글자 크기가 바뀌어도 아이콘이 같이 따라 커집니다. gap이 아이콘과 글자 사이 간격을 일정하게 잡아 줍니다.
10.2 SVG 색을 글자색과 묶기
아이콘 색을 매번 지정하면 테마가 바뀔 때마다 놓치는 곳이 생깁니다. currentColor로 글자색을 그대로 물려받게 하면 관리가 한결 쉬워집니다.
.btn {
color: #2563eb;
}
.btn svg {
fill: currentColor;
}
.btn:hover {
color: #1d4ed8;
}
버튼 색만 바꿔도 아이콘이 함께 짙어집니다. hover 하나로 글자와 아이콘이 한 몸처럼 반응합니다.
10.3 이미지 비율 고정하기
썸네일 높이를 안 정해 두면 이미지가 로드되는 순간 아래 내용이 밀려 내려갑니다. aspect-ratio로 자리를 미리 잡아 줍니다.
.thumb {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
border-radius: 8px;
}
비율이 고정되니 이미지가 늦게 떠도 레이아웃이 튀지 않습니다. object-fit: cover가 비율을 유지한 채 칸을 꽉 채워 찌그러짐을 막습니다.
10.4 늘어남과 잘림 구분하기
object-fit 값 하나로 이미지가 완전히 달라집니다. 인물 사진을 억지로 늘리면 얼굴이 뭉개지죠.
.avatar {
width: 64px;
height: 64px;
border-radius: 50%;
object-fit: cover;
object-position: center top;
}
cover는 비율을 지키며 넘치는 부분만 잘라 냅니다. object-position으로 인물 사진에서 얼굴이 잘리지 않게 위쪽을 기준으로 맞췄습니다.
10.5 해상도별로 다른 이미지 주기
큰 화면엔 선명한 이미지를, 작은 화면엔 가벼운 이미지를 내려보내면 로딩이 빨라집니다. srcset이 브라우저에게 선택지를 줍니다.
<img
src="card-480.jpg"
srcset="card-480.jpg 480w,
card-960.jpg 960w"
sizes="(max-width: 600px) 100vw, 480px"
alt="여행 카드 표지">
브라우저가 화면 폭과 픽셀 밀도를 보고 알맞은 파일을 고릅니다. 좁은 화면에서 굳이 큰 파일을 받지 않으니 데이터도 아낍니다.
10.6 늦게 불러오고 자리 지키기
화면 밖 이미지는 나중에 불러오면 첫 로딩이 가벼워집니다. 다만 width와 height를 알려 줘야 자리 밀림이 안 생깁니다.
<img
src="photo.jpg"
width="800" height="600"
loading="lazy"
decoding="async"
alt="해질녘 항구">
loading="lazy"는 스크롤이 가까워질 때 이미지를 받습니다. 크기 속성이 비율을 알려 주니 이미지가 뜨기 전에도 빈 칸이 정확히 예약됩니다.
10.7 이미지가 없을 때 대비하기
이미지가 깨지거나 늦게 오면 빈 흰 칸이 흉하게 남습니다. 배경색과 텍스트 대체를 준비해 두면 그 순간이 덜 어색합니다.
.thumb {
background: #f3f4f6;
color: #9ca3af;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
}
이미지가 오기 전엔 옅은 회색 판이 자리를 지키고, alt 텍스트가 그 위에 조용히 보입니다. 화면이 무너지지 않고 버텨 줍니다.
10.8 아이콘 버튼에 여백과 판 주기
아이콘만 있는 버튼은 눌리는 영역이 작아 손끝이 자주 빗나갑니다. 보이는 아이콘은 작아도 판은 넉넉히 잡습니다.
.icon-btn {
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
color: #4b5563;
}
.icon-btn:hover {
background: #f3f4f6;
}
아이콘은 20px라도 판이 40px라 누르기 편하고, hover 배경이 지금 어디에 손이 있는지 알려 줍니다.
10.9 화면 폭에 따라 다른 그림 쓰기
모바일에선 세로 사진이, 데스크톱에선 가로 사진이 어울릴 때가 있습니다. picture로 화면 폭마다 아예 다른 이미지를 고르게 합니다.
<picture>
<source media="(min-width: 768px)" srcset="wide.jpg">
<img src="tall.jpg" alt="캠핑장 전경">
</picture>
넓은 화면은 wide.jpg를, 좁은 화면은 기본 img의 tall.jpg를 받습니다. 단순히 줄이는 게 아니라 구도 자체를 바꿔 줄 수 있습니다.
10.10 배경 이미지 꽉 채우기
히어로 영역처럼 글자를 얹을 배경은 img보다 background로 다루는 편이 편합니다. 비율을 지키며 칸을 채우게 잡습니다.
.hero {
min-height: 320px;
background-image: url("cover.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
background-size: cover가 영역을 빈틈없이 채우고, center가 사진의 가운데를 기준으로 잘라 냅니다. 그 위에 제목이나 버튼을 겹쳐 올리기 좋습니다.
10.11 정리
아이콘은 1em과 currentColor로 글자에 붙여 두고, 이미지는 aspect-ratio와 object-fit으로 자리와 비율을 먼저 잡는 것이 핵심입니다. 크기 속성과 lazy 로딩까지 챙기면 화면이 뜨는 동안에도 흔들리지 않습니다. 그림은 잘 앉혀 두기만 해도 절반은 성공입니다.