틀:연습장:아바투르너마저/1/styles.css: 두 판 사이의 차이

편집 요약 없음
(내용을 ".mw-body { background-size: cover; background-repeat: no-repeat; background-position: center; background-attachment: fixed; }"(으)로 바꿈)
태그: 대체됨
 
1번째 줄: 1번째 줄:
/* 그래프 전체 컨테이너 */
.mw-body {
.stock-chart {
   background-size: cover;
  position: relative;
   background-repeat: no-repeat;
  display: flex;
   background-position: center;
  align-items: flex-end;
   background-attachment: fixed;
  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;
}
}

2025년 1월 4일 (토) 02:55 기준 최신판

.mw-body {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
}