유튜브 비디오에도 로딩 이미지를 추가했습니다.영상을 정지해뒀으면 로딩 이미지가 표시되지 않고 썸네일이 바로 표시됩니다. 개인적으로 전보다 훨씬 깔끔해진 느낌이네요. Masonry 아이콘을 만들어 리스트 스타일에 추가해뒀습니다.리스트 스타일 선택에 관한 내용은 이 포스트에 적어뒀습니다. 아이콘만 보고도 훨씬 직관적으로 무슨 스타일을 의미하는지 알 수 있게 됐습니다. Twice New Tab를 코딩하며 바닐라 JS에 관한 강의도 만드는 중인데, 이런 게 처음이라 마냥 쉽지만은 않네요. 지인을 포함한 몇 사람이 학교 등에서 css를 배우고도 flex box를 누구도 가르쳐주지 않았단 사실에 개탄을 금할 수 없어 flex box에 대한 강좌도 적어볼 생각입니다.flex box와 그에 사용되는 옵션, 흔히 발생하..

제일 큰 변화입니다. css 변수를 사용하다, 간단하게 스킨 설정에서 테마를 변경할 수 있도록 html의 class를 건드려서 테마가 변경되도록 했습니다. .element {color:#fff}.theme-something {color:#000} 뭐 이런 방식을 사용했는데, 이 방식을 사용하니 테마 하나 추가하자니 수정할 css가 산더미라 새로운 방식을 사용하게 됐습니다. 테마를 변경하면 html에 선언해둔 변수들의 내용만 달라지며, css는 이 포스트에 작성했던 방식처럼 한 줄만 써두면 됩니다. 모바일에서 imgur 이미지를 첨부하려니 힘들더라고요.그냥 imgur의 링크를 첨부하면 알아서 이미지로 변환해서 보여주도록 했습니다. 다음 페이지를 로딩할 때 나오는 이미지를 이 포스트에 작성한 이미지로 변경했..

BGM 플레이어 비디오를 클릭하면 비디오를 전체 화면으로 보여줍니다.다시 한 번 클릭하면 전체 화면이 취소됩니다. 키보드 이벤트도 추가했습니다.O - 랜덤 영상 재생P - 비디오 일시 정지 / 재생[ - 볼륨 업] - 볼륨 다운 새 글 알림 변경 기존엔 Masonry 리스트에서만 1px짜리 테두리로 새 글을 표시했는데, 이젠 모든 리스트에서 딸기로 새 글을 표시합니다. 자동 다크 모드 오후 6시부터 오전 7시까지 자동으로 블로그에 다크 모드가 적용됩니다.