블로그 리모델링 3. - bootstrap, 치환자, 진행 목록

결국 이것 저것 하다가, '아니 잠깐, 그 사이트 처럼 주요 기능들을 한번 구현해 보는게 목적이잖아' 라는 생각과 함께. Bootstrap 의 도움을 받아 1차적으로 뼈대는 전부 설계해서 배치 해 보았습니다.

 

빠르고 신속하게 하는 편이, 그냥 혼자서 전부 구축하고 설계하는 사람보다도 더 유능하게 보일테니까요.

 

이제 문제가 있다면, 치환자를 적용하는 건데.

사실 이건 지금 필자가 알지 못하는 미지의 영역이라 막연히 두려워 할 뿐, 그리 어려워 보이진 않습니다.

 

기존의 블로그 html 창을 참고하면서 배치를 해 볼까요?

아니면 tistory 의 github 페이지를 보면서 참고해 볼까요?

 

일단은 후자를 해보고, 안되면 전자의 방식으로 접근해보고자 합니다.

---

원래의 목적이었던 레이아웃 설계 및 각 주요 카테고리별 링크 인식도 완료. 사실 이전에 카카오톡 UI 를 html과 css로 재현하는 과정에서 상당한 홍역을 치뤘기에 이 부분은 더는 문제가 되지 않았습니다.

 

그리고 전체 카테고리를 아예 별도의 독립 페이지로 옮겨서 한눈에 시각적으로 다 볼 수 있게 한다는 그런 목적이었는데...예전부터 보이던 ##title## 은 치환자를 의미했습니다.

 

일종의 장고에 있는 function 또는 문서별 연결 역할을 하는 '그 것' 처럼, 티스토리의 백엔드 부분과 직접 올리는 스킨과 연결 해 주는 역할을 하고 있던 것 이 었습니다.

 

Bootstrap 에 마음에 드는 여러 기능이 있으니, 차라리 기존의 티스토리 스킨의 무난한 것에서 좀 더 보기좋게 꾸며보자.

저는 그렇게 계획을 바꿔서 진행하기로 했습니다. 치환자의 개념은 알겠지만, 아직까지는 이걸 어떻게 써야하나? 가 가장 큰 관건이었습니다.

 

어렴풋이 알아도, 방법을 모른다면 오히려 시간을 과도하게 분배하는 편은 비효율적일 지도 모릅니다.

이 프로그래밍 시장에서는 절대 하면 안되는 말일수도 있겠지만, 당장의 우선 목표를 하고 나서 다른이들의 코딩 분석을 통해 천천히 해도 늦지 않다고 생각됩니다. 포기한다는 말은 아니랍니다.

 

적어도, 치환자가 기존에 존재하는 서버의 API 와 연동시켜주는 백엔드적 요소라고 추정해봅니다.

현재로서는 조금 더 알아봐야 한다고 봅니다.

 

그럼 지금의 최우선.

1. 기존에 존재하는 것의 효과 변경 (CSS)

2. 기존의 레이아웃 에다가 새 container 를 삽입. 대표 화면 전환 or 비디오 재생 삽입. (html)

3. 새로고침 하면 어느 화면의 스크롤 위치에 있던, 맨위로 자연스럽게 올려버리는 애니메이션 적용. (JS)

 

당장 가능한 것.

1. 웹폰트 변경 (당장 가능한 것) A. 구글 폰트

2. 메뉴 및 카테고리에 마우스 커서를 올리면 변화하는 애니메이션 삽입. (CSS)

3. Pregress bar 애니메이션 표시. A. pace.min.js 파일 업로드 이후, progress bar 색상 및 bar의 차오르는 속도를 조절하는 것에 대한 설계 및 점검. (아쉬운 점: 완전 스스로의 힘으로 작성 하진 않음. 추후 더 나은 구글의 무지개 디자인 고려.)

4. header 및 배경 색상 변경. - 컨셉은 사이버펑크

 

큰 그림.

화면 전환 및 시각적 애니메이션 효과에 집중해보기.

 

어쩌면 앞으로도 시작하기에 앞서 작성, 수정할 대상을 나열하고, 시작하는게 유리할지도 모르겠네요.

 

노트.

개인적으로 jquery 는 피하고 싶습니다. 어려워서가 아니라, Vanilla JS 로도 가능할 것 같으니까요.

 

---

이리 저리 알아 봤지만, 현재로서는 (1) html 을 가지고 슬라이드 형식의 무언가를 배치 할 수 있다.

(2) 그러나 기존의 템플릿 내에서는, 내가 원하는 위치에 표시가 안되니 당황스러울 뿐.

 

2번만 해결해도, 수월하게 진행 될 듯 합니다.

안되면 그저 기존의 위치에다가 수정을 가하는 식으로 1차적인 해결이 가능하겠지만요.

확실한 건, 분명히 조금만 더 하다보면 다음에는 몇 분만에 가능해 질 거란 점 입니다.

 

---

 

참고.

circlash.tistory.com/702

JavaScript로 티스토리 날짜 형식 바꾸기

tistory.github.io/document-tistory-skin/common/global.html

공통 · GitBook

dlagusgh1.tistory.com/367

CSS, 제이쿼리 이용한 페이지 로딩 효과

www.w3schools.com/howto/howto_js_progressbar.asp

How TO JS Progress Bar

m.blog.naver.com/PostView.nhn?blogId=dh3115&logNo=221230037221&proxyReferer=https:%2F%2Fwww.google.com%2F

(HTML/Javascript) 화면 로드시, 다른 페이지로 이동 시 로딩 화면 띄우기, 로딩 페이지 만들기