hELLO 스킨 테이블 스타일
티맥스 블로그에서 사용하는 hELLO 스킨 커스텀에 대한 글은 버전 4.9.0을 기준으로 작성되었습니다. 이후 정상우 님의 hELLO 스킨 업데이트에 따라 저의 블로그도 곧 업데이트할 예정입니다. 현재 티스토리 내에서 패치가 진행되고 있어 잦은 오류와 버그가 발생하고 있으므로, 4.9.0 버전에 머물지 않고 업데이트할 계획입니다. 이 글은 잊지 않고 커스텀할 사항들을 기록하기 위한 것이니, 테이블 스타일을 커스텀하지 않으실 분들은 참고만 하셔도 괜찮습니다.
테이블 스타일 변경
hELLO 스킨 기본적으로 제공하는 테이블 스타일 CSS코드는 다음과 같습니다.
#tt-body-page #article .contents_style table[data-ke-align] td,
#tt-body-page #article .contents_style table[data-ke-align] th {
box-sizing: border-box;
border-width: 0px;
border-bottom-width: 1px;
border-style: solid;
--tw-border-opacity: 1;
border-color: rgb(230 230 233 / var(--tw-border-opacity));
background-color: transparent;
padding-left: 0.75rem;
padding-right: 0.75rem;
padding-top: 1rem;
padding-bottom: 1rem;
font-size: 0.875rem;
line-height: 1.25rem;
line-height: 2;
--tw-text-opacity: 1;
color: rgb(53 54 56 / var(--tw-text-opacity))
}
.dark #tt-body-page #article .contents_style table[data-ke-align] td,
.dark #tt-body-page #article .contents_style table[data-ke-align] th {
--tw-border-opacity: 1;
border-color: rgb(53 54 56 / var(--tw-border-opacity));
--tw-text-opacity: 1;
color: rgb(244 244 246 / var(--tw-text-opacity))
}
상단 칼럼 텍스트 색상과 구분선에 대한 색상을 설정할 수 있는 CSS코드입니다. 라이트 및 다크 모드의 색상을 구분하여 자신의 스타일에 맞도록 설정하는 것이 좋습니다.
저는 기본 CSS 코드를 아래와 같이 수정하였습니다. 간단하게 선라인 색상과 칼럼 텍스트 색상을 수정하였으며, 추가적으로 모든 테이블 테두리에 구분선이 보일 수 있도록 수정하였습니다.
#tt-body-page #article .contents_style table[data-ke-align] td,
#tt-body-page #article .contents_style table[data-ke-align] th {
box-sizing: border-box;
border-width: 0px;
border-bottom-width: 1px;
border-style: solid;
--tw-border-opacity: 1;
border-color: rgb(153 153 161 / var(--tw-border-opacity));
background-color: transparent;
padding-left: 0.75rem;
padding-right: 0.75rem;
padding-top: 1rem;
padding-bottom: 1rem;
font-size: 0.875rem;
line-height: 1.25rem;
line-height: 2;
--tw-text-opacity: 1;
color: rgb(53 54 56 / var(--tw-text-opacity))
}
.dark #tt-body-page #article .contents_style table[data-ke-align] td,
.dark #tt-body-page #article .contents_style table[data-ke-align] th {
--tw-border-opacity: 0.8;
border-color: rgb(185 185 185 / var(--tw-border-opacity));
--tw-text-opacity: 1;
color: rgb(244 244 246 / var(--tw-text-opacity))
}
아래 테이블 모습은 CSS코드를 변경 후 티맥스 블로그에 적용된 모습입니다.
Background | Foreground | Contrast Ratio |
#0000FF | #FFFFFF | 8.59 |
#42444E | #FCFAF8 | 9.68 |
색상 대비 컬러 변경
이제 기본 테이블 스타일을 원하는 대로 커스텀하셨다면, 티스토리에서 제공하는 테이블 스타일을 적용할 차례입니다. 티스토리는 상단 칼럼에 색상을 입힐 수 있는 표 테마로 style12, style13, style14, style15의 4가지를 제공합니다. 하지만 hELLO 스킨은 기본적으로 티스토리의 표 테마가 적용되지 않습니다. 따라서 표 테마를 적용할 수 있도록 CSS 코드를 추가하고, 표 테마의 색상 대비 컬러를 조정하였습니다. 아래 테이블은 기본 색상을 변경한 표 테마가 적용된 모습니다.
표 테마 style12
.contents_style table[data-ke-style=style12] tr:first-child td {
background-color: #42444e;
color: #FCFAF8;
}
Background | Foreground | Contrast Ratio |
#8a847c (기본) | #FFFFFF | 3.7 |
#42444e (변경) | #FCFAF8 | 9.3 |
표 테마 style13
.contents_style table[data-ke-style=style13] tr:first-child td {
background-color: #1C7D82;
color: #FCFAF8;
}
Background | Foreground | Contrast Ratio |
#62b4ad (기본) | #FFFFFF | 2.42 |
#1C7D82 (변경) | #FAFAFA | 4.67 |
표 테마 style14
.contents_style table[data-ke-style=style14] tr:first-child td {
background-color: #206548;
color: #FCFAF8;
}
Background | Foreground | Contrast Ratio |
#006f00 (기본) | #FFFFFF | 6.41 |
#206548 (변경) | #FCFAF8 | 6.68 |
표 테마 style15
.contents_style table[data-ke-style=style15] tr:first-child td {
background-color: #1F66A8;
color: #FCFAF8;
}
Background | Foreground | Contrast Ratio |
#236daa (기본) | #FFFFFF | 5.46 |
#1F66A8 (변경) | #FCFAF8 | 5.72 |
추가 표 테마 style16
.contents_style table[data-ke-style=style16] tr:first-child td {
background-color: #B94E58;
color: #FCFAF8;
}
Background | Foreground | Contrast Ratio |
#F65660 (기본) | #FFFFFF | 3.27 |
#9E3D46 (변경) | #FCFAF8 | 4.69 |
추가 표 테마 style17
.contents_style table[data-ke-style=style17] tr:first-child td {
background-color: #E08E45;
color: #2E2E2E;
}
Background | Foreground | Contrast Ratio |
#FFA500 (기본) | #FFFFFF | 1.97 |
#E08E45 (변경) | #2E2E2E | 5.25 |
티스토리에서 제공하는 표 테마의 색상은 텍스트와의 색상 대비가 좋지 않아, 기본 색상을 변경하였습니다. 색상 대비는 SEO 점수에 영향을 미치며, 배경색과 텍스트 색상이 잘 보이도록 하는 것이 중요합니다.
테이블 변경 마무리
블로그를 이쁘게 꾸미는 것은 정말 즐겁고 흥미로운 작업입니다. 다양한 색상과 스타일을 활용해 나만의 독특한 공간을 만드는 과정은 창의력을 발휘할 수 있는 좋은 기회이기도 합니다. 하지만 아무리 예쁘고 멋진 디자인의 블로그라도, 방문자들이 작성한 글을 읽기 힘들다면 그 블로그는 좋은 결과를 얻기 어려울 것입니다. 블로그의 궁극적인 목적은 정보를 전달하고, 독자와 소통하는 것입니다. 따라서 디자인뿐만 아니라 가독성과 사용자 경험도 매우 중요합니다.
텍스트와 배경의 색상 대비를 적절히 조절하고, 테이블의 구조를 명확하게 만드는 것은 독자들이 쉽게 내용을 이해하고 흥미를 느끼게 하는 데 큰 도움이 됩니다. 결국, 블로그는 나의 생각과 이야기를 나누는 공간입니다. 그러므로 방문자들이 편안하게 읽을 수 있도록 배려하는 것이 중요합니다. 디자인과 콘텐츠는 서로 보완하는 관계에 있으며, 이 둘이 조화를 이루어야만 진정으로 매력적인 블로그가 만들어질 수 있습니다. 이제 테이블 스타일을 변경한 만큼, 시각적으로도 훌륭하면서도 정보를 효과적으로 전달하는 블로그를 만들어보세요. 여러분의 노력이 방문자들에게 긍정적인 경험을 선사할 것입니다.