틀:연습장:아바투르너마저/1/styles.css 문서 원본 보기

/* 그래프 전체 컨테이너 */
.stock-chart {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  width: 100%;
  max-width: 600px;
  height: 300px;
  background: #222;
  border: 3px solid #dd0000;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

/* X축과 Y축 */
.stock-chart::before {
  content: '';
  position: absolute;
  left: 40px;
  top: 10px;
  bottom: 20px;
  border-left: 2px solid #dd0000; /* Y축 */
}

.stock-chart::after {
  content: '';
  position: absolute;
  left: 40px;
  bottom: 20px;
  right: 10px;
  border-top: 2px solid #dd0000; /* X축 */
}

/* Y축 눈금 레이블 */
.y-label {
  position: absolute;
  left: 10px;
  font-size: 12px;
  color: #fff;
}

.y-label[data-value="100"] {
  bottom: calc(90% + 20px); /* 100%에서 패딩값 고려 */
}

.y-label[data-value="50"] {
  bottom: calc(45% + 20px);
}

.y-label[data-value="0"] {
  bottom: 20px;
}

/* 막대 기본 스타일 */
.bar {
  position: relative;
  width: 7%; /* 막대 두께 */
  margin: 0 1%; /* 막대 간격 */
  background: #139212; /* 기본 상승 색상 */
  animation: growBar 1s ease-out forwards; /* 애니메이션 */
  transform-origin: bottom;
  height: 0; /* 애니메이션 초기값 */
}

/* 하락 막대 색상 */
.bar.negative {
  background: #F60A08;
}

/* 막대 호버 효과 */
.bar:hover {
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
  transform: scale(1.05);
  transition: all 0.2s ease-in-out;
}

/* 막대 위 데이터 라벨 */
.bar::after {
  content: attr(data-label); 
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  color: #fff;
  white-space: nowrap;
}

/* 트렌드 라인 */
.trendline {
  position: absolute;
  width: 100%;
  height: 2px;
  background: #2196f3; /* 파란색 트렌드 라인 */
  top: 50%; /* 데이터에 따라 조정 */
  left: 0;
}

/* 애니메이션 */
@keyframes growBar {
  to {
    transform: scaleY(1); /* 최종 크기 */
  }
}

/* 툴팁 효과 */
.bar:hover::before {
  content: attr(data-tooltip); /* HTML 'data-tooltip' 속성 활용 */
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 10px;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  border-radius: 5px;
  font-size: 12px;
  white-space: nowrap;
}