반응형 스킨에서 티에디션도 반응형으로 만들기 - 1

반응형 스킨에서 티에디션 반응형으로 만들기 - 1

  반응형 스킨의 최대 단점이라면, 티에디션이 반응형으로 되지 않는다는 점일텐데요. 100% 티에디션을 반응형으로 만들기도 물론 가능합니다만 이것은 CSS에 대해 전부 꿰뚫고 계셔야 가능합니다. 그래서 타협점을 찾아야 합니다.

  "일부형식의" 티에디션이나마 반응형으로 만들어볼 수 있다면?

  티에디션 반응형으로 만들기 관련도 여러번에 걸쳐서 한번 글을 써볼텐데요, 우선 티에디션이 반응형으로 적용된 모습부터 한번 보고 옵시다.

http://fastboot.tistory.com/

 한번 브라우저의 폭을 줄여보시기 바랍니다. 아래처럼 변합니다.

---

평상시 모습

---

줄였을 때

  우선 적용이 되는 티에디션의 종류는 "목록형"에 있는 것들 입니다. 가령 아래와 같은 것들이죠.

  목록형으로 티에디션을 세팅 하셨으면, 이제 세부적인 사항들로 들어가 봅시다.

  티에디션을 반응형으로 변형시키기 위해서는 블로그의 CSS수정이 필요합니다. 이 블로그에서 쓰이고 있는 스킨인 FastBoot를 쓰시는 분들이라면 몇가지 추가만 해주시면 되구요, 아니시라면 아래 코드 전체를 다 넣으셔야 합니다.

	
/* Tistory utility  
   ------------------------------------------------ */
.tistorytoolbar {
  display: none !important;
}
.entry-content img {
  display: block;
  max-width: 100%;
  height: auto;
}
div.article iframe {
  max-width: 100% !important;
}
.imageblock { max-width:100%; } 

.tt-span-1,
.tt-span-2,
.tt-span-3,
.tt-span-4,
.tt-span-5,
.tt-span-6,
.tt-span-7,
.tt-span-8,
.tt-span-9,
.tt-span-10,
.tt-span-11,
.tt-span-12 {
max-width: 100% !important;
}

  .tt-span-1 {
    width: 6% !important;
  }
  .tt-span-2 {
    width: 14% !important;
  }
  .tt-span-3 {
    width: 22% !important;
  }
  .tt-span-4 {
    width: 31% !important;
  }
  .tt-span-5 {
    width: 39% !important;
  }
  .tt-span-6 {
    width: 48% !important;
  }
  .tt-span-7 {
    width: 53% !important;
  }
  .tt-span-8 {
    width: 59% !important;
  }
  .tt-span-9 {
    width: 72% !important;
  }
  .tt-span-10 {
    width: 80% !important;
  }
  .tt-span-11 {
    width: 88% !important;
  }
  .tt-span-12 {
    width: 100% !important;
  }
@media screen and (max-width: 767px) {
    .tt-span-1,
    .tt-span-2,
    .tt-span-3,
    .tt-span-4,
    .tt-span-5,
    .tt-span-6,
    .tt-span-7,
    .tt-span-8,
    .tt-span-9,
    .tt-span-10,
    .tt-span-11,
    .tt-span-12 { 
      width:100% !important; 
    }
    
}

#ttCanvas, .tt-span-12 {
width: 100% !important;
} 
	

  FastBoot v1.0~v1.2 버전 스킨을 쓰시는 분이라면 위 부분이 이미 있습니다(1.3부터는 기본 탑재할 것입니다). 추가된부분(tt-span-xx부분과 max-width부분) 수정만 해주세요.

  사실 위 부분은 스켈레톤이라는 티스토리 스킨에 포함되어 있는 부분을 제가 참고해 수정한 것입니다. tt-span-xx에 대한 정의가 %로 새로이 정의되어 있습니다. 기본적으로 tt-span-xx가 고정폭으로 적용되어 있는 것을 반응형에 적용하기 위해 %로 수정하는 작업을 하는 것입니다.

  위 CSS를 적용하신 뒤, 티에디션 작업을 하시면 되는데, 문제가 하나 있습니다. 티스토리 버그인데, CSS수정을 하게 되면 티에디션에 출력되는 이미지가 작게 축소되어 버립니다. 이미지 크기를 수정하려면 아래처럼 너비조정을 하시면 됩니다.

  반응형스킨이 아니라면 티에디션의 전체 폭이 조정이 되지만, 반응형이기 때문에 이미지 크기만 조절이 됩니다. 이렇게 수정을 하시면 제한적이게나마 이제 반응형 스킨에서도 티에디션이 동작하는 것을 확인할 수 있습니다.

  다만 눈치가 빠른 분들은 이미 아셨겠지만 위 방법으로는 이미지 크기는 자동으로 화면크기에 따라 조정되지 않는다는 것을 아셨을 겁니다. 이 점에 관해서 다음에 좀 더 포스팅 해보도록 하겠습니다.