'spiderweb'에 해당되는 글 2건

  1. 마크쿼리 SpiderWeb v3.0.0b 상단네비 고정하기 6
  2. 마크쿼리! 반응형 웹 블로그 스킨 적용하기! 2

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

마크쿼리의 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; 정도 주시면됩니다~

 

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

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

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

 

제 블로그는 처음부터! 마크쿼리의 Skeleton스킨을 적용하고 있었습니다.

이 스킨의 장점으로는 심플하면서도! 무엇보다 부트스트랩(bootstrap)을 기반으로한 반응형 웹 이라는 점입니다.

 

반응형 웹 이란?

페이지의 화면을 해상도의 크기에 맞게 자유자재로 변형하여 표현한 것입니다.

스마트폰을 예로들면 PC의 모니터와 스마트폰의 크기는 다릅니다.

모니터의 화면을 스마트폰에 그대로 나타내려면 스크롤이 길어지겠죠??

하지만 반응형 웹을 적용하면 스마트폰의 해상도에 맞게 메뉴나 본문의 내용을 조정하여 스크롤 없이 표현할 수 있습니다.

 

처음 블로그를 시작했을때 1.2.1버전 이었는데 오늘! 드디어 skeleton 3.0.0b버전을 적용했습니다!

 

공식 홈페이지 : http://markquery.com/

마크쿼리 커뮤니티 : http://markquery.com/community/

 

스킨 다운로드와 적용방법

우선 스킨을 받아야 겠죠?? http://markquery.com/에 접속하여 Download - Tistory 탭을 클릭! 

 

저는 Spider's Web을 사용하고 있습니다.

Doo Be Doo 의경우 사이드바를 없애고 본문 영역이 넓은 스킨입니다. 취향에 맞게 다운로드 해주세요!

다운로드후 과감히 압축을 풀어주고 티스토리의 관리자 화면에 들어갑니다!

 

스킨 - 스킨등록 버튼을 클릭합니다.

스킨을 등록하기전에 이전에 사용중인 스킨은 스킨저장버튼을 눌러 꼭 저장해두세요!

 

추가 버튼을 눌러 스킨이있는 폴더의 내용을 업로드 해주면되는데 grunt를 제외한 모든파일을 올려줍니다.

스킨폴더안에 폴더가 또있는경우 같이 지정해서 올리면 폴더의 내용은 안올라갈 수도 있기때문에

추가 버튼을 눌러 images폴더안에 들어가 images폴더안의 내용도 전부 올려줍니다!

 

추가 버튼을 눌러 스킨폴더안의 images폴더 내용 전부를 추가!

추가후 스킨명을 지정해주고 저장버튼을 누르면 됩니다.

 

저장후 보관함에서 마크쿼리 스킨을 적용버튼을 눌러 적용해주면 끝입니다!

 

v3.0.0을 적용후 v1.2.1과 비교해 봤습니다.

 

PC에서의 v1.2.1 

 

PC에서의 v3.0.0b 

3.0.0버전으로 오면서 상단 HOME쪽의 고정기능이 사라졌습니다. 전 플로팅메뉴가 좋아 다시 넣었습니다. 헤헤

또 상단 메뉴에 마우스오버시 회색으로 색상변경이 되며 드롭다운 메뉴도 만들어졌네요 ㅎㅎ

또한 기존의 글꼴과 글꼴크기 변경 위치가 변경되었고 클립모양의 아이콘을 클릭하게되면 인쇄가 가능합니다!

search바 위치도 카테고리 위로 변경되었네요 상단 이미지는 skin.html인데 title대신 이미지를 넣을수 있게끔 변경되었습니다.

 

모바일 v1.2.1 

 

모바일 v3.0.0b 

 

1.2.1의 경우 상단 홈메뉴가 고정메뉴 이며 ▤ 아이콘을 클릭하면 드롭다운 형식으로 카테고리와 search바가 나타납니다.

3.0.0b의 경우 상단에 ▤ 아이콘만 있으며 고정메뉴는 아닙니다. 아이콘을 클릭하면 드롭다운형태로 나타나게 되며

카테고리 메뉴가 존재할경우 V 아이콘을 눌러 하위메뉴를 드롭다운 형식으로 표현합니다.

 

저는 3.0.0b버전을 사용하면서 폰트와 검색 기능은 상단에 주고 상단메뉴를 고정 메뉴로 주었습니다.

또한 폰트와 검색이있던 태그를 없애 버리면서 최대한 본문의 내용이 많이 보이게끔 수정했죠 ㅎㅎ

상단 배너도 사이즈를 크게 줄였고요.. CSS를 잘알지못해 수정하는데 오랜시간이 걸렸지만..

크롬의 개발자도구(F12)로 하나씩 적용해가면서 하니 공부도 많이 되네요.. ^^

항상 티스토리 블로그를 운영하면서 반응형 스킨을 제공하지 않는점이 안타까웠는데

마크쿼리 스킨은 현재 무료로 배포중인데다 유료 못지않은 뛰어난 퍼포먼스를 자랑하는 반응형 웹 스킨인것 같습니다!