본문 바로가기
# Tistory/- Skin

[Tistory] 콘텐츠 제목 Setting - 글 제목(Article Title) 상단 고정 및 기타 기능

by Graffitio 2023. 8. 25.
[Tistory] 콘텐츠 제목 Setting - 글 제목(Article Title) 상단 고정 및 기타 기능
[Tistory] 콘텐츠 제목 Setting - 글 제목(Article Title) 상단 고정 및 기타 기능
728x90
[Title 상단 고정 - 본문 영역]

 

    스크롤을 조작해도 Header를 상단에 고정시키는 방법을 알아보자.

    위 Header에는 웹사이트명, 글 제목, 메뉴 등의 다양한 정보를 담을 수 있다.

 

    해당 기능은

    글을 발행하면 글 제목이 본문 상단에 자동으로 생성되며,

    스크롤을 내리더라도 글 제목이 화면 상단에 고정된다.

 

 

1. HTML 코드 수정

 

cpp
접기
// 글 제목 치환자 코드 삽입
// <div class="article_title">티스토리 글제목(article title) 상단 고정</div>
<div class="article_title">[Tistory] 콘텐츠 제목 Setting - 글 제목(Article Title) 상단 고정 및 기타 기능]</div>

HTML 코드 수정

위 사진처럼 <div class="entry-content"> 와  

728x90
[Title 상단 고정 - 본문 영역]

 

    스크롤을 조작해도 Header를 상단에 고정시키는 방법을 알아보자.

    위 Header에는 웹사이트명, 글 제목, 메뉴 등의 다양한 정보를 담을 수 있다.

 

    해당 기능은

    글을 발행하면 글 제목이 본문 상단에 자동으로 생성되며,

    스크롤을 내리더라도 글 제목이 화면 상단에 고정된다.

 

 

1. HTML 코드 수정

 

cpp
접기
// 글 제목 치환자 코드 삽입
// <div class="article_title">티스토리 글제목(article title) 상단 고정</div>
<div class="article_title">]</div>

HTML 코드 수정

위 사진처럼 <div class="entry-content"> 와   사이에 위 코드를 삽입해준다.

 

2. CSS 코드 수정

 
cpp
접기
.article_title {
	position: sticky; /* 고정 여부 */
	top: 0px; /* 상단 고정의 위치 */
	margin: 0px 0px 30px 0px; /* 글과의 간격 */
	padding: 10px; /* 박스 내 여백 */
	background-color: #0A174E; /* 박스 배경 색상 */
	border-radius: 50px; /* 박스 테두리 라운딩 */
	font-family: S-CoreDream-7ExtraBold; /* 폰트 종류 */
	font-size: 20px; /* 폰트 크기 */
	font-weight: 700; /* 폰트 굵기 */ 
	color: #f5f4f0; /* 폰트 색상 */
	text-align: center; /* 텍스트 중앙 정렬 */
}

CSS 코드 삽입

위 코드를 CSS의 가장 마지막에 붙여준다.

position: sticky; 는 위치를 고정하는 코드

top: 0px; 고정되는 위치를 설정하는 코드이며,

기타 수치들은 주석을 참조하여 설정하면 된다.

 

 

 

[화면 전체 고정으로 변경]

 

    위의 Setting은 본문 범위 한정으로 출력하는 setting이었다면,

    이제는 화면 전체 범위로 출력되게끔 변경해볼 것이다.

 

1. HTML 코드 수정

 

cpp
접기
							</div>
 
 
<!-- 화면 상단 글제목 고정 시작-->
<div class="article_title"></div>
<script>
	$(window).scroll(function() {
		if ($(window).scrollTop() >= 500) {
			$('.article_title').addClass('visible-title');
		}
		else {
			$('.article_title').removeClass('visible-title');
		}
	});
	</script>
<!-- 화면 상단 글제목 고정 끝 -->
 
 
							<div class="entry-content">

HTML 코드 수정

위 코드를 HTML의 <div class="entry-content"> 위에 삽입하고

해당 코드의 ($(window).scrollTop() >= 500)의 500부분을 수정하면

타이틀이 고정되는 위치를 설정할 수 있다.

(위에서 작성한 본문 상단 고정 코드는 지우고 작성해야 한다.)

 

 

2. CSS 코드 수정

 

