태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.
본문으로 바로가기

CCZ-CROSS 반응형 스킨 소개합니다


그 동안 사용한 프라치노, 반응형 스킨을 사용하다 약간의 불편함과 유료버전의 스킨에 대한 비용지불에 대하여 고민하다 흉내쟁이님의 크로스브라우징과 반응형을 지원하는 클래식한 테마 스킨을 적용해 보았는데..., 상당히 맘에 든다.



프라치노 반응형 스킨과 차이점은 내가 사용하는 모든 브라우져에서 폰트가 동일한 크기와 높이가 동일하게 표현되는 것.

프라치노 스킨의 경우는 웹폰트를 사용하다보니 브라우져마다 약간의 차이가 난다


  • CCZ-CROSS 스킨의 단점이라면..., 모바일에서 스크롤, 전체적으로 느리고 무겁다.

<kbd>F12</kbd>
<code>.body</code>

<div class="alert alert-modern"> 팁 </div>
<div class="alert alert-info"> 안내 </div>
<div class="alert alert-warning"> 주의 </div>
<div class="alert alert-danger"> 경고 </div>
<div class="alert alert-success"> 확인 </div>

아래는 스킨 style.css 파일의 원문을 발췌함


Theme Name : CCZ-CROSS
Theme URI : http://ccz-cross.tistory.com
Autor : 흉내쟁이 (copycatz)
Autor URI : http://copycatz.tistory.com
Description : 크로스브라우징과 반응형을 지원하는 클래식한 테마
Version : 1.1
License : 비매품, 판매에 이용될 수 없음, 저작권 정보 삭제 금지
썸네일 추출 소스: http://ishaiin.com 참고(비공개 라이센스이기에 재사용을 금함)


지금 새로운 글 작성시 편리함은 프라치노, 반응형 스킨보다는 나은것 같다


CCZ-CROSS 스킨의 로딩 속도 개선방법 (모바일, PC 공통) ▶ 참고


[변경 전]
<s_article_rep_thumbnail>
 <a class="has-object t-photo" href="[##_article_rep_link_##]">
  <div class="thumbnail">
   <div class="cropzone">
    <img src="[##_article_rep_thumbnail_url_##]">
   </div>
  </div>
 </a>
</s_article_rep_thumbnail>


[변경 후]
<s_article_rep_thumbnail>
 <a class="has-object t-photo" href="[##_article_rep_link_##]">
  <div class="thumbnail">
   <div class="cropzone">
    <img src="//i1.daumcdn.net/thumb/C240x180/?fname=[##_article_rep_thumbnail_raw_url_##]">
   </div>
  </div>
 </a>
</s_article_rep_thumbnail>



<div class="list-row pos-right ratio-fixed ratio-4by3 crop-center lts-narrow fouc clearfix">
태그와 글 부분에 있는
<div class="e-content post-content fouc">[##_article_rep_desc_##]</div>


태그의 fouc 부분을 삭제하시면 됩니다


원리를 간단히 설명드리자면, 프론트 앤드 개발을 할 때,
보통 FOUC 라는 것은 Flash Of Unstyled Content의 약자로 현업에 있을 때 저희는 그냥 스켈레톤 현상이라고 했습니다.
(정식명칭은 아니고 약간 슬랭? 같은 표현이었던 것 같습니다)
아무튼 이 현상은 페이지가 로드 될 때 일시적으로 CSS가 적용되지 않은 페이지가 보여지는 현상을 말하는데요.
리소스 로딩이나 CSS관련 연산이 지연되면서 html 뼈대가 먼저 보이는 일시적인 현상이라고 보시면 됩니다.
하지만 사용자들 입장에서는 잠깐이나마 시스템 에러가 났나? 라고 생각할 수 있기 때문에 조치해야 하는 현상이기도 합니다.



저작자 표시 비영리 변경 금지
신고

댓글을 달아 주세요

  1. BlogIcon OOPPA 2017.02.10 08:05 신고

    CCZ-CROSS 스킨이 모바일에서 너무 무겁다.
    서브메뉴, 카테고리를 선택하면 화면 스크롤이 너무 느린데...원인을 찾아보고 수정한 뒤에 다시 적용이 필요하다

  2. BlogIcon IT에피소드 2017.03.02 21:09 신고

    어제 글을 참고해서 흉내쟁이님의 스킨을 적용했는데 모바일에서 무거운 느낌입니다.

    • BlogIcon OOPPA 2017.03.02 22:56 신고

      모바일에서 많이 무거운 느낌인데 스크립터를 수정하니 PC화면에서는 이상이 없는데 모바일에서는 이상하게 보이더라고요
      안그래도 전체 레이아웃을 크게 손대지 않고 수정테스트 중입니다. 좋은 결과가 나오면 그때 공유해 드릴께요.

  3. BlogIcon OOPPA 2017.05.10 21:41 신고

    CCZ-CROSS 반응형 스킨의 blockquote 변경하기

    reset.css파일을 찾아 /* _Markdown Styles */을 검색한다.

    blockquote
    {
    background:#f9f9f9 url(./i_quote.png) 0 0 no-repeat; margin:0; padding:10px 15px 10px 36px;color:#5a5a5a;font-size:.9em;font-style:normal; -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; border-top-left-radius: 5px; -moz-border-radius-topright: 25px; -webkit-border-top-right-radius: 25px; border-top-right-radius: 25px; -moz-border-radius-bottomright: 10px; -webkit-border-bottom-right-radius: 10px; border-bottom-right-radius: 10px; -moz-border-radius-bottomleft: 25px; -webkit-border-bottom-left-radius: 25px; border-bottom-left-radius: 25px;
    }

    위와 같이 수정하여 준다.

티스토리 툴바