워드프레스 TablePress 반응형 표 만들기 쿠팡 및 제휴 마케팅에 활용하기

워드프레스로 제휴 마케팅을 시작하려는데, 혹시 테이블 디자인 때문에 고민이 많으셨나요? 저도 TablePress 플러그인을 즐겨 사용하지만, 기본 디자인으로는 쿠팡 파트너스나 다른 제휴 마케팅에 활용하기가 늘 아쉬웠죠.

특히 애플 아이폰, 삼성 갤럭시 스마트폰 등 다양한 모바일 기기에서 표가 보기 좋게 최적화되는 일이 쉽지 않았어요. 아마존에 특화된 유료 플러그인도 많지만, 국내 제휴 마케팅에는 조금 애매하더군요. 몇 가지 기능 때문에 큰 비용을 들이고 싶지는 않았습니다.

그래서 제가 직접 TablePress 표를 모바일에서도 깔끔하게 볼 수 있도록 반응형 CSS 코드를 만들었습니다. 오늘은 제가 만든 CSS 코드를 소개해 드리고, 제휴 마케팅에 효과적으로 활용하는 방법을 알려드릴게요.

제가 만든 이 TablePress 반응형 CSS 코드는 여러분의 블로그에서 자유롭게 사용하거나, 자신만의 아이디어를 더해 기능을 업그레이드하는 것도 모두 환영합니다. 다만, 이 포스팅의 CSS 코드를 그대로 복사하여 본인 블로그에 포스팅하는 것은 지양해 주시면 감사하겠습니다.

TablePress 반응형 CSS 코드 소개

제가 이번에 소개해 드리는 TablePress 반응형 CSS 코드는 총 4가지 디자인으로 구성되어 있습니다. 각각의 디자인은 특정 용도에 최적화되어 있어 여러분의 제휴 마케팅 콘텐츠에 다양하게 활용하기 좋아요.

이 코드는 표에 삽입된 이미지의 최대 크기를 200px로 제한하여 모바일에서도 깨지지 않고 잘 보이도록 했고요, 지정된 셀의 폭을 벗어나지 않도록 신경 썼습니다. 특히 표 내부에 링크를 삽입할 때 사용할 수 있는 2가지 버튼 스타일도 포함하고 있죠.

애플 아이폰, 삼성 갤럭시 스마트폰 등 어떤 모바일 화면에서든 최적화된 형태로 표가 나타나도록 제가 직접 테스트하며 만들었답니다.

• 제품 소개용 디자인: 기본적으로 가로 배치로 보이다가, 모바일 화면에서는 자동으로 세로 배치로 전환됩니다.
• 제품 비교 디자인: 2개에서 최대 4개의 제품을 나란히 비교할 수 있도록 디자인되었으며, 모바일에서도 동일한 모습으로 깔끔하게 보입니다.

제품 소개용: affiliate

이 디자인은 하나의 제품을 상세하게 소개할 때 아주 유용합니다. PC 화면에서는 여러 항목이 가로로 나열되어 시원한 느낌을 주지만, 모바일에서는 자동으로 세로로 전환되어 가독성을 높여주죠. 텍스트와 이미지 링크를 함께 배치하여 사용하기 좋습니다.

주요 특징으로는 이미지가 셀의 크기를 넘지 않도록 최대 폭이 설정되어 있으며, 제품의 특징을 간결하게 설명하기 좋은 구조를 가지고 있습니다.

2개 제품 비교용: compare

두 가지 제품의 장단점을 명확하게 비교하고 싶을 때 이 디자인을 사용하면 효과적입니다. 양쪽에 제품 이미지와 특징을 배치하여 독자가 한눈에 차이점을 파악할 수 있도록 도와주죠. 모바일에서도 PC와 동일하게 비교표가 유지됩니다.

주로 다음과 같은 경우에 활용하기 좋습니다.

• 비슷한 두 제품의 핵심 기능 비교
• 신제품과 구제품의 성능 변화 설명
• 경쟁사 제품과의 차별점 부각

3개 제품을 비교용: compare1

세 가지 제품을 동시에 비교할 필요가 있을 때 이 ‘compare1’ 디자인을 활용해 보세요. 각 제품의 주요 스펙이나 특징을 나란히 배치하여 복잡한 정보도 깔끔하게 전달할 수 있습니다. 모바일에서도 깨지지 않는 안정적인 레이아웃을 제공합니다.

이 디자인은 특히 다음과 같은 상황에서 빛을 발하죠.

