웹 페이지에서 이미지를 원 모양으로 표시하고 싶다면 CSS의 border-radius 속성을 사용하면 됩니다. 이 속성은 요소 모서리의 둥근 정도를 조절하는데, 값을 50%로 설정하면 정사각형 이미지가 완전한 원 형태로 변환됩니다.
핵심 포인트
- border-radius: 50% — 이미지의 네 모서리를 절반만큼 둥글게 처리하여 원형을 만듭니다.
- border — 테두리를 함께 지정하면 원형 이미지의 윤곽이 더욱 선명하게 드러납니다.
- 완벽한 원을 얻으려면 이미지의 가로·세로 크기가 동일한 정사각형이어야 합니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
img {
border-radius: 50%;
border: 1px solid blue;
}
</style>
</head>
<body>
<h2>Coding Ground</h2>
<img src = "https://www.tutorialspoint.com/videotutorials/images/coding_ground_home.jpg" alt="Online Compiler" width="300" height="300">
</body>
</html>코드 설명
위 예제에서 <img> 요소에 border-radius: 50%를 적용하면 300×300 픽셀 크기의 이미지가 매끄러운 원형으로 표시됩니다. 여기에 border: 1px solid blue로 파란색 1픽셀 테두리를 추가하여 원의 외곽선을 한눈에 알아볼 수 있도록 강조했습니다.
프로필 사진, 아이콘, 갤러리 썸네일 등 다양한 UI 요소에서 원형 이미지는 자주 활용되므로, 이 간단한 기법 하나만 익혀 두어도 실무에서 유용하게 사용할 수 있습니다.