cpp
접기
/* 화면 상단 글제목 고정 */
.article_title {
	position: fixed; /* 고정 코드 */
	top: 0px; /* 고정 위치 */
	left: 0px; /* 고정 위치 */
	width: 100%; /* 가로 길이 - 화면 전체 */
	height: 16px; /* 세로 길이 */
	background: #a8aaa5da; /* 박스 배경 색상 */
	padding: 16px; /* 박스 내 여백 */
	font-family: S-CoreDream-7ExtraBold; /* 폰트 종류 */
	color: #f5f4f1; /* 폰트 색상 */
	font-size: 20px; /* 폰트 크기 */
  font-weight: 700;
	line-height: 16px; /* 폰트 중앙 정렬 */
	z-index: 100; /* z축 순서 */
	visibility: hidden; /* 숨기기 */
}
.visible-title {
	visibility: visible; /* 스크롤 위치 초과 시, visible */
}

CSS 코드 삽입

위 코드를 CSS의 가장 마지막에 붙여준다.(이전 .article_title 코드는 삭제하거나 주석처리)

 

 

3. 적용 완료

 

 

 

[Header에 제목과 메뉴과 토글되도록 설정]

 

    일정 부분까지 스크롤을 내리면 헤더에 제목이 나타나고

    이후에는 스크롤의 상하에 따라 제목이 메뉴로 토글되는 기능을 구현해보자.

 

1. HTML 코드 수정

 

cpp
접기
<!-- 화면 상단 글제목 고정 및 메뉴 토글 시작-->
<div class="topBar">
  <div class="container">
    <div class="title"></div>
    <div class="menu"></div>    
  </div>
</div>
 
<div class="article_title"></div>
 
<script>
	var $topBar = $(".topBar"),
			$titleBar = $(".topBar .title"),
			$menuBar = $(".topBar .menu"),
			$mainMenu = $("#gnb"),
			$titleArticle = $(".article_title").text(),
			currScroll = 0, prevScroll;
 
	$menuBar.html($mainMenu.html());
	$titleBar.html($titleArticle);
 
	$(window).scroll(function() {
		currScroll = $(this).scrollTop();
		if(currScroll > prevScroll) {
			$menuBar.slideUp();
			$titleBar.slideDown();
		}
		else {
			$menuBar.slideDown();
			$titleBar.slideUp();
		}
 
		prevScroll = currScroll;
		if(currScroll > 300) {
			$topBar.slideDown(100);
		}
		else {
			$topBar.slideUp(100);
		}
	});
	</script>
<!-- 화면 상단 글제목 고정 및 메뉴 토글 끝 -->

HTML 코드 수정

<div class="entry-content"> 위에 해당 코드를 삽입한다.

if(currScroll > 300) 코드에서 300 값을 수정하면, 헤더가 나타나는 스크롤 위치를 변경할 수 있다.

 

2. CSS 코드 수정

 

cpp
접기
/* 화면 상단 글제목 고정 및 메뉴 토글 */
.topBar {
	display: none; /* 초기에는 숨겨진 상태 */
	position: fixed; /* 고정 여부 */
	top: 0px; /* 상단에 붙임 */
	left: 0px; /* 좌측에 붙임 */
	width: 100%; /* 가로 너비 100% */
	background-color: #a7a7aadc; /* 배경 색상 */
	z-index: 9999; /* 다른 요소 위에 표시될 우선순위 */
}
/* 화면 너비가 800px 이하일 때 */
@media screen and (max-width: 800px) {
	.topBar {
		display: none; /* 숨김 처리 */
	}
}
/* 컨테이너 스타일 */
.container {
	max-width: 1080px; /* 최대 가로 너비 1080px */
	margin: 0 auto; /* 가운데 정렬 및 주변 여백 없음 */
	//margin-left: 16px; /* 왼쪽 정렬한 뒤 16px만큼 여백  */
}
/* 상단 바 내부 메뉴 스타일 */
.topBar .menu {
	display: block; /* 블록 요소로 표시 */
}
/* 메뉴 목록 스타일 */
.topBar .menu ul {
	list-style: none; /* 목록 기호 제거 */
	display: flex; /* 플렉스 박스로 요소 배치 */
	align-items: center; /* 수직 정렬 중앙 정렬 */
	justify-content: flex-start; /* 수평 정렬 왼쪽 정렬 */
}
/* 메뉴 링크 및 타이틀 스타일 */
.topBar .menu ul a,
.topBar .title { /* 헤더 설정 */
	display: block; /* 블록 요소로 표시 */
	padding: 1em 2em; /* 위아래 여백 1em, 좌우 여백 2em */
	text-decoration: none; /* 텍스트에 밑줄 제거 */
	height: 12px; /* 세로 길이 */
	line-height: 12px; /* 폰트 중앙 정렬 */
	font-family: S-CoreDream-7ExtraBold; /* 글꼴 설정 */
	font-size: 20px; /* 폰트 크기 */
  font-weight: 700; /* 글꼴 두께 700 (굵게) */
	color: #fcfbf7; /* 글자 색상 */
}
/* 메뉴 링크에 마우스 호버 시 스타일 */
.topBar .menu ul a:hover { /* 헤더에 커서 올렸을 때 설정 */
	background-color: #f8f8f5; /* 배경 색상 변경 */
	color: #1d1c1c; /* 글자 색상 변경 */
}
/* 상단 바 내부 타이틀 스타일 */
.topBar .title {
	display: none; /* 초기에는 숨겨진 상태 */
}

