파이 차트를 만들기 위한 간단한 HTML과 CSS 코드를 제공합니다.
이 코드는 원형 그래프를 표시하여 파이 차트를 만듭니다.
<!DOCTYPE html>
<html>
<head>
<title>파이 차트 만들기</title>
<style>
/* 파이 차트 스타일 */
.chart {
width: 200px;
height: 200px;
background-color: #f5f5f5;
border-radius: 50%;
position: relative;
}
.slice {
width: 100%;
height: 100%;
clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
position: absolute;
}
.slice:nth-child(1) {
background-color: #3498db;
transform: rotate(30deg);
}
.slice:nth-child(2) {
background-color: #e74c3c;
transform: rotate(60deg);
}
.slice:nth-child(3) {
background-color: #2ecc71;
transform: rotate(90deg);
}
/* 추가 파이 차트 슬라이스 스타일 추가 가능 */
</style>
</head>
<body>
<h1>파이 차트 만들기</h1>
<!-- 파이 차트 컨테이너 -->
<div class="chart">
<!-- 파이 차트 슬라이스 -->
<div class="slice"></div>
<div class="slice"></div>
<div class="slice"></div>
<!-- 추가 파이 차트 슬라이스 추가 가능 -->
</div>
</body>
</html>
위 코드에서는 .chart 클래스를 가진 원형 그래프를 만들고, .slice 클래스를 가진 슬라이스를 추가하여 파이 차트를 만듭니다. 각 슬라이스는 다른 색상을 가지며 transform 속성을 사용하여 회전합니다.
'HTML 예제' 카테고리의 다른 글
| 텍스트 애니메이션 적용 (1) | 2023.12.08 |
|---|---|
| 간단한 메일 폼 (1) | 2023.12.08 |
| 화면에 움직이는 객체 추가 (1) | 2023.12.08 |
| 간단한 블로그 형식 (1) | 2023.12.08 |
| 동적으로 이미지 변경 (1) | 2023.12.08 |
