이미지의 모서리를 둥글게 처리하면 더 세련된 디자인을 만들 수 있습니다.
CSS를 사용하여 이미지를 둥글게 만드는 방법을 단계별로 설명하겠습니다.
원형 이미지 만들기
이미지를 동그랗게 원형으로 만들려면 border-radius 값을 50%로 설정합니다.
이 경우 가로와 세로가 같은 비율일 때 완벽한 원형이 됩니다.
See the Pen 원형 이미지 만들기 by saladent (@saladent) on CodePen.
타원형 이미지 만들기
타원형 이미지를 만들기 위해서는 border-radius를 50%로 설정하면서 가로와 세로 비율을 다르게 지정합니다.
See the Pen 타원형 이미지 만들기 by saladent (@saladent) on CodePen.
위 코드를 적용하면 가로가 더 긴 타원형 이미지가 만들어집니다.
object-fit: cover;는 이미지의 왜곡을 방지합니다.