• 가성비, 성능, 디자인 등 세 가지 기준으로 제품 비교
• 3가지 옵션을 제시하고 독자에게 선택을 돕는 경우

4개 제품을 비교용: compare2

최대 네 가지 제품까지 비교가 가능한 ‘compare2’ 디자인은 좀 더 폭넓은 선택지를 제시해야 할 때 적합합니다. 다양한 제품을 한눈에 비교할 수 있어 독자의 구매 결정에 큰 도움을 줄 수 있어요. 마찬가지로 모바일에서도 최적화된 모습으로 보여집니다.

이 디자인의 주요 강점은 다음과 같습니다.

• 다수의 선택지를 한 번에 보여줄 수 있음
• 종합적인 비교 분석을 통해 정보의 깊이 제공
• 복잡한 정보도 시각적으로 쉽게 이해 가능

TablePress 반응형 CSS 코드 사용법

제가 만든 TablePress 반응형 CSS 코드를 사용하는 방법은 정말 간단합니다. 아래 그림처럼 ‘TablePress – 플러그인 옵션’ 탭에 코드를 붙여넣기 한 다음 저장하기만 하면 되죠. 이후에는 ‘모든 표’ 탭에서 새로운 표를 작성하거나 기존 표에 원하는 디자인의 CSS 명칭을 입력해 주면 끝입니다.

헤더 스타일 적용을 위한 표 작성 방법

테이블 헤더 스타일을 제대로 적용하려면 표의 첫 번째 행을 아래 그림처럼 작성해야 합니다. ‘A1’ 셀에 내용을 입력하고, 나머지 ‘B1’, ‘C1’, ‘D1’ 셀에는 ‘#colspan#’을 입력해 주세요. 이렇게 하면 깔끔한 헤더 디자인이 적용됩니다.

이 방법으로 표를 만들면 헤더가 시각적으로 강조되어, 독자들이 표의 내용을 훨씬 쉽게 이해할 수 있습니다.

링크 버튼 스타일 적용

TablePress 표에 링크를 삽입하면 기본적으로 제가 만든 CSS에 따라 버튼 스타일이 적용됩니다. 하지만 두 번째 버튼 스타일을 사용하고 싶다면, 해당 <a> 태그 내부에 class="btn-2st"를 추가로 작성해 줘야 정상적으로 적용이 된답니다.

이렇게 하면 하나의 표 안에서 두 가지 형태의 버튼을 사용하여 시각적인 다양성을 주거나, 특정 링크를 더 강조할 수 있어요.

TablePress 내부 이미지 크기 변경 방법

제가 배포한 CSS 코드에는 TablePress 내부에 삽입된 이미지의 최대 크기를 200px로 제한해 두었습니다. 이는 모바일 환경에서 이미지가 너무 커져 표 레이아웃이 깨지는 것을 방지하기 위함이죠.

만약 여러분이 모바일 화면에서만 이미지를 더 작게 적용하고 싶거나, 혹은 다른 크기로 조절하고 싶다면, 아래 CSS 코드에서 max-width 값을 변경하시면 됩니다.

/* .tablepress 이미지 스타일 */
.tablepress img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}
@media (max-width: 768px) {
    .tablepress img {
        max-width: 200px; /* 원하는 크기로 변경하세요 */
    }
}

TablePress 내부 줄 간격 변경 방법

TablePress 내부의 줄 간격이 너무 좁아서 답답한 느낌을 줄 때가 있죠. 특히 내용이 길어지면 가독성이 떨어지기도 하고요. 제가 배포한 CSS 코드에는 특정 셀의 내부 줄 간격을 조절하여 좀 더 여유롭고 읽기 편하게 만드는 기능이 포함되어 있습니다.

아래 코드를 활용하면 affiliate 디자인의 세 번째 열(.column-3)에 줄 간격을 추가할 수 있습니다. margin-bottom 값을 조절하여 원하는 여백 크기를 설정해 보세요.

.tablepress.affiliate .column-3 br {
    content: "";
    display: block;
    margin-bottom: 10px; /* 원하는 여백 크기로 조정하세요 */
}

지금까지 워드프레스에서 많이 사용하는 TablePress 플러그인으로 제품 소개 및 제품 비교 시 사용하기 좋은 CSS 디자인을 소개해 드렸습니다. 이 코드를 통해 여러분의 제휴 마케팅 콘텐츠가 한층 더 전문적이고 보기 좋게 바뀌기를 바랍니다.

부족한 글이지만 끝까지 읽어주셔서 감사합니다. 다음에는 더 좋은 내용으로 뵙겠습니다!