벨로그(velog) & 티스토리(Tistory) 색 넣는 법

2022년 12월 24일에 작성됨

 

 

HTML 색상 이름과 코드표
https://www.w3schools.com/tags/ref_colornames.asp

HTML Color Names

 

 

 

1. 글자 색 바꾸기

<span style="color:색 이름 또는 코드">텍스트</span>

 

 

2. 배경 색 바꾸기

<span style='background-color: 색 이름 또는 코드'> 텍스트 </span>

 

 

<적용 예시>

<span style="color:skyblue">스카이 블루 색 이름 버전</span>
<span style="color:#87ceeb">스카이 블루 색 코드 버전</span>

스카이 블루 색 이름 버전
스카이 블루 색 코드 버전

 

 

 

<span style='background-color: Pink'>핑크색 배경 색 이름 버전</span>
<span style='background-color: #FFC0CB'>핑크색 배경 색 코드 버전</span>

핑크색 배경 색 이름 버전
핑크색 배경 색 코드 버전

 

 

 

위의 예시를 보다시피 맨 끝의 </span>은 해당하는 글자의 끝을 지정하는 기능을 한다!

 

벨로그는 그냥 바로 저 코드를 작성하면 되고, 티스토리는 HTML 블럭에다가 작성하면 된다.

티스토리는 굳이 코드로 작성하지 않아도 상단바에서 원하는 색깔 코드를 입력하면 쉽게 바꿀 수 있다.

 

 

---

 

 

한눈에 보는 헥스(Hex) 색깔 코드

 

 

 

RGB (Red , Green , Blue) 방식 색상 코드 표기법으로

#과 뒤에 붙는 여섯 자리 또는 세 자리의 숫자로 색상을 표기하는 방식이다.

여섯 자리인 경우는 두 자리씩 끊어서 각각 Red, Green, Blue의 강도를 나타낸 것이며, 각 두 자리수는 16진수이므로 00일 때 가장 어둡고 FF일 때 가장 밝다. 중간값은 80이다.
(세 자리인 경우는 한 자리씩 끊어서 'Red', 'Green', 'Blue'이며 각 색상의 강도를 16단계씩 나타낸다.)

특정 성분에만 강한 강도를 부여하면 선명한 유채색이 나타난다.

예를 들어 #FF0000이면 R값이 최고값이고 나머지는 0이므로 순수한 빨간색이 나타난다. #FFFF00이면 R값과 G값이 최고값이고 B값이 0이므로 R과 G의 합성 빛인 노란색이 나타난다.

 

 

 

<활용 예시>

 

RGB (<span style="color:#ff0000">Red </span>, <span style="color:#00ff00">Green </span>, <span style="color:#0000ff">Blue</span>) 방식 색상 코드 표기법으로

 

 

 

end

벨로그 포스팅을 할 때 무엇을 강조하려면 굵게 하는 방법밖에 없어서 아쉬울 때가 많았다. 그래서 색을 넣는 방법을 검색해보고 공부할 겸 내가 보기 편한 방식으로 포스팅을 작성해봤다. 앞으로 색을 넣는 방법이 헷갈리면 내 포스팅으로 검색해서 볼 수 있다니!! 한번 정리해 놓으니까 엄청 든든하다ㅎ_ㅎ

그리고 조사하면서 진짜 신기했던 점 TMI
몇 년 전부터 헥스 코드 사진은 이미 내 휴대폰에 저장 되어 있었다..ㅇ0ㅇ!!
어떤 모바일 게임에서 제목을 더 눈에 띄게 하기 위해 저 색깔표를 사용했는데
그게 이렇게 연결된다니... 너무 신기하고 재밌었다~!

 

 

+) 벨로그로 포스팅을 했던 시절에 작성한 글이지만, 티스토리에서도 HTML 블럭에 동일하게 작성하면 그대로 적용된다. 하지만..! 티스토리에선 굳이 HTML을 사용하지 않아도 글자색과 배경색을 상단바에서 쉽게 변경이 가능하다. 사실 이런 편리한 기능 때문에 티스토리로 옮기게 된 것도 있다. ㅎㅎ