makeBCT

#AI #OpenAI #Chatbot #Cloud #WordPress

워드프레스 표(table) 만들기 2

표(table) 만들기 1’에서 소개한 글에 이어 이번에는 좀 더 복작한 표를 만들어 보겠습니다.

표(table) 만들기 1 글 보기 : http://makebct.net/1635?cat=148

 

1. 표 삽입하기

표(table) 만들기 1’에서와 같은 방법으로 다음과 같은 표를 만들었습니다.

zpost_08img08

 

셀을 합치기 위해 해당 셀들을 선택 후, 에디터의 [표] > [셀] > [셀 병합]을 클릭하여 셀을 합쳐줍니다.

zpost_08img09

 

 

 

구분을 위해 에디터의 [표] > [셀] > [열 속성]을 이용하여 다음 그림과 같이 표를 만들었습니다.

zpost_08img10

 

2. 표를 정교하게 설정

위에서 만들어진 표에서 각 열의 가로폭을 지정하여 너비를 조정해 보겠습니다.

첫 번째 열 ’header 1’을 선택한 후, 에디터의 [표] > [셀] > [열 속성] 에서 폭을 15%로 지정합니다.

반응형에서 보여지는 걸 고려하여 가로폭은 %로 작성합니다.

zpost_08img11

 

 

위와 같은 방법으로 header 2를 제외한 header 1~5까지 각각의 너비를 %로 입력하였습니다.

이렇게하면 표 전체 너비 100%에서 나머지 Header 1, 3, 4, 5에 지정된 너비를 뺀 만큼 header 2에 해당하는 열 너비가 자동으로 할당됩니다. 홈페이지에 나와 보면 다음 그림과 같이 출력됩니다.

zpost_08img12

 

 

3. 각 셀의 안쪽 여백 설정하기

만들어진 표를 보면 글자들이 표의 테두리 선에 다닥다닥 붙어있어 보기가 좋지 않습니다.

셀의 안쪽에 여백을 두어 보기 좋게 만들기 위해 표를 만들고 있는 ’글 작성창’에서 [텍스트] 모드로 전환합니다.

 

해당 표의 셀 여백을 주기 위해 아래 그림과 같이 표에 ’table01’이라고 class를 지정해 줍니다.

zpost_08img13

 

[관리자] > [외모] > [custom CSS]에서 추가 스타일을 작성해 줍니다.

/* 지정한 표의 셀 여백 */
table.table01 td {padding: 5px;}

 

 

홈페이지에서 보면 각 셀의 안쪽에 여백이 생겨 보기좋게 작성되었습니다.

예제보기 : http://makebct.cafe24.com/?p=153

zpost_08img14

 

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.

인기 글

사용자 작성 모듈 import 시 에러)(ModuleNotFoundError: No module named
파이썬 모듈을 만들고 테스트 할 때 ModuleNotFoundError: No module named 에러가 발생한 경우원인파이썬은 모듈을 불러올 때 모듈 설치 경로와 자신의...
오라클 클라우드 OCI 가입 드디어 성공 했습니다 (상세 후기)
2023년 2월 16일에 ‘오라클 클라우드 지급 검증 실패 글‘을 남긴 적이 있습니다.그 때 검색을 통해 해결 방법을 찾아 보았고, 당시 성공했던 분들의...
Permission denied (publickey) 해결 방법
Plesk에서 생성된 system user로 ftp 접속 시 다음과 같은 에러 메시지가 발생하면서 접속이 되지 않습니다.상태: 152.67.193.32:49152에 연결... 응답: fzSftp...
WSL2/Ubuntu 22.04 LTS에 Anaconda 설치 
WSL2/Ubuntu 환경에서 Python 버전별로 가상환경을 만드는 방법 중 그나마 Anaconda 방법이 좋은 것 같네요. 설치 방법은 간단합니다.1. apt update사용자...
AWS 인스턴스 유형 변경 방법
AWS 인스턴스 유형을 변경하기 위한 방법에는 다음 2가지가 있습니다.   1. 첫 번째 방법 AMI 이미지 생성 후 해당 이미지를 복원하여 신규 EC2 인스턴스를 생성하는...

BCT Ai Chatbot

답변을 준비중입니다 . . .