makeBCT

#AI #OpenAI #Chatbot #Cloud #WordPress

표(table) 만들기 1

워드프레스에서 페이지나 글에 표를 삽입하려면 생각보다 어렵지요?

어떻게 설정해야 하는건지, 셀 크기부터 횡과 열 설정도 맘대로 안되고 여간 까다로운게 아닙니다.

이는 한글이나 워드 프로그램에서 표 작성이 습관화되어 더 어렵게 느껴지는 탓도 있을 겁니다.

 

이번 글에서는 간단한 표를 만들고 스타일을 적용해 보겠습니다.

에디터의 표 삽입 기능은 워드프레스 에디터 TinyMCE Advanced 플러그인에서 지원하는 표 기능입니다.

 

1. 표 삽입하기

’글 작성화면’의 에디터에서 [표] 버튼을 클릭하여 일단 표를 삽입하겠습니다.

5X5 의 표를 삽입하였으나 아래 그림과 같이 표가 삽입되었습니다.

zpost_08img01

 

테두리 오른쪽 상자를 드레그하여 오른쪽으로 700px까지 늘립니다.

zpost_08img02

 

표 전체를 블록한 상태에서 에디터의 [표] > [표 속성]을 선택합니다.

반응형 테마에서 출력되므로 각 해상도에서 잘 보이도록 가로폭을 %로 설정하기위해 표의 가로를 100%, 세로를 au>to로 입력합니다.

zpost_08img03

 

 

 

표의 첫 번째 줄에 Header 1 ~ 5까지 적어주고 이 부분을 block으로 감싼 후, 다시 에디터의 [표] > [열 속성]을 클릭합니다.

zpost_08img04

 

속성 설정에서 [고급]탭을 클릭하여 배경색을 다음과 같이 정합니다.

zpost_08img05

 

 

header 부분의 글자색을 흰색으로 지정하고 저장 합니다. 홈페이지에서 보면 아래 그림처럼 보입니다.

zpost_08img06

 

나머지 항목도 채우고 홈페이지에서 보면 아래 그림과 같이 출력됩니다.

각각에 작성된 글자 수 만큼 표의 각 셀의 가로폭이 적당히 자동으로 조절되어 보여집니다.

zpost_08img07 

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

인기 글

Ubuntu 22.04 LTS에 Python 3.8 or 3.9 설치 방법
서버 : Vultr 클라우드OS: Ubuntu 22.04 LTS사용자 계정 생성하여 설치 진행함 1. Start with the system update sudo apt update...
Input error: k: Format of site key was invalid 에러 해결 방법
WP-Members 워드프레스 플러그인을 활용해서 회원가입 기능을 구현 하였는데, 다음과 같은 에러가 발생 하였습니다.         이는 WP-Members의...
AWS 인스턴스 유형 변경 방법
AWS 인스턴스 유형을 변경하기 위한 방법에는 다음 2가지가 있습니다.   1. 첫 번째 방법 AMI 이미지 생성 후 해당 이미지를 복원하여 신규 EC2 인스턴스를 생성하는...
사용자 작성 모듈 import 시 에러)(ModuleNotFoundError: No module named
파이썬 모듈을 만들고 테스트 할 때 ModuleNotFoundError: No module named 에러가 발생한 경우 원인 파이썬은 모듈을 불러올 때 모듈 설치 경로와 자신의...
오라클 클라우드 OCI 가입 드디어 성공 했습니다 (상세 후기)
2023년 2월 16일에 ‘오라클 클라우드 지급 검증 실패 글‘을 남긴 적이 있습니다. 그 때 검색을 통해 해결 방법을 찾아 보았고, 당시 성공했던 분들의...