티스토리 블로그 상단바(메뉴바) 애플 홈페이지 느낌 내기

1. Apple 홈페이지 메뉴바 둘러보기

애플사 홈페이지는 화려한 전환 효과와 다채로운 애니메이션으로 유명하다. 그중에서도 특히 나의 블로그에 적용하고 싶었던 부분은 애플 특유의 반투명 블러 이펙트(뿌연 느낌?)가 적용된 고정 상태바이다.

 

ⓒ Apple Inc.

티스토리의 HTML / CSS 편집 기능을 통해 블로그에 이러한 느낌을 내는 방법을 알아보자.

 

2. Tistory CSS 수정하기

 

티스토리 블로그에서 상단바를 담당하는 CSS 코드는 `#header` 부분이다. 이 부분에 상단바의 위치, 너비, 높이, 색상 등 속성이 서술되어 있다.

 

이 CSS 코드를 수정하기 위하여 블로그 관리 홈으로 들어간다.

티스토리에서 HTML / CSS 소스 코드를 수정하는 방법은 대부분 알고 있으리라 생각하지만 혹시 모르는 분들을 위해 서술하겠다.

 

2-1. #header 수정

 

꾸미기 > 스킨 편집 탭에 접속한 후 

 

 

html 편집 > CSS 에서 `#header`로 시작하는 부분을 찾는다. (포스트 첫 사진 참조)

해당 부분의 소스 코드 내용은 블로그 테마에 따라 조금씩 다를 수 있는데, 수정할 부분은 다음과 같다.

 

/* Layout Selector */
#header {
	position: fixed;
	top: 0;
	background-color: rgba(0, 0, 0, 0.8);
	-webkit-backdrop-filter: blur(8px);
  	backdrop-filter: blur(8px);
	z-index: 999;
	height: 3rem;
	width: 100%;
}

 

• `position: relative;`를 `position: fixed;`로 바꾸면 상단바의 위치가 스크롤에 상관없이 고정되게 된다. 이때 상단바를 맨 위에 고정하길 원하므로 `top: 0px;`도 추가해준다.
• `z-index: 999;`는 상단바가 항상 컨텐츠보다 위에 위치하도록 하기 위함이다.
• `height` 안의 값은 원하는 만큼의 상단바 높이를 넣어주면 된다. 필자는 3rem으로 맞췄다.
• 색깔은 `rgba(0, 0, 0, 0.8)`로 약간 투명한 검정색으로 설정해주었다. `rgba()` 안의 첫 세 숫자는 RGB 값으로 원하는 색깔을 넣을 수 있다.

이렇게만 하면 상단바 위치 고정과 불투명 효과까지는 되나, 애플 홈페이지 특유의 블러(뿌연) 느낌은 내지 못한다.

오히려 콘텐츠의 글씨와 상단바의 메뉴 글씨가 겹쳐서 가독성이 떨어지는 문제가 발생하게 된다.

 

2-2. Blur 효과

따라서 backdrop filter의 blur 효과를 이용한다.

-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);

 

를 추가함으로써 최종적으로 완성이다. `blur` 안의 수를 조절해 블러 정도를 설정해보자.

`-webkit` 붙은 코드를 한번 더 써준 이유는 구글, 사파리 브라우저에 적용하기 위함이다.

 

3. 완성본 예시

 

최종적으로 적용된 모습이다.

 

HTML / CSS 편집창 상단의 적용 버튼을 눌러 저장하는 것을 잊지 말자.