dr + (sun)eam = er
close
프로필 배경
프로필 로고

dr + (sun)eam = er

  • 분류 전체보기
    • Hello, World!
      • dr-sun-eamer
      • tr-sun-aveler
    • TIL
      • FrontEnd
      • BackEnd
      • Linux
      • Cloud
      • Java
      • C
      • DB
      • CS
      • etc
    • Algorithm
      • BOJ
      • programmers
      • LeetCode
      • SWEA
      • JUNGOL
      • SQL
    • ERROR
    • HRM
    • SSAFY
      • SSAFYcial
      • PJT
    • ESCAPE
    • ARCHIVE
  • 홈
  • Hello, world
  • TIL
  • ERROR
[React-JavaScript] 게이지바 만들기

[React-JavaScript] 게이지바 만들기

전체 값에서 현재 값의 비율을 나타내는 그래프를 만들고 싶었는데, 뭔가 모듈을 사용해야 하나 싶었지만 이런 간단한 형태는 div의 CSS값 조정으로 간단하게 할 수 있다는 걸 알았다. 전체 코드 import React, { useEffect, useState } from "react"; import styled from "styled-components";// 리액트의 styled-components 모듈 사용 // 테두리 코드 const StyledBase = styled.div` height: 26px;// 게이지 부분의 높이에 border 높이의 2배를 더해준다. border: 3px solid; margin-right: 15%;// 페이지에서 원하는 부분만큼 자유롭게 설정 margin-left: ..

  • format_list_bulleted TIL/FrontEnd
  • · 2022. 8. 14.
  • textsms
  • navigate_before
  • 1
  • navigate_next
인기 글
최근 글
전체 카테고리
  • 분류 전체보기
    • Hello, World!
      • dr-sun-eamer
      • tr-sun-aveler
    • TIL
      • FrontEnd
      • BackEnd
      • Linux
      • Cloud
      • Java
      • C
      • DB
      • CS
      • etc
    • Algorithm
      • BOJ
      • programmers
      • LeetCode
      • SWEA
      • JUNGOL
      • SQL
    • ERROR
    • HRM
    • SSAFY
      • SSAFYcial
      • PJT
    • ESCAPE
    • ARCHIVE
Copyright © 쭈미로운 생활 All rights reserved.
Designed by JJuum

티스토리툴바