티스토리(Tistory) 헤더(header) 상단 고정하기

화면을 스크롤하면 헤더(사이드바, 블로그 이름, 검색)가 보이지 않아 불편함을 느꼈다.
따라서 화면 상단에 항상 헤더를 고정시키려고 한다.

헤더가 고정되어 있지 않을 때

• 이렇게 스크롤을 내리면 헤더가 보이질 않는다.

사이드바 여는 버튼, 블로그 이름, 검색을 포함한 헤더

---

헤더 고정 방법

1. 티스토리의 관리자창으로 들어가서 왼쪽 사이드바의 스킨 편집 메뉴를 클릭한다.

2. html 편집 버튼을 클릭한다.

3. HTML | CSS | 파일업로드 중 CSS를 클릭한다.

4. 윈도우는 Control + F, 맥은 Command + F를 눌러 내부 검색 창을 띄운다.

5. #header를 검색하여 찾는다.

#header {
	position: relative;
	width: 100%;
}

위의 코드와 비슷하게 헤더가 간단하게 설정이 되어있을 것이다.

 

6.  원래 설정되어 있는 코드를 주석 처리하거나 삭제하고 아래 코드를 추가한다.

#header {
	 /* 헤더 고정 */
	position: fixed;
	/* top은 화면 '위'를 기준으로 위치를 조정
	0이면 화면 상단에 공백 없이 딱 붙는다. */
	top: 0;
	/* width는 말 그대로 너비를 뜻한다.
	100%는 가로를 모두 채운다는 뜻이다. */
	width: 100%;
	/* z-index는 숫자가 높을 수록 화면 앞쪽에 보이고,
	숫자가 작을 수록 화면 뒤쪽에 위치한다.
	999라는 큰 수를 넣음으로써 항상 앞쪽에 위치하도록 한다. */
	z-index: 999;
	/* background-color로 배경색을 지정할 수 있다.
	rgba 방식으로 색과 함께 투명도를 설정할 수 있다. */
	background-color: rgba(255, 255, 255, 0.9);
}

7. 적용 버튼을 누르고 확인한다.

스크롤을 내려도 헤더가 상단에 고정되어 있다.

---

콘텐츠 위 쪽에 공백 넣기

콘텐츠가 너무 상단에 있는 것 같아서 조금 떨어뜨리려고 한다.

1. 티스토리의 관리자창으로 들어가서 왼쪽 사이드바의 스킨 편집 메뉴를 클릭한다.

2. html 편집 버튼을 클릭한다.

3. HTML | CSS | 파일업로드 중 CSS를 클릭한다.

4. 윈도우는 Control + F, 맥은 Command + F를 눌러 내부 검색 창을 띄운다.

5. #content를 검색하여 찾는다.

6. 아래 코드의 숫자를 적절하게 변경하여 추가한다.

#content {
	/* 여백을 주고 싶은 만큼 숫자를 넣는다. */
	margin-top: 100px;
}

7. 적용 버튼을 누르고 확인한다.

차례대로 margin-top이 100px일 때, 200px일 때, 300px일 때이다.