티스토리 북클럽 스킨: 커버 뉴스레터 아이템 썸네일 위치 변경 (오른쪽에서 왼쪽으로)

티스토리 북클럽 스킨의 스킨 편집에서 홈 설정을 커버로 지정하고 뉴스레터 아이템을 배치하면 썸네일이 오른쪽에 표시됩니다. 뉴스레터 아이템의 썸네일 위치를 오른쪽에서 왼쪽으로 변경하고 싶은 경우 간단한 CSS 코드를 사용할 수 있습니다.

티스토리 북클럽 스킨: 커버 뉴스레터 아이템 썸네일 위치 변경 방법

티스토리 북클럽(Book Club) 스킨에서 홈 설정을 커버로 설정하고 뉴스레터 아이템을 추가하면 다음 그림과 같이 썸네일이 오른쪽에 표시됩니다.

바로 옆에 사이드바가 있기 때문에 답답해 보인다면 썸네일을 왼쪽으로 이동시키는 것을 고려해볼 수 있습니다.

뉴스레터 아이템의 썸네일을 오른쪽에서 왼쪽으로 이동시키려면 다음과 같은 CSS 코드를 사용할 수 있습니다.

/* 북클럽 스킨: 첫 페이지 썸네일 위치 변경 */
.cover-thumbnail-2 ul li figure {
    float: left;
      margin-right: 27px;
	margin-left: 3px;
}

CSS 코드는 티스토리 로그인 페이지에서 꾸미기 > 스킨 편집 > html 편집 > CSS 탭을 차례로 클릭하여 맨 아래에 붙여넣기 하면 됩니다.

저장한 후에 티스토리 블로그를 새로 고침해보면 아래 그림과 같이 썸네일 위치가 왼쪽으로 변경되어 표시됩니다.

기본적인 CSS를 알면 스킨 레이아웃을 어느 정도까지는 변경이 가능합니다. 꼭 티스토리뿐만 아니라 워드프레스, 그누보드 등 다른 CMS를 이용하는 경우에도 CSS를 조금 알면 편리합니다.

참고로 Magazine (매거진) 스킨에서 첫 페이지에 최신 글을 나열("내용" 선택)할 경우 다음과 같은 CSS 코드를 사용하면 PC 해상도에서 썸네일이 왼쪽으로 이동합니다.

/* 매거진 스킨에서 썸네일을 왼쪽으로 이동 (커버 미사용 시) */
@media screen and (min-width: 743px) {
.content_list .link_thumb .box_thumb {
    margin-left: 0;
    margin-right: 40px;
  float: left;
}
}

CSS 무료 학습/강의 사이트

CSS를 배우고 싶은 경우 시중에서 책을 하나 구입하거나 W3Schools 사이트나 '생활코딩' 같은 무료 강의를 이용해볼 수 있습니다. 기본적인 사항은 배우는 데 그리 시간도 많이 걸리지 않을 것입니다. 응용하는 방법을 익히는 것이 중요한데요. 다른 모든 분야와 마찬가지로 꾸준히 연습을 해야 실력이 늡니다. 기본적인 CSS 이용 방법과 응용 방법에 대해 배우고 싶다면 서비스(유료)를 이용할 수 있습니다.

CSS 등을 배울 때 기본적인 영어 단어를 알면 수월합니다. 구글을 검색할 때 기본적인 영어 단어를 조합하여 검색하여 다양한 문서를 참고할 수 있습니다. 예를 들어, 글자 크기는 "font size css"로 구글을 검색해보면 CSS로 글자 크기를 조정하는 방법에 대한 많은 글들이 검색됩니다.

참고:

워드프레스와 티스토리 블로그로 돈 버는 방법

티스토리 Book Club 스킨 수정: 본문 글자 크기 변경하는 방법