티스토리 블로그: '상단 메뉴바' 고정하기

티스토리 블로그 꾸미기: Header 고정하기

---

liis - 첫 화면

Poster 스킨으로 상단에 슬라이더와 벽돌형 리스트를 추가하면서 블로그 리스(liis)의 첫 화면을 조금 바꾸었다. 그러다보니 화면 전체길이가 길어지게 되었고, 스크롤을 하면 헤더(Header)에 있는 로고가 잘 보이지 않아 아쉬웠다. 그래서 화면에서 항상 로고가 보이도록 헤더를 고정하기로 하였다.

 

 

 

liis - Fixed Header

현재 블로그 리스(liis)의 화면을 보면 스크롤을 하면 헤더가 화면 상단에 고정이 되어서 계속 노출이 되는 것을 확인할 수 있다. 투명도를 주어서 뒤에 콘텐츠가 살짝 보이게도 하였다.

(수정하는 과정에서 여러가지 요소들의 스타일을 같이 바꿔줘야 하기 때문에 아래 튜토리얼이 조금 복잡해보일 수 있지만 티스토리는 html 블로그 만들기가 가능하니까 차근차근 흐름을 따라가면 쉽게 바꿀 수 있을 것이다~!)

---

CSS: Header 고정

'티스토리 블로그 관리자 페이지 > 스킨편집 > html 편집'에서 CSS페이지로 들어가 기존 Poster 스킨에 있는 '#header' 태그를 찾고 아래와 같이 스타일을 변경해준다.

#header {
	position: fixed;
	top:0;
	width: 100%;
	z-index:999;
	background-color: rgba(255,255,255,0.9);
}

↓ 세부적인 스타일은 다음과 같이 바꿀 수 있다.

 

01. 고정

position을 'fixed'로 바꾸면 간단하게 헤더가 고정이 된다. 하지만 position을 수정하면서 다른 요소들, 영역들이 틀어지거나 화면 스타일이 바뀌기 때문에 아래에 스타일들을 추가해야한다.

 

02. 위치

top은 화면 '위'를 기준으로 위치를 조정하는 것이다. '0'으로 했기 때문에, 화면 상단에 딱 붙게 된다. (만약 100px로 한다면 화면 위를 기준으로 100px만큼 떨어진 위치에 헤더가 오게 된다.)

 

03. 가장 앞으로 

z-index는 쉽게 말하자면, 층을 쌓는 개념이다. 숫자가 높을 수록 가장 윗층에 쌓여서 화면 가장 앞쪽에 보이게 되고, 숫자가 작으면 가장 아래층에 쌓여서 가장 뒷쪽에 위치하게 되는 것이다. 위와 같이 999라는 큰 숫자를 넣게 되면 헤더가 가장 앞쪽에 위치하게 되어 항상 위에 있는 것처럼 보이게 된다.

 

04. 헤더 영역 배경색

배경색을 rgba 방식으로 넣게 되면 색과 함께 투명도(Opacity)를 설정할 수 있다. 각 숫자들은 (R, G, B, A)로 앞 3개의 값은 rgb 컬러 값이고 마지막 숫자는 알파값으로 투명도를 정할 수 있다. 현재 rgb 값은 하얀색이다. 알파값은 0~1 사이의 숫자로 넣어야하며,  0은 완전히 투명해서 컬러가 아예 보이지 않는 상태, 1은 완전히 색이 다 보이는 상태이다. 나는 0.9 값을 넣어서 약간 투명하게 만들어놓은 상태이다. 더 투명하게 하고 싶으면 더 작은 숫자를 입력하면 된다.

---

여기까지 하면 헤더는 고정이 되는데 부자연스러운 부분이 보인다. 

 

liis - 헤더가 고정되면서 콘텐츠 영역 위치 변경 > 수정 해야할 부분 발생

