티스토리 스킨 만들 때 이미지 다루기::::수학과 사는 이야기

티스토리 스킨을 만들 때 이미지를 어떻게 처리하면 좋을까 고민이다. 이미지를 불러오는 html 태그는 <img src="이미지 주소">이다. 먼저 이미지를 그대로 불러오는 경우를 보자.

1. 100%로 불러왔을 때: <img src="이미지 주소" width="100">

2. 황금비(1.618:1)에 가깝게 불러왔을 때: <img src="이미지 주소" width="324" height="200" >

3. A4용지에 같은 비율 $\sqrt2:1$에 가깝게 불러왔을 때: <img src="이미지 주소" width="283" height="200" >

흔히 황금비가 가장 보기 좋은 비율이라고 하지만 요즘 A4 종이를 하도 많이 봐서 그런가 $\sqrt2$도 나름 보기 편하다.(황금비로 웹디자인)

다음으로 썸네일을 따로 뽑아내 쓸 수 있다. 아무래도 원본 이미지 파일이 크다면 불러오는 시간이 더 걸리므로 작게 만들어 불러 들여야 좋다. 티스토리는 내용전달-네트워크(CDN: Content Delivery Network)을 제공하고 있다.

1. 이미지에서 가로와 세로를 모두 유지하며 불러들일 때:

2. 가로를 600으로 불러들이며 가로: 세로 비율은 그대로:

3. 이미지에서 600$\times$600을 뽑아내 불러들일 때:

4. 이미지에서 300$\times$300을 뽑아내 불러들일 때:

5. 이미지에서 600$\times$200을 뽑아내 불러들일 때:

6. 이미지에서 400$\times$200을 뽑아내 불러들일 때:

정리해 보면 R과 C의 다른 점은 이미지를 그대로 가져오느냐 잘라서(crop) 가져오느냐이다. 개인적으로는 C방식이 더 좋아보인다. 파일 크기도 더 작게 줄여주는 방식이다. 스킨 파일을 열어보면 새로 도입한 겉장(Cover) 기능을 만드는 부분에 시디엔으로 그림을 불러오는 부분이 보일 것이다.

<s_cover_item>

<li>

<a href="">

<figure>

<s_cover_item_thumbnail>

<img src="//i1.daumcdn.net/thumb/C600x600/?fname=" alt="">

</s_cover_item_thumbnail>

</figure>

해당되는 CSS파일을 여길 적당히 고쳐주면 개성을 드러낼 수 있을 것이다. 실험해 보니 모든 비율을 다 만들어 주지는 않는다. 위에 있는 황금비로 잘라내려고 시도해 보니 잘 되지 않는다.

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

꼬리표

티스토리툴바