PLAY/잡담6

• 

  블로그 CPU 개선 완료! 문제는 Keyframes 무한 루프였다... 그동안 블로그 꾸미기에 정신이 팔려 과도한 애니메이션(Keyframes)들과 스크립트를 적용하기에만 급급했었습니다. 하지만 어느 순간 맥북의 팬은 심하게 돌아가기 시작했고, 확인해보니 CPU의 점유율은 시간이 지날수록 100%에 가까워지기 시작한 것입니다. 사실 한 달 전부터 스크립트 어느 부분에 무한루프가 걸려서 그럴 것이라고 예상만 했지만, 쉽게 건들지 못하고 사실 귀찮기도 해서 방치했었습니다. 그렇게 몇몇 분이 제 블로그에 CPU가 과도하게 높다는 말씀을 해주셔서 오늘 하루 날 잡고 하나하나 스크립트와 CSS를 뜯어가 보기 시작했습니다. 막상 하나하나 제거하고 콘솔 로그를 확인해보니 스크립트에는 전혀 문제가 없던 것을 확인! 그렇다면 CSS인데.. 이게 CSS가 워낙 많다 보니 막막했었습니다. 그러.. PLAY/잡담 2022. 8. 26.

• 

  본문 구독 & 좋아요 컨테이너 속 SVG 꾸미기 티스토리 본문이 끝나는 하단부 구독 박스에 SVG 파일로 화살표 패치를 넣으면 좋겠다는 생각 해 곧장 Adobe illustrator를 열고 텍스트를 그리기 시작했습니다. 그렇게 완성한 SVG Path 각각의 텍스트의 크기 차이를 주고 나름 입체적(?)일 수 있게 배치를 해줬는데 사실 영 마음에 들지는 않네요ㅋㅋ SVG Path를 완성했으니 HTML에 컬러와 애니메이션을 같이 적용시켜 주기만 하면 됩니다. 요 선택된 박스가 마우스 hover되면 만들어준 SVG Path가 입체적으로 퉁 하고 튀어 오르게 만들어 주고 싶었습니다. SVG 요소에 transition을 넣고, transform scale을 통해 확대 될 수 있도록 해주었습니다. 이렇게만 하면 심심하니 transform-origin 으로 화살표가.. PLAY/잡담 2022. 7. 27.

• 

  본문 명언 박스 및 블로그 카운팅 디자인 완료! 본문 명언 박스 및 블로그 카운팅 디자인 티스토리 게시글 본문 상단에 명언 박스를 인파님 블로그를 보면서 너무 마음에 들어 적용하기 위해 랜덤 텍스트 라는 오픈소스를 찾고, 블로그에 맞게 디자인을 변경했습니다. 우선, 랜덤 하게 텍스트가 표현될 수 있도록 자바스크립트를 넣어주고 그에 맞는 컨테이너들을 배치 해준 뒤에 CSS로 디자인을 입혔습니다. 또, 랜덤 버튼을 생성해서 사용자가 다음 글을 볼 수 있도록 버튼을 만들어서 박스 하단부에 넣었습니다. 그렇게 완성한 디자인! 상단에도 보이듯이 이런 식으로 디자인을 완성했고, 다크 모드일 때와 라이트 모드일 때의 색상을 다르게 주어 이질감 없게 변경해줬습니다. 그리고 블로그 메인 페이지의 카운터 부분도 디자인을 조금 손봤습니다. 우선 아이맥 부분을 SVG 형태.. PLAY/잡담 2022. 7. 27.

• 

  (티스토리) 사이드바 배경음악 컨트롤박스 꾸미기 완료 오늘은 현제 제 블로그 사이드바에 있는 배경음악 컨트롤박스를 꾸며보았습니다. 미넴 스킨에 기본적으로 배경음악 컨트롤 박스가 있는데, 미루고 미루다 이번에 디자인을 변경했습니다. 사이드바 배경음악 컨트롤박스 꾸미기 원래 미넴 스킨에 있는 기본 디자인은 이랬습니다. 심플하고 이쁘지만, 제가 원하는 디자인과는 조금 거리가 멀었어요! 그래서 시작한 디자인 변경 프로젝트(?) 일단 원하는 큰 틀은 컨트롤 박스 위에 CD가 있고, 그게 돌아가면 좋겠다고 생각했고 바로 실행에 들어갔습니다. 전체적인 큰 틀을 완성시키고, 애매했던 볼륨 조절 버튼을 Adobe Illustrator로 만들어서 넣어줬습니다. 그리고 원래는 재생 유무에 상관없이 CD가 계속 Spin 했었습니다. 저는 이게 조금 걸리더라고요. 그래서 재생 버.. PLAY/잡담 2022. 6. 28.

• 

  (기록) 로딩화면을 위해 GIF 이미지를 처음으로 직접 만들어 보았다..! 로딩 화면을 위해 GIF를 직접 만들어본 후기 티스토리를 스킨을 꾸미면서 로딩 화면 아이콘을 찾던 도중 아래 gif 이미지를 발견했는데, 나름 쓸만하다고 생각했었어요 그런데 문제점은 배경색! 이 배경색을 없애기 위해 gif 파일을 개별 파일로 뜯고, 그 뜯은 파일을 png 형식으로 바꾸고, 바꾼 png 파일을 캐릭터 하나 빼고 크롭 하고, 그 파일 120장을 전부 포토샵으로 불러와서 하나하나 배경색을 지워줬습니다. 진짜.. 개고생 했습니다. 근데 결과는 스킨이 흰색일 때는 아무런 문제가 없지만 저는 검은색을 사랑하는 사람으로서 검은 배경일 때 테두리에 하얀색 도트가 너무 많이 찍힌다는 게 너무너무너무너무 걸렸습니다. 그래도 만들었으니 사용하려고 했죠. 근데 이게 사람 마음이라는 게 한번 정 떨어지니까 바.. PLAY/잡담 2022. 3. 18.

• 

  (잡담) iOS 15.4 유니버설 업데이트 출격! 오늘 드디어 iOS 15.4, iPadOS 15.4, macOS Monterey 12.3이 업데이트되었다는 소문을 듣고 급하게 아이폰, 아이패드, 맥북 소프트웨어 업데이트 창을 켰습니다. !!!!!!!! 우옥우 옥!! 드디어 15.4버전이 나왔다니.. 제가 이토록 반기는 이유는 바로 '유니버설 컨트롤' 기능과 마스크 쓰고 Face ID 잠금 해제 기능 ㅠㅠㅠㅠ 안타깝게도 마스크를 쓴 상태로 Face ID 기능을 사용하려면 iPhone12 이후 모델만 가능합니다. 유니버설 컨트롤은 트랙패드 나 키보드로 Mac 하고 iPad를 제어할 수 있는 기능인데, 이게 대박인 게 뭐냐면요... 저는 아이패드는 블루투스 키보드, 맥북은 매직 키보드와 트랙패드 항상 이렇게 세 개를 가지고 다녔다 이 말이죠 ㅠㅠㅠ 그런데 .. PLAY/잡담 2022. 3. 15.