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

워드프레스 TablePress 반응형 표 만들기에 필요한 CSS 코드를 소개합니다. TablePress는 워드프레스에서 효율적으로 표를 생성하고 관리할 수 있는 플러그인입니다. 하지만 기본 디자인으로 쿠팡 및 제휴 마케팅에 활용하기는 어렵습니다.

 

그리고, 기본 디자인은 애플 아이폰 및 삼성 갤럭시 스마트폰 등 다양한 모바일 기기에서 최적화된 모습을 보여주기 어렵습니다. 모바일 화면 최적화된 디자인을 CSS로 디자인을 잡아주는 게 좋습니다.

 

물론 WordPress에는 아마존에 특화된 유료 플러그인들이 있지만, 국내에서 많이 이용하는 쿠팡 및 다른 제휴 마케팅에 활용하기에는 조금 애매하더군요. 몇 가지 블록을 사용하기 위해 유료 결제를 하고 싶지 않았습니다.

 

그래서 기존에 표를 만들 때 사용하고 있는 테이블프레스 플러그인으로 표를 만들고, 모바일에서도 최적화된 디자인으로 다양한 제품 소개 및 비교에 사용할 수 있는 디자인을 CSS 코드로 만들었습니다.

 

부탁드립니다.

이 포스팅에서 사용된 워드프레스 TablePress 반응형 CSS 코드를 자신의 블로그에 사용하거나, 자신만의 아이디어를 더해 기능이 업그레이드된 버전을 재배포하시는 것은 자유입니다.

 

하지만, 이 포스팅에서 사용된 CSS 코드를 그대로 자신의 블로그에 포스팅하는 것은 하지 마세요. 부탁드립니다.

 

 

TablePress 반응형 CSS 코드 소개

이번에 소개하는 TablePress 반응형 CSS 코드는 모두 4개의 디자인으로 구성되어 있습니다. TablePress 표에 삽입된 이미지의 최대 크기를 200px로 제한하고, 지정된 셀의 폭을 벗어나지 않도록 했습니다. 그리고 표 내부에 링크 삽입시 2가지 버튼 스타일을 사용할 수 있도록 되어 있습니다.

 

 

애플 아이폰, 삼성 갤럭시 스마트폰 등 모바일 화면에도 최적화된 형태로 보일 수 있도록 했습니다.

 

워드프레스 TablePress 플러그인용 CSS.txt

0.00MB

 

• 제품 소개용 디자인 : 기본적으로 가로 배치로 보이고, 모바일 화면에서는 세로 배치로 보이도록 되어있습니다.
• 제품 비교 디자인 : 2 ~ 4개의 제품을 비교할 수 있도록 디자인되어 있으며, 모바일에서 동일한 모습으로 보입니다.

 

저렴한 비용으로 워드프레스 운영하는 방법

국내에 서버가 있는 Vultr에서는 월 6달러의 비용으로 워드프레스를 운영할 수 있습니다. 클라우드 웨이즈 등 다른 호스팅 업체보다 저렴한 비용으로 워드프레스를 설치하고 운영할 수 있습니다.

 

 

 

 

 

제품 소개용 : affiliate

제품 소개용 CSS 코드 적용 전 후 비교 - 모바일 화면 위에서 아래로 배치 적용

 

 

2개 제품 비교용 : compare

2개 제품을 비교하는 CSS 코드 적용 전후 비교

 

 

3개 제품을 비교용 : compare1

3개 제품을 비교하는 CSS 코드 적용 전후 비교

 

 

4개 제품을 비교용 : compare2

4개 제품을 비교하는 CSS 코드 적용 전후 비교

 

 

티스토리 반응형 CSS 버튼 - 데스크탑 2개의 버튼 좌우 배치, 모바일 2개의 버튼 상하 배치

 

 

TablePress 반응형 CSS 코드 사용법

TablePress 반응형 CSS 코드를 사용하는 방법은 간단합니다. 다운로드한 CSS 코드를 아래의 그림처럼 'TablePress - 플러그인 옵션' 탭을 붙여 넣기 한 다음 저장해 주세요.

 

그런 다음 '모든 표' 탭에서 표를 작성하거나, 기존의 표에 적용하려는 디자인의 CSS 명칭을 입력해 주면 됩니다.

 

 

구분	제품 소개	제품비교(2개)	제품비교(3개)	제품비교(4개)
CSS 명칭	affiliate	compare	compare1	compare2

 

워드프레스 TablePress 플러그인용 CSS.txt

0.00MB

 

워드프레스 관리 페이지에서 TablePress 반응형 CSS 코드 저장 및 불러오기

 

 

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

 

 

테이블 헤더 스타일을 제대로 적용하려면 표의 첫 번째 행을 아래의 그림처럼 작성해 주세요. 'A1' 셀에 내용을 입력하고 나머지 B1, C1, D1에는 '#colspan#'을 입력해 주세요.

 

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

 

 

링크 버튼 스타일 적용

 

 

TablePress 표에 링크를 삽입하면 기본적으로 버튼 스타일이 적용됩니다. 두 번째 버튼 스타일은 a태그 내부에 class="btn-2st" 추가로 작성해 줘야 정상적으로 적용이 됩니다.

 

링크 버튼 스타일 적용, 두 번째 버튼 스타일 적용하려면 class="btn-2st" 추가

 

 

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

배포한 CSS 코드에는 TablePress 내부에 삽입된 이미지의 최대 크기를 200px로 제한을 했습니다. 만약 모바일 화면에서만 작은 이미지를 적용하고 싶다면 이미지에 적용되는 속성을 아래와 같이 변경하시면 됩니다.

 

/* .tablepress 이미지 스타일 */
.tablepress img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
}

@media (max-width: 768px) {
	.tablepress img {
		max-width: 200px;
	}
}

 

 

TablePress 내부 줄 간격 변경 방법

TablePress 내부 줄 간격 변경 방법

 

TablePress 내부 줄 간격이 좁아 답답한 느낌이 있어서, 특정한 셀의 내부 줄 간격을 아래와 같은 코드를 추가해서 내부 줄 간격을 조금 더 넓게 만들었습니다.

 

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

 

 

 

맺음말

지금까지 WordPress에서 많이 사용하는 TablePress 플러그인으로 제품 소개 및 제품 비교 시 사용하기 좋은 CSS 디자인을 소개했습니다. 부족한 글이지만 끝까지 읽어주셔서 감사합니다. 다음에는 더 좋은 내용으로 뵙겠습니다.

 

벌쳐(Vultr) 워드프레스 설치 방법 - 무료 사이버패널(CyberPanel) 사용

 

벌쳐(vultr) 워드프레스 설치 방법 3th | 무료 헤스티아 컨트롤 패널(hestia control panel) 사용

 

 

 

 

출처 및 저작권 표시

 

자료 출처

 

저작권 표시

썸네일 디자인 : 미리캔버스에서 제작되었습니다.

본문 글꼴(폰트) : Google Noto Sans Korean - OFL(Open Font Licese)

이미지에 삽입된 글꼴(폰트) : 이 페이지는 카페 24(주)이 제공한 "카페 24 당당해"가 적용되어 있습니다.

 

 

기타 - 경제적 이해 관계 표시

이 포스팅에 포함된 일부 링크는 제휴마케팅의 활동의 일환으로 이에 따른 일정액의 수수료를 제공받습니다.