[수성비전자방 2022 스킨 수정기록]1. 엠원리액트 사이드바, 메뉴바 수정

수성비전자방입니다. 2021년 12월 28일 수성비전자방의 스킨이 기존 Flatinum 기반에서 엠원리액트 기반으로 변경되었습니다. 저는 엠원리액트 스킨을 그대로 쓰지 않고 수정을 많이 했어요. 그래서 그 수정 기록을 글로 남겨 보려고 합니다.
엠원리액트 스킨이 자유롭게 수정은 가능하지만, 재배포는 불가능하므로 소스코드 전체를 올려드리지는 않겠습니다. 수정 방법만 이해하실 수 있도록 일부분만 캡처하여 올리겠습니다.
수정한 것이 너무 많다 보니 여러 편으로 나누어 기록합니다. 이 글에서는 엠원리액트를 내려받아 사이드바, 메뉴바를 수정하는 것까지 다루어 보겠습니다.

엠원리액트 내려받기

1. https://m1story.tistory.com/161 에 접속합니다.

 

2. 스크롤을 내리다 보면 첨부파일이 있습니다. 클릭하여 내려받은 후 압축을 해제합니다.

 

3. 소스코드 편집기(ex. VS Code)로 실행해 보면 HTML, CSS 파일에 주석으로 설명이 다 쓰여 있습니다. 시작 부분에는 's'로, 끝 부분에는 'e'로 구분해 두어서 수정하기 편리합니다.
참고로 style.css의 구조는 대략 아래와 같습니다.

/* 공통 */

/* PC,태블릿 s */

@media only screen and (min-width:1062px){

}
/* ////// PC,태블릿 ///// e */    

/* ///// 모바일 ///// s */
@media screen and (max-width:1062px){

}
/* ///// 모바일 ///// e */

반응형 웹 스킨의 구조를 이해하셔야 스킨을 편하게 수정하실 수 있습니다.

이제 스킨을 제 입맛대로 수정해 보겠습니다.

모바일 사이드바(메뉴바) 수정

저는 '사이드바(메뉴바)'라고 칭했지만, 엠원리액트 스킨 주석에 '네비게이션'이라고 나와 있는 부분을 수정할 것입니다.
원래 왼쪽 위에는 메뉴 버튼이 있어서 누르면 카테고리가 나오고, 오른쪽 위에는 검색 버튼이 있는데요.
이 버튼들을 오른쪽 위 메뉴 버튼으로 통합시키고, 누르면 사이드바가 나오도록 바꿀 것입니다. 기존 메뉴 버튼은 없애버리고, 검색 버튼의 이미지를 메뉴 버튼 이미지로 바꾸고, 검색 버튼을 누르면 사이드바가 나오도록 하겠습니다.
그리고 모바일 사이드바(메뉴바)를 상단에 고정하는 작업도 같이 하겠습니다.

 

1. index.html에서 주석이 네비게이션 (카테고리1) (모바일) s인 부분을 찾습니다.
2. div가 divpop1인 부분을 찾아서 해당 부분을 감싸는 <!-- s -->부터 <!-- e -->까지를 mobile3 밑으로 옮깁니다.

 

위 스크린샷(아래 3~4번)은 오른쪽 위 버튼의 모양을 메뉴 버튼 이미지(햄버거 버튼)로 바꾸는 장면입니다.
3. div id가 mobile1인 div를 주석처리합니다.
4. 방금 3번에서 주석처리한 부분 중 img src를 봅니다. 그 주소 "./images/r_category.png"를 div id가 mobile3인 div의 img src에 넣습니다.

 

5. style.css를 보겠습니다.
모바일 부분에서 주석이 '/* 네비게이션 (카테고리1) 모바일) s */'인 부분을 찾습니다.
#navigation_m의 속성에 아래 소스코드를 추가합니다.

position: fixed; top: 0; z-index: 10; width:100%; background-color: #ffffff;

