📸 2022-07-15

🔥 오늘 어디에 도전해보셨고, 무엇을 배우셨나요?

• 블로그에 강의 정보 확인할 수 있는 페이지 추가

🌊 학습하시면서 궁금하신 부분이나, 어려웠던 점은 뭘까요?

프로그레스바가 여러 개라서 그런지 페이지를 켜두면 노트북 발열도 심하다.. 아직 발열의 원인이 이 페이지인지 확실하지 않아서 지켜보다가 계속 이러면 빼야겠다ㅠㅠ

---

블로그 페이지 추가

올해 상반기에 궁금했던 기술 또는 기법에 대한 강의를 많이 구입했다. 유데미, 인프런, 드림코딩, 노마드코더 등 여기 저기서 강의를 사둔 후에 미루고 있는게 대다수다. 그래서 하나의 페이지에서 여러 사이트의 강의로 이동하고 내 학습 진도를 간략하게나마 확인하고 관리하기 위해 새로운 페이지를 만들었다.

nav에 메뉴 추가

1. 좌측 nav에 메뉴를 등록하기 위해서 /_tabs 내부에 원하는 메뉴명의 md 파일을 추가한다. 난 study라는 메뉴명을 추가하기 위해서 study.md를 추가하고 다른 파일을 참고해서 내용을 수정했다.

2. /_layouts/study.html를 추가한다. 그리고 페이지에서 보여줄 내용으록 구성한다.

그러고 빌드하면 sidebar.html에서 동적으로 메뉴를 추가해준다. 동시에 새 페이지로 이동할 route 작업되어 /study로 이동하고 2번의 html파일의 내용을 불러온다.

프로그레스바 추가

진도율을 표시하기 위해 차트를 찾다가 가독성은 별로지만 귀여운 프로그레스 바를 찾았다.

강의마다 진도율을 표시하고 싶은데 CSS에서 percentage를 계산할 때 사용하는 변수가 정해져있어 진도율마다 class를 추가했다.

.tube .liquid .percentage {
  position: absolute;
  height: var(--tube-percentage);
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 80;
  transition: 1s;
}

.tube .liquid .percentage-50 {
  position: absolute;
  height: 4%;
  width: 50%;
  bottom: 0;
  left: 0;
  z-index: 80;
  transition: 1s;
}

그러다보니 중복이 너무 많아졌는데 이걸 어떻게 줄여야할지 CSS를 잘 몰라서 더 찾아봐야할거 같다…

학습 상태 표시

학습하기 전, 학습 중, 학습 완료로 상태를 나누어 강의마다 표시해두었다.

참고 상태별 뱃지

강의별 기술 태그 추가

이건 아직 구상하지 못했지만 각 강의마다 무엇을 배울 수 있는지 태그 형식으로 추가하려고 한다.

이 블로그의 기본 구성에 태그가 있어서 그걸 참고하려고 한다.