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

dr + (sun)eam = er

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

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.