TISTORY_블로그 꾸미기_Day2_상단 헤더 꾸미기

. . .

미루고 미뤄왔던  티스토리 블로그 꾸미기 2일차이다.
사실 계속 수정 및 개발중이고, 절반 이상은 끝났지만 까먹기 전에 정리하자!

처음부터 다 개발할 생각에 막막했는데 생각보다 커스텀이 편리하도록 자동화 및 변수화가 잘 되어 있다.

후후..ㅎ

 

기본 스킨 세팅은 1편에서 했기 때문에 참고해주시기 바랍니다~

1.상단 헤더 고정시키기

기본적으로 헤더는 상단에서만 보이고 스크롤 하면 사라지도록 세팅이 되어 있었다. 
아직 헤더에 이것저것 메뉴를 넣지는 않았지만 추후에 추가할 것을 대비해서  
스크롤로 화면을 내려도 헤더가 보이도록 할것이다.

그렇다면 바로 스킨 편집 > html 편집 > css탭 으로 가보도록 하자!

ctrl + F 키로 '.header' 클래스를 탐색해서 아래와 같이  position을 수정하자. 

주석 처리된 부분을 미리 설명하자면 

position : fixed; -> 헤더의 위치를 고정하여서 어디서나 볼 수 있게 한다.

backgroud -> 선형 그라디언트를 넣는데 왼쪽에서 오른쪽으로 이동하는 방향이고 rgb 방식의 투명도를 설정해주어서 배경색을 만들어 주었다. 너무 강렬하지 않게 보라색과 분홍색 그 사이 어느정도..? 

backdrop-filter -> 배경색이 밝기 때문에 스크롤을 하다 보면 헤더 뒤에 텍스트 혹은 내용이 비치게 되는데 그러면 가독성이 떨어진다! 그래서 마냥 유리에 비친 것처럼 블러처리를 하는 효과를 낸다. 

그 결과는 바로.... 뿅

2. 폰트 다운로드 받기

원래 기본적으로 제공하는 폰트는 별로 예쁘지 않지 않은가..?
아기 자기한 맛을 곁들여줄 폰트를 아래 사이트에서 직접 찾아보자. 

https://fonts.google.com/?preview.text=%EC%95%88%EB%85%95%ED%95%98%EC%84%B8%EC%9A%94&preview.size=47

Browse Fonts - Google Fonts

 

위의 사이트에 들어가서 마음에 드는 폰트를 찾은 후에! 
아래 이미지에 표시된 빨간 박스들을 눌러서 복사하자.

 

복사한 내용을 css탭 가장 윗 부분에 붙여넣고 아래 처럼 코드를 추가만 해주면 적용이 된다.