티스토리 반응형 스킨 사용시 모바일에서는 로고가 사라져서 조금 불편(?) 실제 사용자는 전혀 불편함을 느끼지 않을 수 있지만, 블로거에게는 브랜드 이미지를 부각시키기 위해 로고가 유지되어야 하므로 로고는 사용자를 검색하기 위해 지속적으로 표시되어야 하는 블로깅의 일부입니다.
로고 부분이 위로 밀리지 않고 고정되게 하려면 어떻게 해야 하나요? 소스를 자세히 살펴보니 조금 어색한 부분을 발견했습니다.
로고 윗부분과 더불어 상단 메뉴도 헤더에 담았습니다.
부득이하게 로고 상단 부분과 메뉴 상단 부분을 모두 고정하여 헤더의 내부 위치를 고정시키는 방법이 있습니다.
다만 상단 로고의 높이가 70px이고 메뉴 상단이 69px이기 때문에 내부를 수정하고 본문이 되는 컨테이너 부분의 상단을 139px로 하여 시작해야 합니다.
암튼 복잡한 설명보다는 간단한 소스 공개가 더 쉽죠? 티스토리 블로그 관리자 메뉴에서 스킨 편집으로 이동하여 CSS 섹션에서 @media screen 및 (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 화면과 (max-width:767px) { 부분을 찾아 다음 내용을 추가합니다.
변경된 것은 위쪽 테두리가 70픽셀로 줄었다는 것입니다.
#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;
}로 변경하면 됩니다.
당신이 도울 수 있기를 바랍니다.