5-1. position: fixed; top 0;는 내비게이션 바를 화면 상단에 고정하는 속성입니다.
5-2. z-index: 10;은 화면에 고정되는 것들이 여러 개 있는 상황(광고, 그림 등)에서 내비게이션 바의 우선순위를 지정한 것입니다.(숫자가 클수록 우선순위 높음.)
5-3. background-color: #ffffff;는 배경색을 흰색으로 지정한 것입니다. 배경색이 투명하면 뒤의 본문이 비치므로 필요한 속성입니다.

6. #navigation_m mobile3의 속성 중 float와 text-align을 각각 left로 합니다.

#navigation_m #mobile3 {padding:9px 0 0 0; width:10%; float:left; text-align:left;}    

해당 Line은 위와 같이 됩니다.

 

6-1. 5번에 의해 내비게이션 바가 상단에 고정되면 블로그 내용이 내비게이션 바에 가려지므로 body에 padding-top: 35px; 속성을 추가합니다.(내비게이션 바 높이가 35px입니다.)

body{padding-top: 35px;}

 

계속해서 CSS의 모바일 부분을 보겠습니다.
7. 이번에는 /* 사이드바 s */를 찾습니다. 5~6번과 마찬가지로 모바일 부분에서 찾으셔야 합니다. 주석 /* 사이드바 s */ 바로 아래에 있는 줄에서 8~12번과 같이 합니다.
8. position: fixed; 화면의 특정 부분에 고정하는 역할을 합니다.(9번 참고)
9. top: 35px; 35px은 헤더가 위치할 부분입니다.(다음 글에서 보충설명 예정)
10. display: none으로 합니다. 메뉴 버튼을 눌러야 사이드바가 보이게 할 계획입니다.
11. background-color: #ffffff로 합니다. 사이드바가 화면 위에 떴을 때 본문이 겹쳐 보이는 것을 방지하기 위해 배경색을 지정한 것입니다.
11-1. height: 100%; overflow: scroll; 사이드바가 화면 밖으로 넘칠 때 사이드바만 따로 스크롤하기 위해 사용하는 속성입니다.
7~11-1번을 하고 나면 아래와 같이 됩니다.(11-1번이 있는 이유는 이미 그 다음 12번을 작성해서...)

#sidebar {position:fixed; top:35px; display:none; background-color: #ffffff; width:100%; height:100%; margin:0 0 0 0; float:right; line-height:145%; overflow:scroll; border-left:1px solid #dcdbe0; border-right:1px solid #dcdbe0; border-top:1px solid #dcdbe0;}

 

12. 이제 버튼 관련 코드를 쓰겠습니다. m1react.js를 편집합니다. 마지막 부분에서 함수 2개(ViewLayer2()와 close_Layer2())를 보겠습니다.
13. ViewLayer2(), close_Layer() 각각 getElementById의 인자를 "divpop2"에서 "sidebar"로 변경합니다.
14. ViewLayer2()에서 display 뒤 'inline'을 'block'으로 변경합니다.

 

15. 이제 Live Server를 열어서 확인해 봅니다. 오른쪽 위 메뉴 버튼을 누르면 사이드바가 잘 나타나는 것을 보실 수 있습니다. 스크롤도 잘 됩니다.

 

모바일 사이드바 닫기 버튼

index.html에서 <div id="mobile_search">를 찾아서 그 바로 아래 div class "close_m" 줄을 사이드바로 옮깁니다.

<div class="close_m"><a href="javascript:close_Layer2();"><img src="./images/close_m2.gif"></a></div>

이것을 사이드바로 옮기라는 뜻입니다.

 

사이드바 위젯 그룹 치환자(<s_sidebar_element>, </s_sidebar_element>)를 사용합니다. 위젯 이름을 주석으로 넣되, <s_sidebar_element>와 </s_sidebar_element> 사이에 위치시킵니다.

검색 상자를 사이드바로 옮기기

