chart.js로 차트사용방법은 여기 클릭 -html코드 -css코드 .pie-chart1 { display:inline-block; width: 300px; height: 300px; background: conic-gradient(#8b22ff 0% 25%, #ffc33b 25% 56%, #21f3d6 56% 100%); border-radius: 50%; } 출처: gahyun-web-diary.tistory.com/93

display 속성은 요소를 어떻게 보여줄지를 결정합니다. 주로 4가지 속성값이 쓰이는데, 태그마다 기본값이 다릅니다. none : 보이지 않음 block : 블록 박스 inline : 인라인 박스 inline-block : block과 inline의 중간 형태 none 요소를 렌더링하지 않도록 설정합니다. visibility 속성을 hidden으로 설정한 것과 달리, 영역도 차지하지 않습니다. *visibility:hidden; 영역차지한 채 디스플레이만 안되는 상태 *display:none; 영역도 차지하지 않고 디스플레이도 안되는 상태 block ,,, 태그 등이 이에 해당됩니다. 기본적으로 가로 영역을 모두 채우며, block 요소 다음에 등장하는 태그는 줄바꿈이 된 것처럼 보입니다. 이는 wor..

position 속성 1. static 모든 태그들은 기본적으로 position:static 속성을 가짐(따로 position:static 속성을 주지 않아도 됨) 차례대로 왼쪽에서 오른쪽 위에서 아래로 쌓임 2. relative 기존 static이었을 때의 상태를 기준으로 왼쪽,오른쪽,위,아래 위치를 조절할 수 있음 relative는 각각의 방향을 기준으로 안쪽 방향으로 이동(바깥쪽 방향은 음수로 설정) 보통 태그는 같은 포지션이라면 나중에 나온 태그가 더 위쪽에 위치하지만 z-index속성으로 위쪽 태그 조절가능함 (z-index는 태그들이 겹칠 때 누가 더 위로 올라가는지를 결정하는 속성) 3. absolute relative가 position:static인 상태를 기준으로 움직였다면 absolut..

1. 100vh 부모에 상관없이 보이는 viewportheight에 100%를 주고 싶을 경우 사용 2. 100% container라는 클래스의 부모에 100%를 채우겠다는 의미 그럼 여기서 container의 부모는 body태그에 height를 100%주는 건 변화없음 body의 부모인 html에도 height를 100% 주어야 변경됨 참고 : 드림코딩 by 엘리 유튜브 https://www.youtube.com/watch?v=7neASrWEFEM&list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y&index=8