[Image Design] 다양한 모양으로 사진 형태 수정하기(Fancy Border Radius Generator)

✨사진의 형태를 다양한 모양으로 바꾸기 ✨

 

border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;

 

안녕하세요. 사진 형태를 재미있는 모양으로 수정해주는 기발한 사이트 하나 소개해 드릴게요.
 

Fancy Border Radius Generator

 

이 사이트에서 마우스로 이미지를 원하는 모양으로 드래그 해주면 border-radius 프로퍼티 값을 자동으로 계산해서 알려준답니다. 값을 복사해서 vscode로 가져오면 직접 프레임을 만들지 않아도 쉽게 사진 테두리를 원하는 모양으로 자를 수 있어요. 사진이 정사각형에 가까울수록 내가 설정해 준 모양으로 만들기가 쉬워요.

 

☑️ HTML 코드

<img src="Images/pic13-6.jpg" alt="">

☑️ CSS 코드

<style>
    img {
        border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    }
</style>

 
 

border-radius 속성 값을 바꿔서 다양하게 활용해 보세요.

 

 

border-radius 값을 모두 50으로 설정해주면 원 모양으로 이미지를 잘라낼 수 있어요. 실제로 웹사이트나 SNS를 만들 때, 회원 프로필 사진에 가장 많이 사용되는 속성이 border-radius 프로퍼티입니다.