편집토론문서 역사

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

편집 요약 없음
편집 요약 없음
14번째 줄: 14번째 줄:
   box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
   box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
   overflow: hidden;
   overflow: hidden;
  color: white;
}
}


24번째 줄: 23번째 줄:
   top: 10px;
   top: 10px;
   bottom: 20px;
   bottom: 20px;
   border-left: 2px solid #bbb; /* Y축 */
   border-left: 2px solid #dd0000; /* Y축 */
}
}


33번째 줄: 32번째 줄:
   bottom: 20px;
   bottom: 20px;
   right: 10px;
   right: 10px;
   border-top: 2px solid #bbb; /* X축 */
   border-top: 2px solid #dd0000; /* X축 */
}
}


41번째 줄: 40번째 줄:
   left: 10px;
   left: 10px;
   font-size: 12px;
   font-size: 12px;
   color: #555;
   color: #fff;
}
}


88번째 줄: 87번째 줄:
   transform: translateX(-50%);
   transform: translateX(-50%);
   font-size: 12px;
   font-size: 12px;
   color: #333;
   color: #fff;
   white-space: nowrap;
   white-space: nowrap;
}
}

2024년 11월 30일 (토) 23:18 판

/* 그래프 전체 컨테이너 */
.stock-chart {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  width: 100%;
  max-width: 600px;
  height: 300px;
  background: #222;
  border: 1px 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: 10%; /* 막대 두께 */
  margin: 0 2%; /* 막대 간격 */
  background: linear-gradient(to top, #4caf50, #8bc34a); /* 기본 상승 색상 */
  border-radius: 5px 5px 0 0; /* 둥근 상단 모서리 */
  animation: growBar 1s ease-out forwards; /* 애니메이션 */
  transform-origin: bottom;
  height: 0; /* 애니메이션 초기값 */
}

/* 하락 막대 색상 */
.bar.negative {
  background: linear-gradient(to top, #f44336, #e57373);
}

/* 막대 호버 효과 */
.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); /* HTML의 '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;
}