CSS로 둥근 이미지 만들기
웹 페이지에서 이미지의 모서리를 부드럽게 처리하고 싶다면 CSS의 border-radius 속성을 사용하면 됩니다. 이 속성은 요소 테두리의 둥글기를 조절하며, 지정하는 값이 클수록 모서리가 더 많이 둥글어집니다.
기본 예제
아래 예제에서는 img 태그에 border-radius: 20px;를 적용하여 이미지의 네 모서리를 20px만큼 둥글게 만들고, 파란색 실선 테두리도 함께 추가했습니다.
<!DOCTYPE html>
<html>
<head>
<style>
img {
border-radius: 20px;
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>완전한 원형 이미지 만들기
정사각형 이미지에 border-radius: 50%;를 적용하면 완전한 원형 이미지를 만들 수 있습니다. 프로필 사진이나 아이콘 디자인에 자주 활용되는 기법입니다.
img {
border-radius: 50%;
}이처럼 border-radius 속성 하나만으로 각진 이미지에 세련된 느낌을 더할 수 있으며, 픽셀(px) 단위와 백분율(%) 단위를 상황에 맞게 선택해 사용하면 됩니다.