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

Posted by Readiz
2014.05.21 21:21 반응형 티스토리/FastBoot


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



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




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라는 파일로 아래 코드를 복사 & 붙여넣기 하셔서 업로드 전에 임시로 저장하시면 됩니다.


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

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


저작자 표시 비영리 변경 금지
신고
이 댓글을 비밀 댓글로
  1. 이전 댓글 더보기
  2. 기본설정은 그래도 유지하되 메인화면이나 각 카테고리의 목록을 티에디션에서 지정하게 할 수 있을까요?
  3. 안녕하세요. 스킨 잘 사용하고 있습니다. 감사합니다. 여쭤볼 것이 있는데 메인 화면에서 발행된 글들의 그림파일이 안보이게 할 순 없을까요?
  4. 메인을 어떤식으로 채우나 고민하고 있었는데 너무 감사합니다.
    그런데 한 가지 궁금한 내용이 있습니다.

    글이 올라온 순서대로 맨위로 새글이 올라가는데요. 저는 특정글 하나는 항상 위에 고정되어 있고 새로 등록된 글만 그 글 밑에서 업데이트가 되었음 하는데 어떻게 해야 할까요?

    제가 코딩 초보라 자세한 답변 부탁드리겠습니다.
  5. 감사합니다.
    너무 좋은 스킨을 이렇게 다양한 방법론까지 알려주시고.
    다시 한번 감사 드립니다.
    제 사이트도 한 번 방문 해주시고 조언 부탁 드립니다.
    capeasy.tistory.com 입니다.
  6. 감사합니다.
  7. 이렇게 멋진 반응형 스킨을 만들어 주셔서 너무 감사드립니다!!

    저희 블로그에 정말 잘 쓰고 있습니다 ㅎㅎ
    • 2015.02.09 16:06
    비밀댓글입니다
  8. 사이드바를 사용하면서, 구성을 바꿀순 없을까요?
    그런걸 원하고 있습니다.
  9. 열심히 포스팅 보면서 꾸며보고 있는데요 궁금한게 하나 있는데 물어봐도될까요?
    그럼 포스팅을 쓰면 글양이 다 다른데 메인에 보이는 창들의 크기가 다 똑같았으면 좋겠는데 글의 양이 다르니깐 그 길이도 길게 나오더라고요 이걸 똑같이 맞출수는 없나요?^^;; 죄송해요
  10. 안녕하세요 ^^
    스킨 너무 잘사용하고 있습니다 감사드려요

    다름이 아니구요 메인화면에서 제일 아래 쪽에 있는 썸네일을 개수를 늘이고 싶은데 어떻게 해야하나요?
    지금은 10개가 나오는데 조금더 많이 나오게 하고 싶습니다.
    도와주세요 ^^
  11. 감사합니다^^ 찾고 있던 정보를 이렇게 쉽게 만들어 주시다니 정말 감사합니다. 앞으로 더 자주 찾아오도록 하겠습니다. ^^
  12. 정말 감사합니다. 초기화면 배치되는 5개보다 좀더 늘리고 싶었는데 쉽게 잘 설명해주셨네요.

    감사합니다!
  13. 안녕하세요 제공해주신 스킨 아주 마음에 들게 사용중입니다.
    한가지 문제가 발생하여 문의드리려고 염치 불구하고 댓글을 작성하고 있네요.^^;
    블로그 운영중에 facebook에 동시 발행하는 플러그인을 이용하기 위해 잠시 비공개로 한뒤 재발행을 했는데요...
    카테고리에서는 정상적으로 나타나는 썸네일이 메인화면과 사이드바의 최신글 목록에서는 나타나질 않네요.^^;
    스킨을 지우고 다시 설치해도 마찬가지 결과라서 적지 않게 당황하고 있습니다.
    혹시 해결 방법을 알 수 있을까 해서 여쭤봅니다.
    • 자답이 되어버렸네요.^^;
      글설정에서 RSS를 부분공개에서 전체공개로 바꾸니 썸네일이 정상적으로 나타났습니다.
  14. 가로 나열개수는 적용대로 되는데 세로폭은 조절이 가능한지요?
  15. 메인화면이 저런 화면이 아닌 리스트형으로 보입니다.
    어느 부분을 확인해보면 될까요?
  16. 메인 화면 가장 아래쪽 썸네일을 Readiz님의 블로그처럼 24개로 늘리고 싶은데 위의 글을 아무리 읽어봐도 도무지 이해가 되질 않습니다. 쉬운 설명 부탁드립니다.
  17. 재미있는
  18. 가끔 긴링크등이 위젯을 삐져나가는 현상이 있었는데

    #coverDiv p.des {
    word-break: break-all;
    }
    추가해주므로써 해결했습니다.
  19. 반응형 티스토리 올려주신거 잘 사용하고 있습니다.
    한가지 궁금한 것이 있어서 질문드리려고 하는데요.

    메인화면(홈)에서 카테고리별로 갤러리형식으로 글이 나오게 할 순 없을까요?
    지금은 최신 글 순서대로 메인화면이 구성되는데,
    카테고리별로 최신 글 순서대로 구성하고 싶은데 어떻게 하면 좋을까요?
    • 2017.10.26 14:18
    비밀댓글입니다

티스토리 툴바