어제 오늘 내일

[HTML/CSS] 이미지 모서리 둥글게, 동그란 프로필 이미지 만들기 ( border-radius) 본문

IT/HTML&CSS

[HTML/CSS] 이미지 모서리 둥글게, 동그란 프로필 이미지 만들기 ( border-radius)

hi.anna 2022. 8. 4. 06:31

 

네모난 이미지 파일을

CSS 속성을 이용하여

동그란 원 모양으로 보이도록 조정할 수 있습니다.

 

border-radius

이 속성은 요소의 테두리를 둥글게 하는 단축 속성입니다.

속성 값은, 각 테두리의 꼭짓점을 나타내는 반지름 길이(px, em 등)나 퍼센트입니다.

원래는 각 모서리의 변마다 8개까지 값을 지정할 수 있는 속성이지만,

모든 모서리의 반지름이 같은 원을 표현하고자 할 때는,

한 개의 속성값으로 충분합니다.

 

border-radius에 대한 자세한 설명은 지난 포스팅을 참조하세요.

[HTML/CSS] div 테두리 모서리 둥글게 만들기 (border-radius)

 

[HTML/CSS] div 테두리 모서리 둥글게 만들기 (border-radius)

border-radius 30px 30% 30px, 10px 30px, 10px, 50px 10px, 20px, 30px, 40px #ex1 { background-color : green; border-radius: 30px; } #ex2 { background-color : red; border-radius: 30%; } #ex3 { backgrou..

hianna.tistory.com

 

 

이미지를 동그랗게 만들기 예제 (프로필 이미지 만들기)

my_radius.html

<!DOCTYPE html>
<html>

<head>
    <title>이미지</title>
    <link rel="stylesheet" href="css/my_radius.css" />
</head>

<body>
    <div class="my_div">
        <img src="./img/puppy_.jpg">
        <p>원본</p>
    </div>
    <div>
        <img src="./img/puppy_.jpg" class="radius_img_1">
        <p>border-radius: 50%</p>
    </div>
    <div>
        <img src="./img/puppy_.jpg" class="radius_img_2">
        <p>border-radius: 20% </p>
    </div>

</body>

</html>

 

my_radius.css

.radius_img_1 {
    border-radius: 50%;
}

.radius_img_2 {
    border-radius: 20%;
}

div {
    width: 300px;
    float: left;
    border: 1px solid;
}

 

결과

먼저, 정사각형의 이미지를 준비합니다.

 

border-radius: 50%;

원을 그리기 위해서는 border-radius를 50%로 설정합니다.

 

border-radius: 20%;

테두리의 곡률을 조정할 수 있습니다.

 

 

 

 

 

반응형

'IT > HTML&CSS' 카테고리의 다른 글

[HTML/CSS] 무지개 그라데이션 (linear-gradient)  (0) 2022.08.06
[HTML/CSS] 배경색 그라데이션 넣기 (linear-gradient())  (0) 2022.08.05
[HTML/CSS] 이미지 색상 반전 시키기 - invert()  (0) 2022.08.03
[HTML/CSS] 이미지 흑백으로 변환하기 - grayscale()  (0) 2022.08.02
[HTML/CSS] 텍스트에 마우스 오버시 이미지 보이기  (0) 2022.08.01
공유하기 링크
'IT/HTML&CSS' Related Articles more
Comments