요소의 모서리를 둥글게 처리하는 라운드 코너(Rounded Corner) 효과를 나타내는 6개의 예제를 제공하겠습니다. 각 예제는 주석과 함께 상세히 설명되며, HTML과 CSS 코드로 구성되어 있습니다.
예제 1: 모든 모서리 라운드 코너
<!DOCTYPE html>
<html>
<head>
<style>
/* 모든 모서리 라운드 코너 */
.rounded-corner {
width: 200px;
height: 100px;
background-color: #3498db;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="rounded-corner"></div>
</body>
</html>
예제 2: 특정 모서리 라운드 코너
<!DOCTYPE html>
<html>
<head>
<style>
/* 특정 모서리 라운드 코너 */
.top-left-rounded {
width: 200px;
height: 100px;
background-color: #e74c3c;
border-top-left-radius: 20px;
}
</style>
</head>
<body>
<div class="top-left-rounded"></div>
</body>
</html>
예제 3: 모서리 라운드 코너 다르게 설정
<!DOCTYPE html>
<html>
<head>
<style>
/* 모서리 라운드 코너 다르게 설정 */
.custom-rounded {
width: 200px;
height: 100px;
background-color: #27ae60;
border-top-left-radius: 30px;
border-bottom-right-radius: 50px;
}
</style>
</head>
<body>
<div class="custom-rounded"></div>
</body>
</html>
예제 4: 원 모양 라운드 코너
<!DOCTYPE html>
<html>
<head>
<style>
/* 원 모양 라운드 코너 */
.circle-rounded {
width: 100px;
height: 100px;
background-color: #f1c40f;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="circle-rounded"></div>
</body>
</html>
예제 5: 상단 모서리 라운드 코너
<!DOCTYPE html>
<html>
<head>
<style>
/* 상단 모서리 라운드 코너 */
.top-rounded {
width: 200px;
height: 100px;
background-color: #9b59b6;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
}
</style>
</head>
<body>
<div class="top-rounded"></div>
</body>
</html>
예제 6: 모서리 라운드 코너 조합
<!DOCTYPE html>
<html>
<head>
<style>
/* 모서리 라운드 코너 조합 */
.combined-rounded {
width: 200px;
height: 100px;
background-color: #34495e;
border-top-left-radius: 20px;
border-bottom-right-radius: 40px;
border-top-right-radius: 10px;
}
</style>
</head>
<body>
<div class="combined-rounded"></div>
</body>
</html>
'CSS' 카테고리의 다른 글
| 미디어 쿼리: 미디어 쿼리를 사용한 반응형 디자인. (0) | 2023.12.23 |
|---|---|
| 그라데이션 배경: 그라데이션 배경 적용. (0) | 2023.12.23 |
| 텍스트 강조 효과: 텍스트 강조 효과 추가. (0) | 2023.12.23 |
| 박스 그림자 효과: 박스에 그림자 효과 추가. (0) | 2023.12.23 |
| 투명도 조절: 요소의 투명도 설정. (0) | 2023.12.23 |