CSS 가장 마지막 Line에 추가해주면 된다.

 

3. 적용 완료

 

 

728x90
 사이에 위 코드를 삽입해준다.

 

2. CSS 코드 수정

 
cpp
접기
.article_title {
	position: sticky; /* 고정 여부 */
	top: 0px; /* 상단 고정의 위치 */
	margin: 0px 0px 30px 0px; /* 글과의 간격 */
	padding: 10px; /* 박스 내 여백 */
	background-color: #0A174E; /* 박스 배경 색상 */
	border-radius: 50px; /* 박스 테두리 라운딩 */
	font-family: S-CoreDream-7ExtraBold; /* 폰트 종류 */
	font-size: 20px; /* 폰트 크기 */
	font-weight: 700; /* 폰트 굵기 */ 
	color: #f5f4f0; /* 폰트 색상 */
	text-align: center; /* 텍스트 중앙 정렬 */
}

CSS 코드 삽입

위 코드를 CSS의 가장 마지막에 붙여준다.

position: sticky; 는 위치를 고정하는 코드

top: 0px; 고정되는 위치를 설정하는 코드이며,

기타 수치들은 주석을 참조하여 설정하면 된다.

 

 

 

[화면 전체 고정으로 변경]

 

    위의 Setting은 본문 범위 한정으로 출력하는 setting이었다면,

    이제는 화면 전체 범위로 출력되게끔 변경해볼 것이다.

 

1. HTML 코드 수정

 

cpp
접기
							</div>
 
 
<!-- 화면 상단 글제목 고정 시작-->
<div class="article_title">[Tistory] 콘텐츠 제목 Setting - 글 제목(Article Title) 상단 고정 및 기타 기능</div>
<script>
	$(window).scroll(function() {
		if ($(window).scrollTop() >= 500) {
			$('.article_title').addClass('visible-title');
		}
		else {
			$('.article_title').removeClass('visible-title');
		}
	});
	</script>
<!-- 화면 상단 글제목 고정 끝 -->
 
 
							<div class="entry-content">

HTML 코드 수정

위 코드를 HTML의 <div class="entry-content"> 위에 삽입하고

해당 코드의 ($(window).scrollTop() >= 500)의 500부분을 수정하면

타이틀이 고정되는 위치를 설정할 수 있다.

(위에서 작성한 본문 상단 고정 코드는 지우고 작성해야 한다.)

 

 

2. CSS 코드 수정

 

cpp
접기
/* 화면 상단 글제목 고정 */
.article_title {
	position: fixed; /* 고정 코드 */
	top: 0px; /* 고정 위치 */
	left: 0px; /* 고정 위치 */
	width: 100%; /* 가로 길이 - 화면 전체 */
	height: 16px; /* 세로 길이 */
	background: #a8aaa5da; /* 박스 배경 색상 */
	padding: 16px; /* 박스 내 여백 */
	font-family: S-CoreDream-7ExtraBold; /* 폰트 종류 */
	color: #f5f4f1; /* 폰트 색상 */
	font-size: 20px; /* 폰트 크기 */
  font-weight: 700;
	line-height: 16px; /* 폰트 중앙 정렬 */
	z-index: 100; /* z축 순서 */
	visibility: hidden; /* 숨기기 */
}
.visible-title {
	visibility: visible; /* 스크롤 위치 초과 시, visible */
}

CSS 코드 삽입

위 코드를 CSS의 가장 마지막에 붙여준다.(이전 .article_title 코드는 삭제하거나 주석처리)

 

 

3. 적용 완료

 

 

 

[Header에 제목과 메뉴과 토글되도록 설정]

 

    일정 부분까지 스크롤을 내리면 헤더에 제목이 나타나고

    이후에는 스크롤의 상하에 따라 제목이 메뉴로 토글되는 기능을 구현해보자.

 

1. HTML 코드 수정

 

cpp
접기
<!-- 화면 상단 글제목 고정 및 메뉴 토글 시작-->
<div class="topBar">
  <div class="container">
    <div class="title"></div>
    <div class="menu"></div>    
  </div>
