웹 디자인에서 프로필 사진이나 갤러리 이미지를 부드러운 곡선 형태로 표현하고 싶을 때가 많습니다. CSS의 border-radius 속성을 활용하면 별도의 이미지 편집 없이도 간단하게 둥근 이미지나 완전한 원형 이미지를 만들 수 있습니다.
핵심 원리: border-radius 속성
border-radius는 요소의 모서리 둥글기를 지정하는 CSS 속성입니다. 값을 50%로 설정하면 정사각형 이미지가 완전한 원(circle) 형태로 변환됩니다. 값이 작을수록 덜 둥글고, 클수록 더 둥근 형태가 됩니다.
예제 코드
다음은 CSS로 둥근 원형 이미지를 만드는 전체 코드입니다.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img {
border-radius: 50%;
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<h1>Rounded Images Example</h1>
<img src="https://i.picsum.photos/id/271/400/400.jpg">
</body>
</html>코드 설명
- border-radius: 50%; — 이미지의 네 모서리를 50%만큼 둥글게 처리하여 원형으로 만듭니다.
- width: 300px; — 이미지의 가로 크기를 300픽셀로 고정합니다.
- height: 300px; — 이미지의 세로 크기를 300픽셀로 고정합니다. 가로와 세로 크기가 같아야 완벽한 원이 됩니다.
실행 결과
위 코드를 실행하면 다음과 같이 가장자리가 매끄럽게 둥근 원형 이미지가 출력됩니다.
참고 팁
원형이 아닌 살짝 둥근 느낌만 원한다면 border-radius: 10px;처럼 픽셀 단위의 작은 값을 사용하면 됩니다. 또한 이미지가 정사각형이 아닌 경우 object-fit: cover; 속성을 함께 사용하면 이미지가 찌그러지지 않고 자연스럽게 잘려서 원형으로 표시됩니다.