티스토리 블로그 썸네일 모양 동그랗게 또는 모서리 부드럽게 바꾸기

오늘은 살짝 재미있는 것을 해보려고 합니다. 티스토리 블로그를 사용하다 보면 뭔가 딱딱한 뼈대만 있는 듯하고 디자인 요소가 없는 것 같아서 허전함마저 느낍니다. 물론 이대로 사용하는 것이 어쩌면 속도 면에서 최적화되어 있을지도 모릅니다. 무언가 없애면 모를까 자꾸 추가하게 되면 조금이라도 더 느려지게 되지요. 그러나 아주 살짝 변화시킨다면, 그리고 그 변화로 인해 뭔가 차별화할 수 있다면 한 번 해 볼만한 가치가 있다고 생각됩니다.

티스토리 블로그 썸네일 모양을 동그랗게 하거나 모서리를 부드럽게 바꿔보겠습니다. 방법은 간단합니다. 관리자 모드 스킨 편집의 CSS에서 딱 두 줄만 추가하면 됩니다. 그럼 같이 해 보실까요?

.post-item .thum img {
  width: 100%;
  height: auto;
  transform: translateY(-25%);
  -webkit-transform: translateY(-25%);
  -ms-transform: translateY(-25%);
  border-radius: 5px;
}



.sidebar .post-list ul li img {
  float: right;
  width: 58px;
  height: 58px;
  margin: 2px 0 0 20px;
  border-radius: 50%;
}

border-radius는 이미지의 모서리를 간섭하는 CSS입니다. 5px라고 하면 모서리의 5px 만큼 부드럽게 처리되고 이것을 아예 %로 50%라고 적용하게 되면 사각형 이미지의 절반을 둥글게 하니 결국 원이 되는 이론입니다.

---