CSS만으로 원형 아바타 이미지 만드는 방법

웹사이트에서 프로필이나 댓글 영역에 자주 사용되는 아바타 이미지는 CSS만으로도 손쉽게 만들 수 있습니다. 핵심은 border-radius 속성으로, 이미지에 50% 값을 적용하면 정사각형 이미지가 완전한 원형으로 변환됩니다.

아래는 CSS를 활용해 아바타 이미지를 구현하는 예제입니다.

예제 코드

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.avatarImage {
    vertical-align: middle;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    border:3px solid black;
    margin: 10px;
}
</style>
</head>
<body>
<h1>아바타 이미지 예제</h1>
<img src="https://images.pexels.com/photos/2128807/pexels-photo-2128807.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="avatarImage">
<img src="https://images.pexels.com/photos/1222271/pexels-photo-1222271.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="avatarImage">
</body>
</html>

코드 설명

width / height: 아바타의 크기를 지정합니다. 가로와 세로를 동일하게 설정해야 완벽한 원형이 됩니다.
border-radius: 50%: 모서리를 요소 크기의 절반만큼 둥글게 처리하여 원형 효과를 만듭니다.
border: 이미지 테두리에 검정색 3px 선을 추가해 아바타를 더욱 돋보이게 합니다.
vertical-align: middle: 이미지 주변의 텍스트와 나란히 배치될 때 수직 중앙 정렬을 유지합니다.
margin: 여러 아바타 사이에 적절한 간격을 부여합니다.

실행 결과

위 코드를 실행하면 두 개의 원형 아바타 이미지가 검정 테두리와 함께 화면에 표시됩니다.

CSS만으로 원형 아바타 이미지 만드는 방법

응용 팁

테두리 색상을 변경하거나 box-shadow 속성을 추가하면 더욱 세련된 아바타 디자인을 연출할 수 있습니다. 또한 반응형 웹을 고려한다면 고정 픽셀 대신 width: 250px; max-width: 100%;처럼 유동적인 크기를 적용하는 것도 좋은 방법입니다.