마크쿼리 SpiderWeb v3.0.0b 상단네비 고정하기

최근 기사 시험때문에 공부하느라 오랜만에 들어왔습니다.

마크쿼리의 SpiderWeb이 3.0.0b버전으로 오면서 상단 고정이풀리게 되었는데요.

이번엔 상단 메뉴고정과 글자크기, 인쇄쪽 탭도함께 상단메뉴로 고정시키는 방법에 대해 알아보겠습니다!

 

 

상단 메뉴를 고정하는 방법!

티스토리 관리자 페이지에서

body의 padding-top: 50px;를 감싸고 있는 /* */를 제거해 줍니다!

그후 .skeleton-nav에 다음과같이 포지션과 left,right, top을 0으로 넣어줍니다!

 

 .skeleton-nav {
  /* padding: 0 20px; */
  padding:0 20px;
  border-left:1px solid #ccc;
  border-right:1px solid #ccc;
  border-bottom:1px solid #ccc;
  background-color:#fff;
  z-index:1030;
  position: fixed;
left: 0;
right: 0;
top: 0;
} 

 

 

상단 메뉴 고정상태

 

이번엔 상단 메뉴 밑에있는 T + - 인쇄 버튼을 상단 고정메뉴위치로 끌어 올려보겠습니다!

일단 skin.html 에서 다음 소스를 삭제해 줍니다!

Ctrl + F 로 skeleton-mid-banner를 검색하신후 <div class="container skeleton-mid-banner"> 에서

마지막 주석문으로 .container skeleton-mid-banner까지 지워주시면 됩니다.

지우기전에 메모장 등에 복사하는게 좋습니다. 왜냐하면 지운 인쇄버튼을 상단에 넣어야하거든요..

 

 ㅎㅎ 없어졌죠??

 

이제 skin.html에 인쇄쪽 기능을 넣어주는 메뉴를 만들어 보겠습니다!

skin.html에서 </nav>윗부분에 삭제했던 기능들을 몇개 복사해서 넣어주면 됩니다.

저는그냥 위에서 삭제한 btn-group div의 안에 검색까지 넣어서 추가했습니다.

 

추가후 위치 조정을 해줘야하는데 저같은경우 style.css에 오른쪽 정렬을 추가해주었습니다.

 

 	.btn-group{
		float: right;
		margin-bottom: 3px;
	} 

 

 

적용후! 

 

모바일 에서도! 

 

이번엔 모바일에서 상단메뉴의 위치조정과 버튼 삽입에 대해 알아보겠습니다. 

 

Home버튼 안다실분은 div 추가안해주셔도 되요.. ^^

우선 skin.html에서 btn-group클래스 앞에 다음과 같이 div와 id나 class명을 지정해 줍니다! 저는 move-home이란 아이디로!

  

 

style.css 에서 move-home에 대한 추가!

이 과정은 데스크탑 모드에서 홈버튼을 숨겨주는 것입니다.

 #move-home{	
	display: none;
	padding: 10px 0 0 0;
	float: left;
	font-size: 15pt;
}
#move-home a{
	color: black;
} 

 

 

Ctrl + F로 @media screen and (max-width: 768px)를 찾고 속성값을 변경하면 되는데

@media screen and (max-width: 768px) 이 부분이 모바일 해상도에서의 CSS속성입니다.

 다음과 같이 CSS를 추가해 줍니다. move-home의 경우 안하실분은 추가안하시면 됩니다.

모바일상에서 .btn-group의 위치를 조정해 주고

 

Ctrl + F로 .nav-mobile을 검색해 320px ~ 768px 부분의 .nav클래스의 패딩값도 삭제해줍니다.

적용! 

 

홈 밑의 두줄같이 나오는게 보기싫으 시면 bottom값을 더주면 되는데 .btn-group에

padding-bottom: 5px; 정도 주시면됩니다~

 

이상 포스팅을 마치겠습니다!

몇몇 분들께서 스킨 수정법에 대해 알려달라고 하셔서 끄적여 봤습니다.

길고.. 설명하기도 복잡할것 같아 이렇게 글남겼습니다. 혹시나 막히거나 하는부분 있으면 댓글 달아주세요! ^^