Blogger 커스터마이징 : CSS 수정 (sticky-header)

sticky-header, centered-top-container sticky animating

삽질1

google blogger의 템플릿 테마중 하나인 Contempo에서는 

스크롤을 어느 정도 내린 상태에서 다시 올리면

상단의 검색창이 내려와서 스크롤을 다시 내릴 때까지 유지된다.

(이 "어느 정도"에 해당하는 값은 

기본 테마의 javascript에 코딩 되어있을 것으로 추측한다.)

css 수정 후 이 부분에 문제가 생겨서

내릴때에도 올릴 때에도 계속 검색창이 내려오고 사라졌다를 반복한다.

< 페이지 최하단 모습 >

데이터를 색인하여 찾을 때는 유용한 기능이라고 생각하지만

검색 기능은 이미 블로그 최상단에 존재한다.

따라서 해당 기능을 제거하기로 했다.

scroll event를 감지하고

그에 따라 html이나 css문서를 수정하는 작업은 

javascript가하는 일이다.

html 편집기를 통해 코드를 살펴본 결과

이 javascript 코드는 외부 cdn 서버에서 가져오는 것 같다. 

javascript 코드를 직접 건드려야되나 싶어서 구글링 해 본 결과

간단하게 css 코드를 수정해서 없앨 수 있었다.

sol) sticky-header 제거

https://joshua-dev-story.blogspot.com/2020/04/blogger-remove-sticky-header.html

FE, Publishing 에서는 '고정 헤더'라고 부르고 있는 이 태그의 css를 수정하면 된다.

display 옵션을 none으로 바꿔서

기존 요소의 block을 전부 없애고 기능까지 해제해버리는 것.

이 sticky header를 보이지 않게하는 방법은

opacity를 0으로 만들거나

visibility를 hidden으로 할 수도 있지만

display : none 옵션이 가장 확실해보인다.

수정 후 여전히 scroll 이벤트에 따라

DOM의 변경이 일어나는 것 같지만

sticky header는 더이상 보이지 않는다.

삽질2

최상단 게시글을 사이드바 높이에 맞춰서 

막무가내로 블로그 제목과 본문이 분리된 디자인을 구현하려고 했다가 발생한 문제.

의도하고자 하였던 바는 아래 그림과 같다.

위 그림과 같이 게시글의 시작 라인(Content box)을 왼쪽 Sidebox의 시작지점과 맞추고 싶었다.

더 깔끔해보일 것 같아서 css및 html 수정을 시도하였으나 Scroll 할 때 문제가 생겼다.

blogger 기본 설정으로 scroll 할 때, scroll 속도에 따라서

흰색 검색바가 화면의 top으로부터 내려온다고 짐작했다.

그런데 이 검색바가 나타났다가 사라질 때, 

content box 영역이 계속 움직이는 현상을 발견했다.

side effect를 생각하지 못했고 전체적인 html 구조를 파악하지 않고 

align시켜서 생긴 문제였다.

의도했던 디자인처럼 동작하려면

1. 정지시 content box의 시작 부분을 왼쪽 sidebox의 시작지점과 일치

2. scroll 시에도 content box는 고정돼야한다.

sol) 

scroll 할 때 trigger 되는 class는 centered-top-container sticky animating .

https://support.google.com/blogger/thread/8898327/how-to-disable-sticky-header-from-blogger-when-scrolling-down?hl=en

.centered-top-container.sticky{

left:0;

position:fixed;

right:0;

top:0;

width:auto;

z-index:50;

-webkit-transition-property:opacity,-webkit-transform;

transition-property:opacity,-webkit-transform;

transition-property:transform,opacity;

transition-property:transform,opacity,-webkit-transform;

-webkit-transition-duration:.2s;

transition-duration:.2s;

-webkit-transition-timing-function:cubic-bezier(.4,0,.2,1);

transition-timing-function:cubic-bezier(.4,0,.2,1)

}

의 position:fixed -> position:relative로 수정

.collapsed-header .centered-top-placeholder{

display:block

}

block -> none으로 수정

위 2가지 css 코드 수정후

동영상처럼 끊임없이 html이 변경되는 현상은 없어졌다.(문제2 해결)

하지만 여전히 최상단 게시글을 

사이드바 높이에 맞춘 디자인은(문제 1) 구현 못하고 있다.

삽질3(진행중)

scroll up 시 

header가 재등장할 때 뚝-뚝 끊겨서 화면이 조정돼서

사용성에 불편함이 있었다.

• 해당 동작을 관장하는 곳은 어디인가?
• 어떤 로직을 통해 수행되는가?
• 어떻게 수정하면 되는가?
  
  

<스크롤 동작 관장 영역>

크롬 개발자도구와 blogger html 편집기를 통해 

stickt header 영역의 css를 조사해보았다.

 

.centered-top-container.sticky{

left:0;

position:relative;

right:0;

top:0;

width:auto;

z-index:0;

-webkit-transition-property:opacity,-webkit-transform;

transition-property:opacity,-webkit-transform;

transition-property:transform,opacity;

transition-property:transform,opacity,-webkit-transform;

-webkit-transition-duration:.2s;

transition-duration:.2s;

-webkit-transition-timing-function:cubic-bezier(.4,0,.2,1);

transition-timing-function:cubic-bezier(.4,0,.2,1)

}

webkit transition이 있고

transition이 있었다.

-webkit-transition 속성과 -webkit-animation 속성의 가장 큰 차이는 

-webkit- transition 속성은 요소의 상태가 바뀌어야 바뀌는 상태를 애니메이션으로 표현하지만, 

-webkit-animation 속성은 요소의 상태 변화와 상관 없이 애니메이션을 실행한다.

-webkit-transition-property:opacity,-webkit-transform;

transition-property:opacity,-webkit-transform;

transition-property:transform,opacity;

transition-property:transform,opacity,-webkit-transform;

-webkit-transition-duration:.5s;

transition-duration:.5s;

-webkit-transition-timing-function:cubic-bezier(.4,0,.2,1);

transition-timing-function:cubic-bezier(.4,0,.2,1)

bezier 곡선 간단 정리.

beizer곡선은 컴퓨터 그래픽에서 사용되는 개념이다.

곡선을 매끄럽게 잘 그릴 수 있게끔 해주는 알고리즘.

1차~n차 베지어 곡선이 있다.

2차, 3차 곡선을 주로 사용한다.

cubic-beizer는 4개의 파라미터를 받는 꼴이다.

차수가 늘면 기준점이 늘어난다.

이 기준점들을 경유하면서 시작점-목적지점 까지 접선을 그리며 곡선을 그린다.

위에서 쓰인 cubic-bezier는 3차 베지어 곡선이다.

파라미터에서 사용되는 4개 값은 x,y의 2쌍이며

우상향의 직선 그래프로 사용되는 나머지 2개의 점은 생략된다.

duration값에 따라 좌표가 달라지는듯

sidebar-container 조정

body.collapsed-header .sidebar-container{

z-index:15

}

<스크롤 동작 로직>

• scroll down -> 사용자의 컨텐츠 탐색 희망 동작으로 인식 -> header 감춤
• scroll up -> 사용자의 랜딩 화면 , navigation 조작 희망 동작으로 인식 -> header 등장

이 글은 디자인 완성될 때까지 계속 보완하겠습니다.