아름다운 모양의 아바타 - CSS 전용 - 단계별 자습서

아름다운 모양의 아바타를 만드는 방법에 대한 튜토리얼입니다.

HTML

HTML의 경우 "avatar"클래스가 있는 div 요소 하나만 필요합니다.

<div class="avatar"></div>

CSS

CSS의 경우 "아바타"클래스에만 스타일을 지정합니다.

너비와 높이는 150x100픽셀로 설정하고 테두리는 5픽셀의 단색 갈색으로 설정합니다.

Google에서 찾은 임의의 이미지 하나를 배경 이미지로 설정하겠습니다.

이제 이미지를 중앙에 배치하고 background-position 속성을 center로 설정하고 background-size를 커버로 설정하여 전체 영역을 덮습니다.

이 아름다운 모양을 만들기 위해 테두리 반경을 20%/50%로 설정합니다. 즉, 20%는 수평 반경에 적용되고 50%는 수직 반경에 적용됩니다.

.avatar {
    width: 150px;
    height: 100px;
    border: 5px solid #AA771C;
    background-image: url('https://media.istockphoto.com/photos/beautiful-afro-girl-with-curly-hairstyle-picture-id1381221247?b=1&k=20&m=1381221247&s=170667a&w=0&h=4bt0RFmAffRSqrKa2N2vJAFbWgmbRg7x-0ziJaRtpxE=');
    background-size: cover;
    background-position: center;
    border-radius: 20% / 50%;
}

그리고 그게 다야.

비디오 자습서 및 전체 코드here를 찾을 수 있습니다.

읽어 주셔서 감사합니다. ❤️