반응형
HOW-TO/HTML & CSS
-
HTML에서 동그란 이미지(Rounded Image) 만들기HOW-TO/HTML & CSS 2023. 1. 10. 18:54
안녕하세요 HTML에서 아래 결과물과 같이 일반적인 정사각형의 이미지를 동그란 이미지로 만드는 법을 알아보겠습니다. 정말 간단합니다 ^^; Step 1) HTML에 이미지 tag를 추가하여 이미지를 위치시킵니다. Step 2) CSS 편집 border-radius 속성을 이용하여 이미지의 코너에 곡선을 줍니다. border-radius 속성을 50%하면 동그란 원이됩니다. img { border-radius: 50%; } 결과 끝! 출처 : W3School / HOW TO : How to - Rounded Images