[수성비전자방 2022 스킨 수정기록]1. 엠원리액트 사이드바, 메뉴바 수정
수성비전자방입니다. 2021년 12월 28일 수성비전자방의 스킨이 기존 Flatinum 기반에서 엠원리액트 기반으로 변경되었습니다. 저는 엠원리액트 스킨을 그대로 쓰지 않고 수정을 많이 했어요. 그래서 그 수정 기록을 글로 남겨 보려고 합니다.
엠원리액트 스킨이 자유롭게 수정은 가능하지만, 재배포는 불가능하므로 소스코드 전체를 올려드리지는 않겠습니다. 수정 방법만 이해하실 수 있도록 일부분만 캡처하여 올리겠습니다.
수정한 것이 너무 많다 보니 여러 편으로 나누어 기록합니다. 이 글에서는 엠원리액트를 내려받아 사이드바, 메뉴바를 수정하는 것까지 다루어 보겠습니다.
엠원리액트 내려받기
1. https://m1story.tistory.com/161 에 접속합니다.
 
 
참고로 style.css의 구조는 대략 아래와 같습니다.
/* 공통 */
/* PC,태블릿 s */
@media only screen and (min-width:1062px){
}
/* ////// PC,태블릿 ///// e */
/* ///// 모바일 ///// s */
@media screen and (max-width:1062px){
}
/* ///// 모바일 ///// e */
반응형 웹 스킨의 구조를 이해하셔야 스킨을 편하게 수정하실 수 있습니다.
이제 스킨을 제 입맛대로 수정해 보겠습니다.
모바일 사이드바(메뉴바) 수정
저는 '사이드바(메뉴바)'라고 칭했지만, 엠원리액트 스킨 주석에 '네비게이션'이라고 나와 있는 부분을 수정할 것입니다.
원래 왼쪽 위에는 메뉴 버튼이 있어서 누르면 카테고리가 나오고, 오른쪽 위에는 검색 버튼이 있는데요.
이 버튼들을 오른쪽 위 메뉴 버튼으로 통합시키고, 누르면 사이드바가 나오도록 바꿀 것입니다. 기존 메뉴 버튼은 없애버리고, 검색 버튼의 이미지를 메뉴 버튼 이미지로 바꾸고, 검색 버튼을 누르면 사이드바가 나오도록 하겠습니다.
그리고 모바일 사이드바(메뉴바)를 상단에 고정하는 작업도 같이 하겠습니다.
 
2. div가 divpop1인 부분을 찾아서 해당 부분을 감싸는 <!-- s -->부터 <!-- e -->까지를 mobile3 밑으로 옮깁니다.
 
3. div id가 mobile1인 div를 주석처리합니다.
4. 방금 3번에서 주석처리한 부분 중 img src를 봅니다. 그 주소 "./images/r_category.png"
를 div id가 mobile3인 div의 img src에 넣습니다.
 
모바일 부분에서 주석이 '/* 네비게이션 (카테고리1) 모바일) s */
'인 부분을 찾습니다.
#navigation_m의 속성에 아래 소스코드를 추가합니다.
1 | position: fixed; top: 0; z-index: 10; width:100%; background-color: #ffffff; | cs |
5-1. position: fixed; top 0;는 내비게이션 바를 화면 상단에 고정하는 속성입니다.
5-2. z-index: 10;은 화면에 고정되는 것들이 여러 개 있는 상황(광고, 그림 등)에서 내비게이션 바의 우선순위를 지정한 것입니다.(숫자가 클수록 우선순위 높음.)
5-3. background-color: #ffffff;는 배경색을 흰색으로 지정한 것입니다. 배경색이 투명하면 뒤의 본문이 비치므로 필요한 속성입니다.
6. #navigation_m mobile3의 속성 중 float와 text-align을 각각 left로 합니다.
1 | #navigation_m #mobile3 {padding:9px 0 0 0; width:10%; float:left; text-align:left;} | cs |
 
body{padding-top: 35px;}
 
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번을 작성해서...)
1 | #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;} | cs |
 
13. ViewLayer2(), close_Layer() 각각 getElementById의 인자를 "divpop2"에서 "sidebar"로 변경합니다.
14. ViewLayer2()에서 display 뒤 'inline'을 'block'으로 변경합니다.
 
 
모바일 사이드바 닫기 버튼
1 | <div class="close_m"><a href="javascript:close_Layer2();"><img src="./images/close_m2.gif"></a></div> | cs |
 
검색 상자를 사이드바로 옮기기
 
 
이웃 및 구독
네이버 이웃 추가하는 방법이 궁금하시면 아래 글을 참고하시기 바랍니다.
[티스토리X네이버]2. 티스토리에 네이버 이웃커넥트 설치하기(https://toopyo.tistory.com/entry/tistorynaversection)
티스토리 구독 버튼 만드는 방법은 제가 글을 쓴 적이 없으니 다른 블로그의 글을 검색해 보시기 바랍니다.
방명록 버튼은 div id="hyper"를 만들어 넣었습니다.
안 쓰는 위젯 삭제
그 밖에 공지사항 위젯, 태그 구름, 링크 위젯, 카운터 위젯을 삭제 또는 주석 처리했습니다.
CSS 작업
style.css에서 작업하겠습니다.
우선 PC버전에서 카테고리 닫기 닫추를 숨기겠습니다. PC버전에서는 카테고리가 상시로 보여야 하므로 닫기 버튼이 필요 없죠.
1 2 3 | /* PC버전에서 카테고리 닫기 단추 숨김 s */ .close_m {display: none;} /* PC버전에서 카테고리 닫기 단추 숨김 e */ | cs |
이 코드를 CSS의 PC버전 부분에 넣으시면 됩니다.
/* 헤더 e */
위의 search 관련 속성들을 헤더 바깥으로 옮깁니다.
 
 
방명록 버튼의 글씨 크기를 20px로 설정했습니다.
블로그 소개 부분이 PC, 모바일 따로 있기 때문에 각각 수정해 주어야 합니다.(Ctrl+F로 잘 찾아 보세요.)
1 | #hyper a {font-size: 20px;} | cs |
이건 방명록 글씨 크기를 20px로 설정하는 코드입니다. 참고하시기 바랍니다.
참고 자료
1) 낭만인. 2021. "
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
제 글을 읽어 주셔서 감사합니다.
참고로 여러분이 이 글을 보실 때에는 스킨이 또 일부 수정되어 있을 수 있다는 점 말씀드립니다.
다음에 만나요!
'프로그래밍 > 웹개발(HTML, CSS, JS 등)' 카테고리의 다른 글
엠원리액트 댓글에 프로필사진 보이게 하기 (0) | 2022.05.02 |
---|---|
[수성비전자방 2022 스킨 수정기록]4. description 삭제 및 스킨 적용 (0) | 2022.03.12 |
[수성비전자방 2022 스킨 수정기록]3. 글 목록(본문 미리보기), 본문 (0) | 2022.03.09 |
[수성비전자방 2022 스킨 수정기록]2. 헤더, 댓글, 방명록, 이웃 및 구독 (0) | 2022.01.15 |
[꿀팁]웹 색상 코드(안전 컬러) 머릿속으로 생각해 내기 (0) | 2016.11.05 |