index.html의 헤더 부분에서 div class "search"를 복사(잘라내기)하여 사이드바로 옮깁니다.

 

역시 그룹 치환자를 사용하여 정리합니다.

 

검색 그룹 치환자 <s_search>가 2개씩 있다 보니 오류가 발생합니다. 기존 모바일 검색 부분을 삭제합니다. 네비게이션 (카테고리1) 모바일 부분에서 div "divpop2" 부분을 삭제(또는 주석처리)하시면 됩니다. 이때 div 여는 태그와 닫는 태그를 잘 세어서 닫으시기 바랍니다.(잘못 세면 오류 남.)

이웃 및 구독

블로그 소개 부분에서 블로그 이미지를 지우고, 이웃 추가 버튼과 티스토리 구독 버튼, 방명록 바로가기를 넣었습니다.
네이버 이웃 추가하는 방법이 궁금하시면 아래 글을 참고하시기 바랍니다.
[티스토리X네이버]2. 티스토리에 네이버 이웃커넥트 설치하기(https://toopyo.tistory.com/entry/tistorynaversection)
티스토리 구독 버튼 만드는 방법은 제가 글을 쓴 적이 없으니 다른 블로그의 글을 검색해 보시기 바랍니다.
방명록 버튼은 div id="hyper"를 만들어 넣었습니다.

안 쓰는 위젯 삭제

그 밖에 공지사항 위젯, 태그 구름, 링크 위젯, 카운터 위젯을 삭제 또는 주석 처리했습니다.

CSS 작업

style.css에서 작업하겠습니다.
우선 PC버전에서 카테고리 닫기 닫추를 숨기겠습니다. PC버전에서는 카테고리가 상시로 보여야 하므로 닫기 버튼이 필요 없죠.

/* PC버전에서 카테고리 닫기 단추 숨김 s */
.close_m {display: none;}
/* PC버전에서 카테고리 닫기 단추 숨김 e */

이 코드를 CSS의 PC버전 부분에 넣으시면 됩니다.

/* 헤더 e */ 위의 search 관련 속성들을 헤더 바깥으로 옮깁니다.

 

이때 #header는 모두 지우고, .search의 float는 left로 합니다.

 

블로그 소개 부분의 방명록 글씨가 작기 때문에 CSS에서 크기를 키워 주었습니다.
방명록 버튼의 글씨 크기를 20px로 설정했습니다.
블로그 소개 부분이 PC, 모바일 따로 있기 때문에 각각 수정해 주어야 합니다.(Ctrl+F로 잘 찾아 보세요.)

#hyper a {font-size: 20px;}

이건 방명록 글씨 크기를 20px로 설정하는 코드입니다. 참고하시기 바랍니다.

참고 자료

1) 낭만인. 2021. " 반응형 웹 디자인 - 메뉴바 (1)", 문학러, 개발자로 성장하기. (2021. 01. 03. 방문). https://romanticdeveloper.tistory.com/59
2) Dale Seo. 2018. "[CSS] 메뉴바 상단에 고정 시키기", Engineering Blog by Dale Seo. (2021. 01. 03. 방문). https://www.daleseo.com/css-position-fixed-navigation/
3) 앵오코딩. 2021. "코딩독학) CSS display, position, flex", 비전공자 개발자 코린이 공부일기. (2021. 01. 03. 방문). https://babycoder05.tistory.com/13
4) pentode. 2018. "CSS - overflow 속성 사용하기", OffByOne. (2021. 01. 03. 방문). https://offbyone.tistory.com/296
5) 나의 디딤돌. 2021. "CSS / 위치 고정 시키기 fixed 겹침 우선순위 z-index", 나의 디딤돌. (2021. 01. 07. 방문). https://didimdol20.tistory.com/95

제 글을 읽어 주셔서 감사합니다.

참고로 여러분이 이 글을 보실 때에는 스킨이 또 일부 수정되어 있을 수 있다는 점 말씀드립니다.
다음에 만나요!