[티스토리 블로그 꾸미기] 홈(커버) 글자색, 여백, 테두리색 쉽게 꾸미기

안녕하세요! 이번 글에서는 티스토리 블로그 홈(커버)의 글자색, 여백, 테두리색을 쉽게 꾸미는 방법에 대해 알려드리겠습니다. 그리고 이전에 적용한 홈(커버) 인피드 광고와 동일한 방식으로 글자색, 여백, 테두리색을 조절할 것입니다. CSS 모든 속성은 제 블로그를 기준으로 설명드리니, 여러분의 블로그에 맞게 자유롭게 수정하시길 바랍니다.

 

잘 모르는 코드가 있거나, 필요한 코드는 자주 쓰는 CSS 속성 총정리 게시글에서 확인하세요! 이 작업은 티스토리 '북클럽' 스킨의 커버인 '뉴스레터'를 기준으로 진행합니다.

 

커버 아이템 종류

'뉴스레터' 커버를 사용하지 않는다면, 해당하는 커버 아이템 코드에서 수정하시면 됩니다.

.cover-list /* 기본 리스트 */

.cover-thumbnail-1 /* 썸네일 리스트 */

.cover-thumbnail-3 /* 커버 갤러리1 */

.cover-thumbnail-4 /* 커버 갤러리2 */

.cover-event /* 이벤트 배너 */

 

스킨 편집 들어가기

1. 관리자 페이지에 왼쪽 메뉴에서 '꾸미기' 탭 안에 '스킨 편집'버튼을 클릭하면 새 창이 열립니다.
2. 새로운 창이 열리면, 우측 상단에 있는 'html 편집' 버튼을 클릭합니다.

'꾸미기' 탭에서 '스킨 편집'을 클릭하면 새로운 창이 열립니다. 이 창의 오른쪽 상단에 'html 편집'을 클릭합니다.

우측 상단에 있는 'HTML | CSS | 파일업로드' 중에 'CSS'를 클릭합니다.

html 편집 창에서 우측 상단에 'HTML ❘ CSS ❘ 파일업로드' 옵션 중 'CSS'를 클릭합니다.

 

기본 설정 확인

'뉴스레터' 커버의 기본 설정을 확인합니다.

뉴스레터 커버의 기본 설정을 확인합니다.

 

커버 타이틀 꾸미기

CSS 파일에서 코드 있는 곳 아무 곳이나 클릭 후 Ctrl+F를 눌러 검색창에 '.cover-thumbnail-2 h2'를 검색합니다.

.cover-thumbnail-2 h2

CSS 파일에서 검색창에 '.cover-thumbnail-2 h2'를 검색합니다.

아래의 코드를 복사하여 기존 코드와 교체합니다.

.cover-thumbnail-2 h2 {
  margin: 20px 0; /* 요소 위아래 여백 */
  padding: 40px 0 20px 0; /* 제목 위 40px 아래 20px 좌우 0 여백 */
  border-bottom: 1px solid #111; /* 아래 테두리 실선 */
  text-align: center; /* 제목 위치 */
  font-weight: bold; /* 글자 굵기 */
  font-size: 26px; /* 글자 크기 */
  color: #333; /* 글자색 */
}

커버 타이틀의 글자색, 글자 굵기, 글자크기를 조절하는 코드

미리보기로 커버 타이틀이 적용되었는지 확인합니다.

커버 타이틀이 적용되었는지 확인합니다.

 

게시글 아래 점선 테두리선 추가하기

방금 수정한 타이틀 코드 아래 '.cover-thumbnail-2 ul li'로 이동합니다. 검색창을 열어 검색하셔도 됩니다.

.cover-thumbnail-2 ul li

CSS 파일에서 검색창에 '.cover-thumbnail-2 ul li'를 검색합니다.

아래 코드를 복사하여 아래 점선 테두리선을 추가 코드로 교체합니다. (코드를 추가하셔도 됩니다.)

.cover-thumbnail-2 ul li {
  overflow: hidden; /* 내용이 넘치면 뒤에 내용 숨김 */
  margin-top: 28px; /* 요소 위쪽 여백 */
  border-bottom: 1px dotted #111; /* 아래 테두리 점선 */
}

게시글 아래 점선 테두리선을 추가하는 코드

미리보기로 게시글 아래 점선 테두리선이 적용되었는지 확인합니다.

게시글 아래 점선 테두리선이 적용되었는지 확인합니다.

 

커버 제목 꾸미기