헤더 아래에 있던 '콘텐츠'영역들의 위치가 헤더가 없어진 자리를 차지하면서 위로 올라가게 되는 것이다. 상대적으로 '콘텐츠'가 잘 보이지 않는 문제가 생기기 때문에 위치를 변경해주면 더 좋을 것 같다. 이 문제는 콘텐츠 영역에 마진 값을 주는 것으로 간단하게 처리할 수 있다!

 

 

 

CSS: Content 영역 위치 조정하기

'티스토리 블로그 관리자 페이지 > 스킨편집 > html 편집'에서 CSS페이지로 들어가 아래 코드를 추가해준다.

#content{ 
	margin-top:105px;
}

↓ 세부적인 스타일은 다음과 같이 바꿀 수 있다.

 

01. id값

'#content'라는 id값은 기존 poster 스킨에 있는 콘텐츠영역의 이름이다. 이름이니까 크게 신경쓸 필요는 없다^^

 

02. 마진 값

'#content(콘텐츠 영역)'의 위의 마진(margin-top)을 추가해서 위로 올라가는 문제를 해결할 것이다. 나는 내 블로그 기준으로 헤더 높이 값인 105px로 설정하였다. 각자에게 맞는 마진 값을 넣어서 원하는 스타일로 조정하면 된다. 

---

요렇게 끝나면 좋겠지만^^; 모바일에서는 헤더 높이 크기가 다르기 때문에, 즉 위의 마진값을 다르게 주어야한다. 다행히도 티스토리 html편집을 하면서 PC, 타블렛, 모바일 화면을 미리 볼 수 있어서 쉽게 확인하고 바꿀 수 있다. 위의 여러가지 값들을 변경하였어도 PC와 모바일 화면의 차이가 없다면 굳이 아래의 코드는 바꾸지 않아도 된다. 나는 모바일 화면에서 큰 차이가 있어서 값을 조금 수정하였다.

 

 

CSS: 모바일 화면 수정하기 (미디어쿼리)

'티스토리 블로그 관리자 페이지 > 스킨편집 > html 편집'에서 CSS페이지로 들어가 'Media Screen - Mobie'이라는 주석을 먼저 찾고, 아래 처럼 '#content' 스타일을 추가해준다.

/* Media Screen - Mobie */
@media screen and (max-width:767px) {
	#content{
		margin-top:65px;
	}
}

모바일 화면에서 '#content'의 마진 탑 값은 105px이 아니라 65px로 바꿔준다는 뜻이다. 이 값도 모바일 화면을 확인하면서 각자에게 맞게 값을 조정하면 된다.

---

마지막으로! 한 가지 더 디테일을 준다면,

 

liis - 본문 글 영역 여백 추가

나 같은 경우 '본문 글' 영역도 수정하기 전보다 위로 올라가서 답답해보이고, 헤더와 본문 글의 제목 영역이 구분이 안되는 느낌이 들었다. 그래서 여백을 더 주기 위해 본문 글 제목 영역 위쪽에 패딩 값(padding-top)을 추가하였다.

 

 

 

html: 여백 주기

'티스토리 블로그 관리자 페이지 > 스킨편집 > html 편집'에서 이번에는 CSS가 아니라 html 페이지에서 직접 스타일을 바꿨다. 

<s_permalink_article_rep>
	<div class="hgroup" style="padding-top:50px;">
</s_permalink_article_rep>

티스토리 블로그 Poster 스킨 기준으로 '<s_permalink_article_rep>' 태그가 본문글 영역이기 때문에 먼저 위 태그를 찾고 그 안에 있는 '.hgroup'의 클래스(class) 이름을 갖고 있는 <div>를 찾는다. (코드 참고↑) 그리고 해당 div 태그 안에 위와 같이 패딩 값을 추가하면 된다. 나는 50px으로 패딩 탑 값을 넣었다. 각자 블로그 스타일에 맞는 값으로 수정하면 된다.

 

 

 

복잡한 과정이 있었지만, 나와 같이 블로그 로고가 화면에서 항상 노출되기를 바란다면 한번 시도해보길 바란다~!

---

by.liis (life is like this)