메인화면 구성 마음대로 바꾸기

이 글은 FastBoot v1.6 이상과 관련이 있습니다.

  좀 오래 기다리게 해드린 것 같네요. 쉬운 반응형 스킨을 사용하게 해드리려고 1.6에서 티에디션을 패기있게 제거하긴 했는데 어떻게 하면 편하게 디자인을 수정하실 수 있게 해드릴까 많은 고민을 했습니다. 그 결과 어느정도 해결책을 찾은 것 같습니다. 길게 설명드리지 않겠습니다. 우선 수정해야하실 부분에 대해 말씀드리겠습니다. 사실 수정하는 입장에서는 저번 강좌와 거의 비슷합니다. 이 글이 바로 이해가 되지 않으시면 아래 글을 한번 참고하여 보세요.

2014/05/15 - [반응형 티스토리/FastBoot] - 메인화면 커스텀 기초 - 사이드바 나타나게 하기

CSS변경

  아쉽게도 일단은 사이드바가 없는 버전입니다. 사이드바가 필요하실 분은 일단 저번 강좌를 추가해서 한번 넣어보시는 것도 좋으실 듯 합니다. 요청하는 분들이 많게 된다면 사이드바 있는 버전으로 한번 더 올릴 계획입니다.

	
document.write('<style>#content,#sidebar{display:none}#coverDiv{min-height:100%;margin-bottom:50px;display:block}#coverDiv img{float:right;padding-left:10px;max-width:100%}#coverDiv .info p{margin-bottom:50px}#coverDiv .col-md-12,#coverDiv .col-md-2,#coverDiv .col-md-3,#coverDiv .col-md-4,#coverDiv .col-md-6{padding:10px}#coverDiv .col-md-2 img,#coverDiv .col-md-3 img,#coverDiv .col-md-4 img{float:none;display:block;margin:auto;padding:0}#coverDiv .col-md-3 img,#coverDiv .col-md-2 img{display:none}#coverDiv .col-md-12 img{max-height:200px}#coverDiv .col-md-6 img{max-height:150px}#coverDiv p.des{font-size:12px}#coverDiv .col-md-12 img{float:left;padding-left:0;padding-right:10px}#coverDiv div.thumbImages{margin:30px 10px;height:185px;overflow:hidden;text-align:center}#coverDiv div.thumbImages img{padding:0;margin:5px;float:none}#coverDiv h5{margin-bottom:5px}#coverDiv .pubDate{float:right;font-weight:700}#coverDiv .loading{height:1080px}#coverDiv img{-ms-filter:"alpha(Opacity=80)";filter:alpha(opacity=80);-moz-opacity:.8;opacity:.8}#coverDiv img:hover{-ms-filter:"alpha(Opacity=100)";filter:alpha(opacity=100);-moz-opacity:1;opacity:1}#outer_btn_left,#outer_btn_right{display:none!important}@media screen and (max-width:767px){#coverDiv .col-md-12 p.des,#coverDiv .col-md-6 p.des, #coverDiv .col-md-4 p.des, #coverDiv .col-md-3 p.des, #coverDiv .col-md-2 p.des{display:none}#coverDiv .col-md-3 img,#coverDiv .col-md-2 img{display:block}#coverDiv .col-md-12 img,#coverDiv .col-md-6 img{padding:0;width:100%;height:auto;max-height:none}}.contentPadding{background-color:#fff;padding:10px;margin:5px;-webkit-box-shadow:0 1px 2px rgba(0,0,0,.2);-moz-box-shadow:0 1px 2px rgba(0,0,0,.2);box-shadow:0 1px 2px rgba(0,0,0,.2)}</style>'); 
	

  저번 강좌와 마찬가지로 skin.html의 head부분에 비슷하게 생긴 부분에 대신 넣어주시면 됩니다. 위 코드는 다양한 사이즈의 메인화면 사용을 위해 수정되었습니다.

JS변경

  아래 파일을 다운로드 받으시거나 fastboot_index.js라는 파일로 아래 코드를 복사 & 붙여넣기 하셔서 업로드 전에 임시로 저장하시면 됩니다.