검색창을 열어 '.cover-thumbnail-2 ul li .title'을 검색합니다.

.cover-thumbnail-2 ul li .title

CSS 파일에서 검색창에 '.cover-thumbnail-2 ul li .title'를 검색합니다.

아래 코드를 복사하여 기존에 코드와 교체합니다. 글자 크기, 글자 굵기, 글자색만 변경하셔도 괜찮습니다.

.cover-thumbnail-2 ul li .title {
  display: block; /* 블록 요소로 표시 */
  overflow: hidden; /* 내용이 넘치면 숨김 */
  max-width: 95%; /* 최대 너비 */
  margin-bottom: 10px; /* 요소 아래 여백 */
  padding-top: 7px; /* 내용 위 여백 */
  text-overflow: ellipsis; /* 넘치는 내용은 '...'로 표시 */
  white-space: nowrap; /* 텍스트를 한 줄로 표시 */
  font-size: 20px; /* 글자 크기 */
  line-height: 1.4; /* 줄 간격 */
  font-weight: bold; /* 글자 굵기 */
  color: #333; /* 글자색 */
}

커버 제목 글자 크기, 글자 굵기, 글자색을 조절하는 코드

미리보기로 커버 제목의 글자 크기, 글자 굵기, 글자색이 적용되었는지 확인합니다.

커버 제목의 글자 크기, 글자 굵기, 글자색이 적용되었는지 확인합니다.

 

내용 꾸미기

검색창을 열어 '.cover-thumbnail-2 ul li .excerpt'를 검색합니다.

.cover-thumbnail-2 ul li .excerpt

CSS 파일에서 검색창에 '.cover-thumbnail-2 ul li .excerpt'를 검색합니다.

아래 코드를 복사하여 기존에 코드와 교체합니다. 글자 크기, 글자색만 변경하셔도 괜찮습니다. (내용을 2줄만 보이게 하고 싶다면, '-webkit-line-clamp'의 숫자를 변경하세요.)

.cover-thumbnail-2 ul li .excerpt {
  display: block; /* 블록 요소로 표시 */
  overflow: hidden; /* 내용이 넘치면 숨김 */
  max-width: 95%; /* 최대 너비 */
  margin-bottom: 10px; /* 요소 아래 여백 */
  text-overflow: ellipsis; /* 넘치는 내용은 '...'로 표시 */
  font-size: 18px; /* 글자 크기 */
  line-height: 1.5rem; /* 줄 간격 */
  color: #333; /* 글자색 */
  display: -webkit-box; /* 웹킷 박스 레이아웃을 사용 */
  -webkit-line-clamp: 3; /* 내용을 세 줄까지만 표시하고 나머지는 숨김 */
  -webkit-box-orient: vertical; /* 박스 정렬을 세로로 설정 */
}

커버 내용의 글자 크기, 글자색을 조절하는 코드

미리보기로 커버 내용의 글자 크기, 글자색이 적용되었는지 확인합니다.

커버 내용의 글자 크기, 글자색이 적용되었는지 확인합니다.

 

날짜 꾸미기

검색창을 열어 '.cover-thumbnail-2 ul li .meta'를 검색합니다.

.cover-thumbnail-2 ul li .meta

CSS 파일에서 검색창에 '.cover-thumbnail-2 ul li .meta'를 검색합니다.

아래 코드를 복사해서 기존 코드와 교체하거나, 수정 및 추가합니다.

.cover-thumbnail-2 ul li .meta {
  display: block; /* 블록 요소로 표시 */
  font-size: 12px; /* 글꼴 크기를 12px로 설정 */
  color: #333; /* 글자 색상을 #333으로 설정 */
}

커버 날짜의 글자 크기, 글자색을 변경하거나 코드를 복사해서 교체합니다.

미리보기로 커버 날짜의 글자 크기, 글자색이 적용되었는지 확인합니다.

커버 날짜의 글자 크기, 글자색이 적용되었는지 확인합니다.

 

결론

이번 글에서는 '뉴스레터' 커버의 글자색, 여백, 테두리색 꾸미는 방법을 알아보았습니다. 제가 설명드린 부분은 제 블로그에 맞춰서 진행하니, 여러분의 블로그 스타일에 맞게 수정하여 더 예쁘게 꾸미시길 권장드립니다.

다음 글에서는 홈(커버)과 카테고리의 썸네일 크기 조절하는 방법을 소개해드리겠습니다. 궁금한 점이나 문제가 있으면 댓글로 알려주세요!