Tistory/Tistory Skin Edit
나만의 헤더 만들기 상단에 고정시키기
별깡솔
2020. 10. 28. 18:13
안녕하세요 별깡솔입니다 : )
별깡솔 블로그를 방문하신 모든 분들 진심으로 감사드립니다
나만의 헤더 만들기 상단에 고정시키기
오디세이 스킨에 없는 기능으로 스크롤을 아래로 내렸을 때 헤더가 상단에 고정하는 것입니다
티스토리 포럼에 헤더 관련한 문의가 종종 있기도하고
헤더에 메뉴가 많은 저같은 사람은 모바일 스크린에서 메뉴 몇 가지가 잘려 안보입니다
해당 문제를 해결하기 위해 일부를 수정하기 보다는 전체를 들어내는 작업을 할 예정입니다
우선 다른 스킨들 중에서 헤더가 고정되는 스킨을 찾아보겠습니다
최신 스킨 순으로 살펴보면 아래와 같이 보여지고 있습니다
#1
검색창과 카테고리가 우측에 있습니다
모바일 화면에서는 버튼으로 대체하고 클릭하면 오른쪽에서 사이드바가 슬라이딩합니다.
다소 아쉬운점은 프리뷰 상태여서 정확하진 않지만 x버튼 외에 검은 빈 공간을 눌러도 사이드바가 사려졌으면 하는데 그러지는 않았습니다
Flatinum
블로그 메뉴바 형식이 우측에 있으며 클릭하면 아래로 메뉴바가 나타납니다
모바일 화면에서는 역시 버튼을 표시하고 클릭하면 헤더 아래로 슬라이딩하며 나타납니다
MaterialT Mark3
좌측에 버튼 우측에 검색창이 있습니다
버튼을 클릭하면 좌측에서 사이드바가 슬라이딩합니다
모바일 화면에서도 동일한 구성으로 버튼 클릭시 좌측 슬라이딩을 유지하고 있습니다
Design your life
블로그 타이틀만 자리잡으며 아쉽게도 아무 기능 없이 고정되고 있습니다
모바일 화면에서는 헤더가 고정되지 않습니다
제가 필요한 기능은 아래와 같습니다
pc 화면에서 헤더가 고정되고 모바일 화면에서는 고정되지 않는다
헤더에 너무 많은 것을 담지 말자
모바일 화면에서는 버튼으로 함축해 메뉴를 슬라이딩하라
블로그에 적용중이던 검색창과 구독버튼 블로그 메뉴버튼을 먼저 정리하겠습니다
검색창은 컨테이너 바로 아래 부분에 자리잡아 놓기로 결정했습니다
구독버튼은 헤더 부분을 완성하고 어디가 어울릴지 찾아보겠습니다
블로그 메뉴바는 헤더에 넣는 자리잡는 것으로 하겠습니다
소스코드 수정 전에 백업은 반드시 필요합니다
헤더 html, css 부분을 찾아 오려냅니다
ctrl + F로 찾아나가면서 하시길 바랍니다
ex) #header & .header
최종적으로 아래와 같은 레이아웃을 만들기 위해 많은 시간이 소요되었습니다
PC 화면 header
PC 화면 header fixed
tablet & mobile header
tablet & mobile header fixed
tablet & mobile header 햄버거 버튼 클릭
html & css & jquery 부분을 직접 제작하였습니다
그렇기 때문에 치환자 변환 값이 아니고 header에 html 요소를 직접 만들었습니다
저와 같은 스타일로 헤더를 꾸미시려면 소스 코드를 참고하세요
그리고 아직 헤더 상단에 블로그 메뉴 버튼은 완성하지 못했습니다
티스토리 이미지만 나타난 상태입니다
html
<!-- header -->
<header id="header">
<div class="header-top">
<div class="title-area">
<a href="https://starggangsol.tistory.com/" title="별깡솔" class="link_logo">
<span class="blog-title">StarGGangSol</span>
</a>
</div>
<div class="header-top-util">
<ul>
<li class="top-util-list">
<a href="/guestbook">Guestbook</a>
</li>
<li class="top-util-list">
<a href="https://www.instagram.com/starggangsol" target="_blank"><i
class="xi-instagram"></i></a>
</li>
<li class="top-util-list">
<a href="#none"
onclick="popWin = window.open('https://pf.kakao.com/_QxexbCK/chat','windows','width=600,height=670,scrollbars=yes'); popWin.focus(); return false;"
target="_blank"><i class="xi-kakaotalk"></i></a>
</li>
<li class="top-util-list menu-toolbar">
<a href="#none"><img src="./images/img_tistory.png" alt=""></a>
<!-- <div class="header_layer layer_profile">
<div class="inner_header_layer">
<h2 class="screen_out">개인정보</h2>
<div class="info_profile"><a href="#none" class="txt_id txt_id_type2"></a><span class="txt_email"></span><a
href="https://www.tistory.com/member"
class="link_setting link_setting_type2">계정관리</a></div>
<div class="wrap_list #blogList" style="max-height: 300px;">
<div>
<h3 class="tit_list_type">운영중인 블로그</h3>
<div class="info_profile info_profile_type1"><a
href="" class="txt_id"></a><a href=""
class="img_common_tistory link_edit">쓰기</a><a
href=""
class="img_common_tistory link_setting">블로그 관리</a></div>
</div>
</div>
<div class="wrap_toolbar">
<h2 class="screen_out">이동링크목록</h2>
<ul class="list_toolbar">
<li><a href="https://www.tistory.com" class="link_list">티스토리 홈</a></li>
<li><a href="https://www.tistory.com/feed" class="link_list">피드</a></li>
<li><a href="https://www.tistory.com/auth/logout"
class="link_list">로그아웃</a></li>
</ul>
</div>
</div>
</div> -->
</li>
</ul>
</div>
</div>
<div class="header-middle">
<div class="gnb-area">
<nav class="header-menu">
<ul>
<li class="menu-category first">
<a href="/category/StarGGangsol">StarGGangsol</a>
<ul class="submenu">
<li class="submenu-category">
<a href="/category/StarGGangsol/Puppy Story">Puppy Story</a>
</li>
<li class="submenu-category">
<a href="/category/StarGGangsol/Diary">Diary</a>
</li>
<li class="submenu-category">
<a href="/category/StarGGangsol/Movie & TV">Movie & TV</a>
</li>
</ul>
</li>
<li class="menu-category">
<a href="/category/Cocktail">Cocktail</a>
</li>
<li class="menu-category">
<a href="/category/Learn English">Learn English</a>
</li>
<li class="menu-category">
<a href="/category/Tistory">Tistory</a>
<ul class="submenu">
<li class="submenu-category">
<a href="/category/Tistory/Tistory Skin Edit"><span></span>Tistory Skin
Edit</a>
</li>
<li class="submenu-category">
<a href="/category/Tistory/Adsense">Adsense</a>
</li>
</ul>
</li>
<li class="menu-category">
<a href="/category/Football">Football</a>
</li>
<li class="menu-category last">
<a href="/category/Travel">Travel</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="header-fixed">
<div class="header-fixed-wrap">
<div class="header-fixed-title">
<a href="/"><span class="blog-title">StarGGangSol</span></a>
</div>
<div class="header-fixed-menu">
<ul>
<li class="menu-category">
<a href="/category/StarGGangsol">StarGGangSol</a>
<ul class="submenu">
<li class="submenu-category">
<a href="/category/StarGGangsol/Puppy Story">Puppy Story</a>
</li>
<li class="submenu-category">
<a href="/category/StarGGangsol/Diary">Diary</a>
</li>
<li class="submenu-category">
<a href="/category/StarGGangsol/Movie & TV">Movie & TV</a>
</li>
</ul>
</li>
<li class="menu-category"><a href="/category/Cocktail">Cocktail</a></li>
<li class="menu-category"><a href="/category/Learn English">Learn English</a></li>
<li class="menu-category">
<a href="/category/Tistory">Tistory</a>
<ul class="submenu">
<li class="submenu-category">
<a href="/category/Tistory/Tistory Skin Edit"><span></span>Tistory Skin
Edit</a>
</li>
<li class="submenu-category">
<a href="/category/Tistory/Adsense">Adsense</a>
</li>
</ul>
</li>
<li class="menu-category"><a href="/category/Football">Football</a></li>
<li class="menu-category"><a href="/category/Travel">Travel</a></li>
</ul>
</div>
</div>
</div>
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
</header><!-- search -->
<div class="search-box">
<div class="search">
<s_search>
<div class="input-box">
<input class="searchInput" type="text" name=""
value="" placeholder="Search Our Blog"
onkeypress="if (event.keyCode == 13 ) { requestSearch('.search-box .searchInput') }">
<button type="submit"
onclick="{ requestSearch('.search-box .searchInput') }">검색</button>
<label>Please Enter a Search Term</label>
</div>
</s_search>
</div>
</div>css
#header {
position: relative;
}
#header .header-top {
max-width: 1600px;
width: 100%;
margin: auto;
position: relative;
}
#header .header-top .title-area {
text-align: center;
padding: 30px 0 10px;
}
#header .header-top .title-area a {
font-size: 50px;
font-family: 'Ruthie', cursive;
color: #222;
}
#header .header-top .header-top-util {
position: absolute;
top: 5px;
right: 10px;
}
#header .header-top .header-top-util {
font-size: 0;
}
#header .header-top .header-top-util li:first-child a {
font-size: 16px;
;
}
#header .header-top .header-top-util li {
display: inline-block;
vertical-align: middle;
margin: 0 3px;
}
#header .header-top .header-top-util li a {
color: #777;
position: relative;
}
#header .header-top .header-top-util li:nth-child(1) a:hover {
color: #333;
}
#header .header-top .header-top-util li:nth-child(1) a:hover:after {
opacity: 1;
}
#header .header-top .header-top-util li:nth-child(1) a:after {
content: '방명록';
position: absolute;
top: 22px;
left: 21px;
opacity: 0;
}
#header .header-top .header-top-util li:nth-child(2) a {
font-size: 20px;
}
#header .header-top .header-top-util li:nth-child(2) a:hover {
color: #e4405f;
}
#header .header-top .header-top-util li:nth-child(2) a:hover:after {
opacity: 1;
}
#header .header-top .header-top-util li:nth-child(2) a:after {
content: 'instagram';
position: absolute;
top: 25px;
left: -23px;
font-size: 14px;
color: #555;
opacity: 0;
}
#header .header-top .header-top-util li:nth-child(3) a {
font-size: 21px;
}
#header .header-top .header-top-util li:nth-child(3) a:hover {
color: #ffe000;
}
#header .header-top .header-top-util li:nth-child(3) a:hover:after {
opacity: 1;
}
#header .header-top .header-top-util li:nth-child(3) a:after {
content: 'kakaotalk';
position: absolute;
top: 25px;
left: -21px;
font-size: 14px;
color: #555;
opacity: 0;
}
#header .header-top .header-top-util .top-util-list.menu-toolbar {
position: relative;
}
#header .header-top .header-top-util .top-util-list.menu-toolbar img {
opacity: 0.7;
}
#header .header-top .header-top-util .top-util-list.menu-toolbar img:hover {
opacity: 1;
}
#header .header-top .header-top-util .top-util-list.menu-toolbar .header_layer.layer_profile {
display: none;
position: absolute;
}
#header .header-top .header-top-util .top-util-list.menu-toolbar.click .header_layer.layer_profile {
display: block;
}
#header .header-middle {
max-width: 1600px;
width: 100%;
margin: auto;
}
#header .header-middle .gnb-area .header-menu {
width: 100%;
}
#header .header-middle .gnb-area .header-menu ul {
font-size: 0;
max-width: 1600px;
display: block;
margin: 0 auto;
line-height: normal;
}
#header .header-middle .gnb-area .header-menu ul li.menu-category {
display: inline-block;
text-align: center;
width: 16.5%;
position: relative;
padding-bottom: 15px;
}
#header .header-middle .gnb-area .header-menu ul li.menu-category:hover > ul,
#header .header-middle .gnb-area .header-menu ul li.menu-category:hover > a:after {
display: block;
}
#header .header-middle .gnb-area .header-menu ul li.menu-category a {
color: #777;
font-size: 18px;
position: relative;
}
#header .header-middle .gnb-area .header-menu ul li.menu-category a:hover {
color: #333;
}
#header .header-middle .gnb-area .header-menu ul li > a:after {
position: absolute;
display: none;
font-size: 12px;
color: #555;
}
#header .header-middle .gnb-area .header-menu ul li:nth-child(2) a:after {
content: 'Daily cocktail';
top: 25px;
left: -25px;
width: 120px;
}
#header .header-middle .gnb-area .header-menu ul li:nth-child(3) a:after {
content: 'with Netflix';
top: 25px;
left: 20px;
width: 70px;
}
#header .header-middle .gnb-area .header-menu ul li:nth-child(5) a:after {
content: 'Tottenham Hotspur′s no.7 Sonny';
top: 25px;
left: -60px;
width: 190px;
}
#header .header-middle .gnb-area .header-menu ul li:nth-child(6) a:after {
content: ' Republic of Korea & oversea travel';
top: 25px;
left: -80px;
width: 200px;
}
#header .header-middle .gnb-area .header-menu ul li.menu-category .submenu {
display: none;
position: absolute;
top: 40px;
left: 0;
right: 0;
width: 100%;
background-color: #fff;
border-radius: 7px;
box-shadow: 0 12px 40px 0 rgba(23, 16, 159, .4), 0 70px 100px -60px rgba(23, 16, 159, .6);
z-index: 10;
}
#header .header-middle .gnb-area .header-menu ul li.menu-category .submenu:before {
width: 15px;
height: 15px;
background-color: #fff;
position: absolute;
top: 0;
left: 50%;
transform: rotate(45deg) translateX(-50%);
}
#header .header-middle .gnb-area .header-menu ul li.menu-category .submenu .submenu-category {
margin: 15px 0;
transition: all 200ms ease-in-out;
}
#header .submenu .submenu-category:hover {
transform: translateX(5px)
}
#header .header-middle .gnb-area .header-menu ul li.menu-category .submenu .submenu-category a {
font-size: 15px;
letter-spacing: -0.5px;
}
li.menu-category:nth-child(1) li a:before,
li.menu-category:nth-child(4) li a:before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
padding-right: 5px;
}
li.menu-category:nth-child(1) li:nth-child(1) a:before {
content: '\f6d3';
}
li.menu-category:nth-child(1) li:nth-child(2) a:before {
content: '\f02d';
}
li.menu-category:nth-child(1) li:nth-child(3) a:before {
content: '\f03d';
}
li.menu-category:nth-child(4) li:nth-child(1) a span {
background-image: url(images/img_tistory.png);
display: inline-block;
width: 13px;
height: 15px;
background-size: contain;
background-repeat: no-repeat;
margin-right: 5px;
vertical-align: middle;
}
li.menu-category:nth-child(4) li:nth-child(2) a:before {
content: '\f641';
}
#header .header-fixed {
display: none;
z-index: 999;
background: #fff;
width: 100%;
box-shadow: 0 4px 24px 0 rgba(103, 151, 255, .1), 0 12px 64px 0 rgba(103, 151, 255, .1);
}
#header.fixed .header-fixed {
position: fixed;
top: 0;
left: 0;
display: block;
}
#header.fixed .header-fixed .header-fixed-wrap {
max-width: 1600px;
margin: auto;
display: flex;
align-items: center;
flex-wrap: wrap;
}
#header .header-fixed .header-fixed-title .blog-title {
font-size: 30px;
font-family: 'Ruthie', cursive;
color: #222;
padding: 10px 20px;
display: inline-block;
}
#header .header-fixed .header-fixed-menu {
display: flex;
flex: 1;
height: 60px;
line-height: 60px;
justify-content: center;
}
#header .header-fixed .header-fixed-menu ul {
display: flex;
justify-content: space-evenly;
flex: 1;
}
#header .header-fixed .header-fixed-menu ul li {
display: inline-block;
position: relative;
padding-bottom: 15px;
margin: 0 10px;
}
#header .header-fixed .header-fixed-menu ul li a {
color: #777;
}
#header .header-fixed .header-fixed-menu ul li .submenu {
display: block;
display: none;
position: absolute;
top: 55px;
left: -50%;
width: 200px;
background-color: #fff;
border-radius: 7px;
box-shadow: 0 12px 40px 0 rgba(23, 16, 159, .4), 0 70px 100px -60px rgba(23, 16, 159, .6);
z-index: 10;
}
#header .header-fixed .header-fixed-menu ul li .submenu:before {
content: '';
width: 15px;
height: 15px;
background-color: #fff;
position: absolute;
top: 0;
left: 50%;
transform: rotate(45deg) translateX(-50%);
}
#header .header-fixed .header-fixed-menu ul li:hover > .submenu {
display: block;
}
#header .header-fixed .header-fixed-menu ul li:nth-child(4) .submenu {
left: -150%;
}
#header .header-fixed .header-fixed-menu ul li .submenu li {
width: 100%;
text-align: center;
padding: 0;
margin: auto;
}
#header .header-fixed .header-fixed-menu ul li .submenu li:last-child {
padding-bottom: 10px;
}
#header .header-fixed .header-fixed-menu ul li .submenu li:first-child {
padding-top: 10px;
}
#header .hamburger {
cursor: pointer;
display: none;
}
#header .hamburger span {
display: block;
background: #2d53fe;
width: 24px;
height: 3px;
transform-origin: center;
transition: 300ms all cubic-bezier(.4, 0, .2, 1);
}
#header .hamburger span:nth-child(2) {
margin: 4px 0;
}
@media screen and (min-width: 1061px) {
#header .header-middle,
#header.fixed .header-fixed .header-fixed-menu {
display: block !important;
}
}
/* ----- media query - tablet & mobile ----- */
@media screen and (max-width: 1060px) {
#header .header-middle {
display: none;
}
#header .header-middle .gnb-area .header-menu ul {
display: flex;
flex-direction: column;
}
#header .header-middle .gnb-area .header-menu > ul {
padding: 15px;
}
#header .header-middle .gnb-area .header-menu ul li.menu-category {
width: 100%;
}
#header .header-middle .gnb-area .header-menu ul li.menu-category .submenu {
display: block;
position: static;
box-shadow: none;
}
#header .header-middle .gnb-area .header-menu .menu-category.parent:after {
content: '\f107';
font-family: 'font awesome 5 free';
font-weight: 900;
position: absolute;
top: 0;
right: 0;
border: 1px solid #ddd;
font-size: 20px;
width: 25px;
height: 25px;
border-radius: 5px;
text-align: center;
line-height: 25px;
cursor: pointer;
}
#header .header-middle .gnb-area .header-menu .menu-category.parent.active:after {
content: '\f106';
}
#header li.menu-category li a:before,
#header li.menu-category li a:after {
content: none;
}
#header li.menu-category:nth-child(4) li:nth-child(1) a span {
background-image: none;
margin: 0;
padding: 0;
}
#header .hamburger {
display: inline-block;
position: absolute;
top: 50px;
right: 30px;
}
#header .hamburger.click span:first-child,
#header.fixed .hamburger.click span:first-child {
transform: translateY(6px) rotate(45deg);
}
#header .hamburger.click span:nth-child(2),
#header.fixed .hamburger.click span:nth-child(2) {
opacity: 0;
}
#header .hamburger.click span:last-child,
#header.fixed .hamburger.click span:last-child {
transform: translateY(-8px) rotate(-45deg);
}
/*
header fixed
*/
#header.fixed .hamburger {
display: block;
position: fixed;
top: 20px;
right: 30px;
z-index: 999;
}
#header.fixed .header-fixed .header-fixed-wrap {
position: relative;
}
#header .header-fixed .header-fixed-title {
display: block;
width: 100%;
height: 60px;
border-bottom: 1px solid #ddd;
}
#header.fixed .header-fixed .header-fixed-menu {
display: none;
height: auto;
line-height: normal;
}
#header.fixed .header-fixed .header-fixed-menu > ul {
flex-direction: column;
padding: 15px;
}
#header.fixed .header-fixed .header-fixed-menu li {
padding: 0;
margin: 0;
width: 100%;
padding-bottom: 5px;
}
#header.fixed .menu-category.parent {
position: relative;
}
#header.fixed .menu-category.parent:after {
content: '\f107';
font-family: 'font awesome 5 free';
font-weight: 900;
position: absolute;
top: 0;
right: 0;
border: 1px solid #ddd;
font-size: 20px;
width: 25px;
height: 25px;
border-radius: 5px;
text-align: center;
line-height: 25px;
cursor: pointer;
}
#header.fixed .menu-category.parent.active:after {
content: '\f106';
}
#header.fixed .header-fixed .header-fixed-menu li a {
display: block;
transition: all 0.3s;
}
#header.fixed .header-fixed .header-fixed-menu li a:hover {
color: #333;
}
#header.fixed .header-fixed .header-fixed-menu li .submenu {
display: block;
position: static;
box-shadow: none;
width: 100%;
border-left: 1px solid #555;
border-radius: 0;
padding-left: 10px;
margin-left: 10px;
}
#header.fixed .header-fixed .header-fixed-menu li .submenu:before,
#header.fixed .header-fixed .header-fixed-menu li .submenu li a:before {
content: none;
}
#header.fixed li.menu-category:nth-child(4) li:nth-child(1) a span {
background-image: none;
width: 0;
height: 0;
padding: 0;
margin: 0;
}
#header.fixed .header-fixed .header-fixed-menu li .submenu li {
text-align: left;
transition: all 0.2s;
}
#header.fixed .header-fixed .header-fixed-menu li .submenu li:first-child,
#header.fixed .header-fixed .header-fixed-menu li .submenu li:last-child {
padding: 0;
margin: 0;
}
}/*
search
*/
#container .search-box {
max-width: 90%;
margin: 70px auto 20px;
}
#container .search-box .search {
text-align: center;
font-size: 0; width: 400px;
max-width: 100%;
margin: auto;
}
#container .search-box .search .input-box {position: relative;}
#container .search-box .search .input-box .searchInput {
position: relative;
display: block;
border: none;
border-radius: 5px;
background: rgba(109, 124, 144, .1);
width: 100%;
margin: 16px 0;
padding: 8px 12px;
text-align: left;
border: 2px solid transparent;
-webkit-transition: 300ms all cubic-bezier(.4, 0, .2, 1);
transition: 300ms all cubic-bezier(.4, 0, .2, 1);
font-size: .9rem;
font-family: lato, sans-serif;
line-height: 1.8em;
letter-spacing: .5px;
font-weight: 700;
color: #20292f;
outline: none;
}
#container .search-box .search .input-box .searchInput:focus {border: 2px solid #2d53fe;}
#container .search-box .search .input-box .searchInput:focus ~ label {opacity: 1;}
#container .search-box .search .input-box button {
position: absolute;
top: 7px;
right: 5px;
width: 30px;
height: 30px;
background:url(./images/ico_package.png) -1px -1px no-repeat;
vertical-align:top;
border: none;
cursor: pointer;
}
#container .search-box .search .input-box label {
position: absolute;
top: -18px;
left: 0;
font-size: 12px;
opacity: 0;
transition: all,.4s;
color: #2d53fe;
}
#container .search-box .search .input-box.focus label {opacity: 1;}jquery
$(function () {
var wind = $(window);
var header = $('#header');
var headerHeight = header.outerHeight();
wind.scroll(function () {
if ($(this).scrollTop() >= headerHeight) {
header.addClass('fixed');
} else {
header.removeClass('fixed');
}
});
$('.menu-category > .submenu').parent('li').addClass('parent');
$('.menu-category.parent').on('click', function(){
$(this).toggleClass('active');
$(this).children('ul.submenu').slideToggle();
});
$('.hamburger').on('click', function () {
if ($(this).hasClass('click') == true) {
$(this).removeClass('click');
$('.header-middle').hide();
$('.header-fixed-menu').hide();
} else {
$(this).addClass('click');
$('div.header-middle').fadeIn();
$('div.header-fixed-menu').fadeIn();
}
});
});별깡솔 블로그를 방문하신 모든 분들 다시 한번 진심으로 감사드립니다
구독과 좋아요 감사합니다 : )
'Tistory > Tistory Skin Edit' 카테고리의 다른 글
| Web Font XEIcon & Font-awesome 사용하기 (0) | 2020.10.20 |
|---|---|
| 티스토리 블로그에 인스타그램 피드 Access Token & API 없이 사용하기 (5) | 2020.10.20 |
| 사이드 tag, 태그 꾸미기 (0) | 2020.10.16 |
| 사이드 최신글 인기글 꾸미기 날짜 형식 영어로 변경하기 (0) | 2020.10.15 |
| 사이드 카테고리 꾸미기 (0) | 2020.10.11 |
'Tistory/Tistory Skin Edit'의 다른글
- 현재글나만의 헤더 만들기 상단에 고정시키기