티스토리 Letter 스킨 썸네일 위치 변경(왼쪽에서 오른쪽)

안녕하세요.

Letter 스킨 메인 화면의 썸네일 위치는 왼쪽에 위치하는 것으로 기본값으로 설정되어 있습니다. 취향에 따라 썸네일 위치가 왼쪽보다 오른쪽을 선호할 수 있습니다. 이번 포스팅에서는 썸네일 위치를 변경하는 방법에 대하여 알아보겠습니다.

Letter 스킨의 메인 화면 기본값은 위의 그림과 같이 썸네일이 왼쪽에 있습니다. 크롬 개발자 도구를 실행시키고 선택 도구로 썸네일을 선택합니다.

개발자 도구 CSS 창을 보면 위의 그림과 같이 두 가지 속성을 확인할 수 있습니다. 1101행부터는 썸네일의 크기와 썸네일 주위의 마진이 설정되어 있고, 1095행부터는 썸네일 위치가 설정되어 있습니다. 이 두 가지 속성 값을 변경해주면 됩니다.

우선 티스토리 HTML 편집기에서 CSS 탭을 선택합니다. 그리고 1095행을 찾아 float : left;를 float : right;로 변경한 후 적용을 클릭합니다.

블로그 화면을 새로 고침 하면 위의 그림과 같이 썸네일의 위치가 오른쪽으로 이동한 것을 확인할 수 있습니다.

이제 썸네일 주변 마진을 변경하기 위해 CSS 탭에서 1101행을 찾습니다. 그리고 margin-right를 margin-left로 변경하여 줍니다.

블로그 화면을 새로 고침 하면 썸네일 주변의 여백이 변경되어 레이아웃의 조화가 한결 깔끔해진 것을 확인할 수 있습니다. 이처럼 스킨 편집을 위해 크롬 개발자 도구를 활용하면 HTML과 CSS의 전문 지식이 없더라도 손쉽게 스킨을 편집할 수 있습니다.

 

행복한 하루 보내세요.

감사합니다.