2023/05/14에 해당하는 글
반응형
1

반응형

티스토리 편집기에서 테이블 내부크기(간격)조정과 색상을 바꾸는 방법

Usual..|2023. 5. 14. 23:06
infom1
infom2
infom3
infom4
반응형

티스토리 편집기는 업데이트 되면서 많이 편리해지긴 했지만, 아직 디테일한 부분에서 개선이 많이 필요한 듯합니다. 테이블 편집이나 이미지 편집에서는 별도로 외부프로그램을 많이 사용하고 있는 듯 합니다. 

 

물론 복잡한 편집이라면 외부프로그램을 이용하여 넣는 것이 맞겠지만, 간단한 테이블 조정정도는 편집기에서 기본 기능용도로는 제공해주는 것이 맞다고 생각하네요.

 

또한, 표를 이미지 형태로 넣게 되면 텍스트 기반의 외부 검색이 되지 않으니까, 노출율이 아무래도 떨어지지 않을까하는 것도 개인적인 생각입니다.

 

티스토리에서 편집기에서 테이블 크기 및 간격 조정과 색상을 바꾸는 방법에 대해서 알아보도록 하겠습니다.

 

 티스토리 편집기에서 표 크기 조정하기

 

1. 먼저 표를 한번 그려보도록 하겠습니다. 티스토리 편집기 상단의 테이블을 눌러 주시고 2×2정도의 테이블을 만들어 주도록 하겠습니다. 테이블을 만들게 되면 표테마, 셀합치기, 셀나누기, 행삽입, 행지우기 항목은 있는데 테이블 내부 간격을 조정하는 것은 보이지 않습니다.

테이블을 눌러서 만들어 줍니다.
테이블 내부 간격조절하는 항목은 없습니다.

 

2. html코드를 이용하여 사이즈 px으로 조정하여 사용했지만, 원하는 크기에 대한 가늠이 쉽지 않았으나, 최근에 다시 사용하면서 매우 간단한 방법이 있더라고요. 이미 알고 계신 사실일지도 모르지만, 중간 선에서 마우스 커서를 갖다 되면 텍스트 작성할때의 커서가 까만색 화살표로 바뀌게 됩니다.

 

여기서 누른 상태에서 왼쪽이나 오른쪽으로 드래그 해주시면 원하는 대로 테이블 내부 크기 조정이 가능합니다. 커서를 갖다대면 양쪽 화살표모양이나 잔상만 표시해주더라도 사용자들이 이해하기 쉬웠을텐데 아쉽기는 하네요. 그래도 이러한 방식으로 손쉽게 테이블을 조정하실 수 있습니다.

가운데 선을 갖다대시면 됩니다.
커서가 이런형태로 바뀌게 됩니다.
크기 조정된 테이블 입니다.

 

 

티스토리 테이블 내부 색상 바꾸기

 

1. 우선 전과 마찬가지로 테이블을 하나 만들어 주도록 하겠습니다. 티스토리 편집기 상에는 몇가지 형태를 제시하고 선택할 수 있으며 별도로 테이블 칸별로 색상을 조정할 수 있는 항목이 없습니다.

 

테이블 테마

 

2. 왼쪽 열의 색상을 검은색과 오른쪽 열의 색상을 노란색상으로 바꾸어 보도록 하겠습니다. 이를 위해서 html모드로 열어주도록 합니다. 참고로 저는 프로그래밍 전문가가 아닙니다.^^ html창에서 table코드를 찾아주신후 칸이 4개이기 때문에 4개의 스타일이 지정된 것을 보실 수 있습니다.

table태그를 찾아줍니다.

 

3. 색상을 지정하기 위해서는 html색상표를 찾아주도록 합니다. 색상코드는 네이버에서 "html색상표"라고 검색하시면 색상팔레트가 나오게 됩니다. 왼쪽열에 검정색을 지정하기 위해서 눌러주시면 #000000의 6자리 코드를 확인하실 수 있고, 오른쪽 열에는 노란색을 지정하기 위해서 눌러주시면 #FFE400 6자리 코드를 복사하도록 합니다.

 

html색상코드 찾기

 

4. 이제 티스토리 편집기의 html태그창으로 와서 첫번째 테이블 행에서 크기 지정된 다음으로 검은색 배경을 넣어 주기 위해서 bgcolor="#000000"을 넣어주시고, 첫행의 두번째 열의 색상을 노란색으로 지정해주기 위해서 bgcolor="ffe400"을 넣어주도록 합니다.(tr은 테이블의 내부행을 의미하는 태그입니다.)

 

원하는 행, 열에 bgcolor코드 넣어주기

 

5. 보시는 것과 같이 첫행의 첫열에 검정색 배경컬러가, 첫행의 두번째 열에는 노란색 배경컬러가 정상적으로 들어간것을 보실 수 있습니다. 행이 여러개 인경우에도 마찬가지로 붙여 넣어주시면 바뀌는 것을 확인하실 수 있습니다.

 

완성된 색상 바꾸기

반응형

댓글()