이번에는 좌측 메뉴를 열었을 때 검색창을 추가하는 방법입니다.
티스토리에서 블로그 스킨등 업데이트가 있을 때 커스터마이징을 해둔다면
한번에 적용되지 않는 등의 불편함이 있을 수 있습니다.
따라서 가급적이면 손을 데지 않으려고 하고있으며,
최소한의 변경만 가미할 생각입니다.
'튜닝의 끝판왕은 순정' 이라는 말이 괜히 나온게 아니죠.
이것 저것 만지다보면 나중에 어디를 수정했는지 본인도 잊어버립니다.
지금까지 기본 스킨 "Poster"에서 설정한 부분은 이전 글을 참조해주세요.
티스토리 Poster 스킨 메뉴 펼침 설정하기 (포스터 스킨)
1. 변경 전/후 비교
원래 메뉴에는 검색창이 없습니다.
아래 처럼 검색창을 추가하였습니다.
2. 수정방법 #1: 메뉴버튼 위치 고정
이전에 넓은 화면에서 접속시 좌측 메뉴를 펼쳐놓는 것을 기본 값으로 하는 설정을 했습니다.
한가지 문제가 있는데 메뉴 버튼이 스크롤을 하면 위치가 이동해버립니다.
메뉴는 스크롤을 내려도 그자리에 있는데,
메뉴 버튼은 스크롤을 내리면 따라움직여서 좀 불편합니다.
메뉴버튼 위치를 고정하는 것도 같이 해보겠습니다.
티스토리 블로그 관리자 페이지 → 스킨 편집 → 우측 HTML편집 → CSS 클릭
"#header .mobile-menu {" 를 검색해서 아래 위치를 찾아갑니다.
position: fixed; 로 바꾸어줍니다.
주석기능을 이용해서 나중에 수정한 부분을 찾을 수 있게 일정한 키워드를 부여합니다.
글쓴이는 "스킨수정"이라는 단어를 포함해서 주석을 넣고있습니다.
/* 210610 스킨수정 */
/* was: position: fixed; */
/* is : position: absolute; */
#header .mobile-menu {
position: fixed;
top: 20px;
left: 33px;
z-index: 500;
width: 40px;
height: 40px;
outline: none;
}
3. 수정방법 #2: 검색창 추가
이번에는 메뉴 내용에 검색창을 추가하는 방법입니다.
3-1. HTML 검색창 부분 주석처리
HTML 편집으로 들어가서 "<div class="search">"을 찾습니다.
<div 로 시작해서 </div>로 끝나는 블럭을 통째로 주석처리 합니다.
HTML의 주석처리는 CSS와 다르게 <!-- 시작 끝 --> 으로 주석처리 합니다.
아래 사진처럼 주석으로 감싸놓겠습니다.
3-2. 검색창 HTML코드 위치이동
밑의 코드를 복사 합니다.
<!-- 210610 스킨수정, 검색창 위치 변경 -->
<!-- class search 통으로 복사해서 조금 수정함 -->
<!-- 복사시작 -->
<div class="search">
<s_search><fieldset>
<input type="text" name="" value="" placeholder="Search..." onkeypress="if (event.keyCode == 13) { }">
<button onclick="" type="button"><i class="search_icon"></i></button>
</fieldset></s_search>
</div>
<!-- 복사끝 -->"<div class="menu">" 을 검색해서 그 아래에 복사한 블럭을 붙여넣습니다.
placeholder 안의 텍스트는 검색창에 표시될 Hint문구입니다.
Search... 으로 변경하였습니다.
3-3. 검색창 CSS코드 수정
CSS편집으로 들어가서 "#header .search {"를 검색합니다.
검색되어 나온 위치부터 대대적인 수정을 합니다.
Search모듈이 시작되는 곳 부터 끝나는 전체를 주석처리 합니다.
시작 위치: #header .search {
종료 위치: #header .search.on:before {
그리고 아래 코드를 밑에 붙여넣습니다. 대체해 주는것입니다.
/* 변경 후 (코드 대체) */
#header .search {
margin-bottom: 90px;
}
#header .search fieldset {
width: 220px;
position: absolute;
margin-top: 10px;
padding-right: 40px;
border-bottom: 1px solid #000;
}
#header .search input {
width: 100%;
height: 40px;
padding: 1 0px;
border: 0;
font-size: 1em;
line-height: 1.5714;
box-sizing: border-box;
color: #000;
background-color: rgba(0,0,0,0);
}
#header .search button {
position: absolute;
top: 0;
right: 0;
cursor: pointer;
font-size: 1em;
width: 40px;
height: 40px;
background: url(./images/ico_package.png) no-repeat 0 0;
color: #fff;
}
/* 변경 종료 */
3-4. 반응형 CSS 꺼주기
마지막 설정입니다.
PC말고 모바일 등의 화면크기에서 접속시,
이동해준 검색창이 잘 작동하게 만들기 위해서 아래 설정을 합니다.
@media screen and (max-width:1023px) {
를 찾아 들어가서 search에 해당하는 코드를 주석처리 합니다.
@media screen and (max-width:1023px) {
/* 210610 스킨수정, 검색창 위치변경 */
/*
#header .search.on {
width: 180px;
}
*/
#content .guest_inner,
#content>.inner {
padding: 0 40px;
}
@media screen and (max-width:767px) {
를 찾아 들어가서 search에 해당하는 코드를 주석처리 합니다.
#header h1 a {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 210610 스킨수정, 검색창 위치변경 */
/*
#header .search {
top: 10px;
right: 1px;
}
#header .search.on {
position: absolute;
top: 60px;
left: 0;
right: auto;
z-index: 100;
width: 100%;
padding: 10px 18px 10px 17px;
border: 0;
background-color: #fff;
box-sizing: border-box;
}
#header .search.on input {
border-bottom: 1px solid #000;
}
#header .search.on button {
top: -50px;
right: 1px;
}
*/
#content .guest_inner,
#content>.inner {
4. 스킨관련 보물 블로그
스킨 수정과 관련된 내용을 찾다가 엄청난 블로그를 발견했습니다.
티스토리 스킨을 직접 개발/배포 해주시는 분의 블로그입니다.
자바스크립트와 CSS, HTML 언어 관련된 서적도 출판하신 분이네요.
역시 어느 분야던 전문가는 항상 있는 것 같습니다.
완성된 스킨을 무료배포 해주는 곳을 찾아서 그런지,
배포본을 사용할까,, 아니면 수작업으로 조금씩 고치는걸 계속할까 고민스럽네요.
일단 하던데로 기본 스킨 기준으로 필요한 부분만 조금씩 수정하기로 합니다.
'컴퓨터, IT > 블로그, WEB' 카테고리의 다른 글
| 원격소프트웨어 주관비교 (Feat. 크롬 원격데스크톱 전체화면 하는 방법) (1) | 2021.06.14 |
|---|---|
| 티스토리 메뉴에 배경화면 추가하기 (Poster 스킨수정) (0) | 2021.06.11 |
| [블로그 플랫폼 비교] 네이버 vs 티스토리 vs 블로거 (0) | 2021.06.10 |
| 티스토리 Poster 스킨 메뉴 펼침 설정하기 (포스터 스킨) (9) | 2021.06.08 |
| 티스토리 검색 설정 하기 (네이버 + 구글) (0) | 2021.06.03 |