</div>
 
<div class="article_title">[Tistory] 콘텐츠 제목 Setting - 글 제목(Article Title) 상단 고정 및 기타 기능</div>
 
<script>
	var $topBar = $(".topBar"),
			$titleBar = $(".topBar .title"),
			$menuBar = $(".topBar .menu"),
			$mainMenu = $("#gnb"),
			$titleArticle = $(".article_title").text(),
			currScroll = 0, prevScroll;
 
	$menuBar.html($mainMenu.html());
	$titleBar.html($titleArticle);
 
	$(window).scroll(function() {
		currScroll = $(this).scrollTop();
		if(currScroll > prevScroll) {
			$menuBar.slideUp();
			$titleBar.slideDown();
		}
		else {
			$menuBar.slideDown();
			$titleBar.slideUp();
		}
 
		prevScroll = currScroll;
		if(currScroll > 300) {
			$topBar.slideDown(100);
		}
		else {
			$topBar.slideUp(100);
		}
	});
	</script>
<!-- 화면 상단 글제목 고정 및 메뉴 토글 끝 -->

HTML 코드 수정

<div class="entry-content"> 위에 해당 코드를 삽입한다.

if(currScroll > 300) 코드에서 300 값을 수정하면, 헤더가 나타나는 스크롤 위치를 변경할 수 있다.

 

2. CSS 코드 수정

 

cpp
접기
/* 화면 상단 글제목 고정 및 메뉴 토글 */
.topBar {
	display: none; /* 초기에는 숨겨진 상태 */
	position: fixed; /* 고정 여부 */
	top: 0px; /* 상단에 붙임 */
	left: 0px; /* 좌측에 붙임 */
	width: 100%; /* 가로 너비 100% */
	background-color: #a7a7aadc; /* 배경 색상 */
	z-index: 9999; /* 다른 요소 위에 표시될 우선순위 */
}
/* 화면 너비가 800px 이하일 때 */
@media screen and (max-width: 800px) {
	.topBar {
		display: none; /* 숨김 처리 */
	}
}
/* 컨테이너 스타일 */
.container {
	max-width: 1080px; /* 최대 가로 너비 1080px */
	margin: 0 auto; /* 가운데 정렬 및 주변 여백 없음 */
	//margin-left: 16px; /* 왼쪽 정렬한 뒤 16px만큼 여백  */
}
/* 상단 바 내부 메뉴 스타일 */
.topBar .menu {
	display: block; /* 블록 요소로 표시 */
}
/* 메뉴 목록 스타일 */
.topBar .menu ul {
	list-style: none; /* 목록 기호 제거 */
	display: flex; /* 플렉스 박스로 요소 배치 */
	align-items: center; /* 수직 정렬 중앙 정렬 */
	justify-content: flex-start; /* 수평 정렬 왼쪽 정렬 */
}
/* 메뉴 링크 및 타이틀 스타일 */
.topBar .menu ul a,
.topBar .title { /* 헤더 설정 */
	display: block; /* 블록 요소로 표시 */
	padding: 1em 2em; /* 위아래 여백 1em, 좌우 여백 2em */
	text-decoration: none; /* 텍스트에 밑줄 제거 */
	height: 12px; /* 세로 길이 */
	line-height: 12px; /* 폰트 중앙 정렬 */
	font-family: S-CoreDream-7ExtraBold; /* 글꼴 설정 */
	font-size: 20px; /* 폰트 크기 */
  font-weight: 700; /* 글꼴 두께 700 (굵게) */
	color: #fcfbf7; /* 글자 색상 */
}
/* 메뉴 링크에 마우스 호버 시 스타일 */
.topBar .menu ul a:hover { /* 헤더에 커서 올렸을 때 설정 */
	background-color: #f8f8f5; /* 배경 색상 변경 */
	color: #1d1c1c; /* 글자 색상 변경 */
}
/* 상단 바 내부 타이틀 스타일 */
.topBar .title {
	display: none; /* 초기에는 숨겨진 상태 */
}

CSS 가장 마지막 Line에 추가해주면 된다.

 

3. 적용 완료

 

 

728x90
저작자표시 비영리 변경금지

'# Tistory > - Skin' 카테고리의 다른 글

[Tistory] 티스토리 스킨 편집의 기초 - HTML, CSS, JavaScript  (0) 2023.08.26
[Tistory] 콘텐츠 제목 Setting - 부분 노출(제목 잘림), 제목 두께  (0) 2023.08.24

관련글

티스토리툴바