[html/css] 티스토리 표 색깔 변경 하는 법

※ 목차

1. 색상코드 찾기

2. html 편집하기

---

0. 예제

---

html 편집을 통해 표1을 표2와 같이 색을 채워보겠습니다.

 

[표1]

A
B	C	E	G
	D	F	H

 

 

[표2]

A
B	C	E	G
	D	F	H

 

1. 색상코드 찾기

---

html을 편집하기에 앞서 채우고 싶은 색의 색상코드를 알아야합니다. 색상코드는 검색을 통해 쉽게 얻을 수 있습니다. 시간 절약을 위해 색상코드를 얻을 수 있는 사이트의 링크를 첨부하니 더보기를 참조해주세요. 

• https://html-color-codes.info/Korean/
• search.naver.com/search.naver?sm=tab_hty.top&where=nexearch&query=%EC%83%89%EC%83%81%EC%BD%94%EB%93%9C%ED%91%9C&oquery=%ED%8B%B0%EC%8A%A4%ED%86%A0%EB%A6%AC+%ED%91%9C+%EC%83%89&tqi=UGKOCwp0J1sssaT%2FMPVssssstKR-495733

 

 

[표2]에 사용된 색들의 색상코드는 다음과 같습니다.

 

 

 

 

 

 

2. html 편집하기

---

표의 색깔을 변경하기 위해서는 기본모드에서 html 모드로 전환하신 후 bgcolor = "색상코드"를 새로 추가해주어야 합니다. 

 

색이 지정되어 있지 않는 표1의 코드는 아래와 같습니다. 이 코드는 표1의 첫 행을 나타냅니다. 차례대로 행의 길이, 텍스트 정렬 방식, 행의 높이, 병합한 열의 수, 텍스트 내용을 알려줍니다. 이 코드에는 색에 대한 정보가 담겨있지 않습니다. 따라서 색에 대한 정보를 알려주는 코드를 새로 추가해야 합니다.

 

 

색에 대한 정보는 bgcolor="색상코드" 형식의 코드로 알려줄 수 있습니다. 표2의 첫 행은 색상코드 #030066으로 채워져있으므로 bgcolor="#030066"을 코드의 끝에 추가해주세요.

 

 

표의 다른 행과 열도 같은 방식으로 진행하시면 됩니다. 코드를 모두 수정하시면 아래와 같이 표의 색이 채워짐을 확인하실 수 있습니다. 

 

A
B	C	E	G
	D	F	H

 

---

 

 

[그림 1] 표1의 코드

 

[그림 2] 표2의 코드