티스토리 반응형 스킨을 사용하다 보면 모바일에서 로고가 스크롤 되면서 위로 사라지는 것 때문에 약간 불편함(?)을 느끼게 됩니다. 실제 사용자들은 전혀 불편하지 않을 수 있지만, 블로그를 운영하는 입장에서는 상단의 로고가 계속 머물러 있어야 브랜드 이미지를 부각할 수 있기 때문에 로고는 블로그 운영에서 지속적으로 검색 사용자에게 노출되도록 해야 하는 부분이에요.
어떻게 하면 상단의 로고 부분이 고정되어 밀려 올라가지 않도록 할 수 있을까요? 자세히 소스를 뜯어봤더니 살짝 불편한 부분이 보입니다. 상단 로고 부분 이외에 상단의 메뉴도 같이 header 부분으로 묶여 있었습니다. 어쩔 수 없이 상단 로고 부분과 상단 메뉴 부분을 모두 고정시켜서 사용하는 방법으로 header의 inner 포지션을 고정시키는 방법이 있습니다. 그런데 상단 로고는 높이가 70px이고 상단 메뉴 부분은 69px이기 때문에 inner를 고정시킨 후 본문이 되는 container 부분의 상단 마진을 139px을 주고 시작해야 합니다.
하여간 복잡한 설명보다는 간단한 소스 공개가 쉽겠지요? 티스토리 블로그의 관리자 메뉴에서 스킨 편집 들어가서 CSS 부분에서 @media screen and (max-width:767px) { 부분을 찾은 다음 아래 내용을 추가합니다.
#container {
margin-top: 139px;
}
#header {
display: flex;
justify-content: center;
}
#header .inner {
width: 100%;
padding: 0;
position: fixed;
z-index: 21; /* 20보다 높은 숫자면 됨 */
top: 0px;
transition: top 0.3s;
}그리고 상단 메뉴 부분이 배경이 투명이기 때문에 조금 아래쪽에 #gnb 부분을 찾아서 배경색을 흰색으로 넣어주면 됩니다.
#gnb {
height: 69px;
background-color: #fff;
}그런데, 혹시나 이렇게 해서 상단의 공간이 너무 넓어서 보기 싫다고 생각되는 경우 상단 공간을 줄일 수 있는 방법은 상단 메뉴를 사용하지 않는 방법이 있습니다. 꽤 깔끔하게 정리할 수 있기는 한데, 이 경우에는 자유롭게 추가할 수 있는 상단 메뉴가 없기 때문에 보기에는 좋지만 원하는 링크를 자유롭게 추가할 수 없는 단점이 있습니다. 그래도 깔끔한 것을 좋아하는 분들을 위해 참고하시라고 수정된 소스도 공개합니다.
@media screen and (max-width:767px) { 부분을 찾은 다음 아래 내용을 추가합니다. 달라진 것은 margin-top가 70px로 줄어든 것입니다.
#container {
margin-top: 70px;
}
#header {
display: flex;
justify-content: center;
}
#header .inner {
width: 100%;
padding: 0;
position: fixed;
z-index: 21; /* 20보다 높은 숫자면 됨 */
top: 0px;
transition: top 0.3s;
}그리고 당연히 상단 메뉴를 사용하지 않기 때문에
#gnb {
height: 69px;
}
#gnb ul {
margin-left: 0;
}
#gnb ul li {
padding: 0 24px;
}
#gnb ul li a {
padding: 25px 0 24px;
}부분을 찾아서 간단하게
#gnb {
display: none;
height: 69px;
}
#gnb ul {
margin-left: 0;
}
#gnb ul li {
padding: 0 24px;
}
#gnb ul li a {
padding: 25px 0 24px;
}으로 바꿔주면 됩니다.
역시 PC 스타일도 display: none;을 추가해서 바꿔줍니다.
#gnb {
display: none;
}도움이 되시면 좋겠네요.
댓글