fastboot_index.js

	
if(rssLogFlag){
	/* Simply make up your index design! --------------------------
	   12 is 1 row. 6 + 6 = 12, so this is the 1 row, too.
	   Examples: 6 + 3 + 3 / 4 + 4 + 4 / 3 + 3 + 3 + 3 / 3 + 6 + 3... */
	var index_design = [12, 6, 6, 4, 4, 4, 3, 3, 3, 3, 3, 3, 2, 2, 2];
	/* index_design = [12, 6, 6, 6, 6]; ==> Default Design */
	$.ajax({
		url:"/rss",
		dataType:"xml",
		success:function(rss){
			var tmpMediaContents = new Array;
			var tmpMediaImages='';
			$('#coverDiv .loading').remove();
			$(rss).find('item').each(function() {
				var link = $(this).children('link').text();
				var title = $(this).children('title').text();
				var des = $(this).children('description').text();
				var date = $(this).children('pubDate').text();
				var img = '';
				date = date.substr(0, date.length - 6)
				if(des.match("http://cfile(.*?)\"")!=null){
					var a = des.match("http://cfile(.*?)\"")[0];
					a = a.substring(0,a.length-1);
					img = a;
					a = a.replace('image', 'C80x80');
					a = a.replace('original', 'C80x80');
					tmpMediaImages+='<a href="'+link+'"><img src="' + a + '"/></a>';
				}
				des = des.replace(/(<([^>]+)>)/ig,"").substring(0,800);
				tmpMediaContents.push('<a href="' + link + '"><img src="'+img+'"/><h5>'+title+'</h5></a>'+'<p class="des">'+des+'</p>'+'<h6 class="pubDate">'+date+'</h6><div class="clearfix"></div>');
			})

			var row_tmp = 0;
			var des_tmp = '';
			for (i=0; i<index_design.length; ++i) {
				var content_tmp = $(tmpMediaContents[i]);
				if(index_design[i] == 6) {
					content_tmp.siblings('.des').html(content_tmp.siblings('.des').html().substring(0,600) + '...');
				} else if(index_design[i] == 4) {
					content_tmp.siblings('.des').html(content_tmp.siblings('.des').html().substring(0,400) + '...');
				} else if(index_design[i] == 3) {
					content_tmp.siblings('.des').html(content_tmp.siblings('.des').html().substring(0,250) + '...');
				} else if(index_design[i] == 2) {
					content_tmp.siblings('.des').html(content_tmp.siblings('.des').html().substring(0,120) + '...');
				}
				var wrap_tmp = $('<div class="col-md-'+ index_design[i] +'"><div class="contentPadding"></div></div>');
				wrap_tmp.children('.contentPadding').html(content_tmp);
				$('#coverDiv').append(wrap_tmp);
				row_tmp += index_design[i];
				if (row_tmp >= 12) {
					$('#coverDiv').append('<div class="row"></div>');
					row_tmp = 0;
				}
			}
			$('#coverDiv').append('<div class="clearfix"></div><div class="thumbImages">'+tmpMediaImages+'</div>');
		},
		error:function() {

		}
	});
} 
	

 여기서 이제 어디를 수정해야하실지 바로 보이실 텐데요, 맨 윗줄의 변수 하나만 바꾸면 아주 편하게 구성을 바꾸실 수 있습니다.

	
var index_design = [12, 6, 6, 4, 4, 4, 3, 3, 3, 3, 6, 2, 2, 2]; 
	

  각 숫자는 아래 스크린샷처럼 하나의 요소를 지칭합니다. 

  각 숫자는 하나의 요소를 지칭하면서, 요소가 가로방향으로 차지하는 크기이기도 합니다. 한 줄이 12입니다. 12면 한줄 전체를 차지하는 요소를 만들게 됩니다. 6은 화면 가로 절반을 차지하는 요소가 되겠죠. 한 줄이 12이므로 12만큼 차게 되면 아래줄로 내려가게 됩니다. 즉, FastBoot 초기에 기본값으로 제공되던 것은 12, 6, 6, 6, 6으로 하면 출력이 됩니다. 아래와 같은 레이아웃이 12, 6, 6, 6, 6으로 하셨을 때 출력되는 모습입니다.

	
var index_design = [12, 6, 6, 6, 6];  
	

 한줄은 합이 12가 되면 성립이 되므로, 아래와 같은 다양한 조합을 사용하실 수 있습니다.

12

6 + 6

6 + 3 + 3

4 + 4 + 4

4 + 2 + 2 + 2 + 2

2 + 2 + 2 + 2 + 2 + 2

...

  또한 생각나시는 조합을 넣으실 때는 그저 단순히 index_design 변수에 생각나시는대로 추가해주시면 됩니다. 다시한번 한 줄이 12가 된다고 강조해드리고 싶네요.

JS 업로드

  이렇게 수정한 파일을 아래와 같이 업로드 하세요.

  스크립트가 업로드 하신 직후에는 브라우저 캐싱 때문에 바로 적용이 되지 않는 것처럼 보입니다. 바로 적용되는 모습을 보고 싶으시다면 skin.html에서 아래 부분처럼 파일이름 끝에 ?와 아무 숫자를 붙이시면 새로운 파일로 브라우저가 인식해서 수정된 모습 바로 적용되는 것 보실 수 있습니다. (아래 코드부분은 skin.html의 거의 최하단에 위치합니다. 찾으실 때 참고하세요.)

	
<!--F FastBoot_Plugins -->
<script>if(rssLogFlag==1)document.write('<script src="./images/fastboot_index.js?0515"><\/script>');</script> 
	

  원래는 fastboot_index.js까지만 있었지만 제가 0515라는 숫자를 추가한 예입니다.

마치며

  FastBoot 메인 화면은 꾸준히 업데이트 할 계획입니다. 이것도 현재 FastBoot스킨이 어느정도 안정화 된 것처럼 곧 안정화가 될 것이라고 생각합니다. 지금은 업데이트가 좀 잦은 감이 있어서 불편하시겠지만, 추가됐으면 좋을만한 기능을 지적해주시면 업데이트가 빨리 안정화 될 것 같습니다. 우선 이번에는 레이아웃을 본격적으로 수정하실 수 있게 업데이트를 하였습니다. 꾸준히 성원 보내주시는 분들 감사합니다.

  언제나와 마찬가지로 질문이나 추가적인 기능을 원하시면 덧글 남겨주세요~ 간혹 아쉬운 사항들은 개인 블로그에만 적어주시는 분들이 계셔서 제가 나중에 검색하다가 보는 경우가 있는데 트랙백이라도 걸어주시면 제가 확인하기 용이할 것 같습니다.