이미지를 원형으로 자르는 방법에 대한 상세한 설명과 예제를 제공하겠습니다. 또한 CSS와 HTML 코드를 통합하여 제공하겠습니다. 각 부분을 상세히 설명하고 마지막에 티스토리용 태그를 한 줄로 나열하겠습니다.
1. 이미지 원형으로 자르기:
이미지를 원형으로 자르려면 다음 단계를 따릅니다.
단계 1: 이미지 업로드
먼저 이미지를 웹 페이지에 업로드합니다. 이미지 파일은 웹 서버 또는 외부 이미지 호스팅 서비스에서 제공될 수 있습니다.
단계 2: CSS 스타일링
이미지를 원형으로 자르기 위해 CSS를 사용합니다. 다음과 같이 CSS 스타일을 적용합니다.
예제1
<!DOCTYPE html>
<html>
<head>
<style>
.circular-image {
width: 200px;
height: 200px;
border-radius: 50%; /* 원형 모양으로 이미지 자르기 */
overflow: hidden; /* 이미지를 원형으로 자를 때 넘치는 부분을 숨김 */
}
</style>
</head>
<body>
<div class="circular-image">
<img src="your-image.jpg" alt="원형 이미지">
</div>
</body>
</html>
예제 2:
<!DOCTYPE html>
<html>
<head>
<style>
.circular-image {
width: 150px;
height: 150px;
border-radius: 50%;
overflow: hidden;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* 그림자 효과 추가 */
}
</style>
</head>
<body>
<div class="circular-image">
<img src="image2.jpg" alt="원형 이미지 2">
</div>
</body>
</html>
예제 3:
<!DOCTYPE html>
<html>
<head>
<style>
.circular-image {
width: 250px;
height: 250px;
border-radius: 50%;
overflow: hidden;
border: 5px solid #fff; /* 흰색 테두리 추가 */
}
</style>
</head>
<body>
<div class="circular-image">
<img src="image3.jpg" alt="원형 이미지 3">
</div>
</body>
</html>
'CSS' 카테고리의 다른 글
| 리스트 스타일 변경: 목록 요소의 스타일 변경. (0) | 2023.12.23 |
|---|---|
| 그림자 효과: 요소에 그림자 효과 추가. (0) | 2023.12.23 |
| 여백 조절: 요소 주위 여백(padding) 설정. (0) | 2023.12.23 |
| 테두리 추가: 요소 주위에 테두리 추가. (0) | 2023.12.23 |
| 이미지 크기 조절: 이미지의 가로와 세로 크기 조절. (0) | 2023.12.23 |