|
|
| 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;
| |
| } | | } |