텀블러 사용법: 텍스트 글(TEXT Aa)에 색상 지정하는 방법?


텀블러 블로그의 텍스트 글쓰기(TEXT Aa)에서는 글자의 색상을 지정할 수가 없다. 글을 쓰다 보면, 특정한 부분에 색상을 입히고 싶을 때가 있다. 아래와 같이 하면 조금 번거롭기는 하지만 글자의 색상을 지정할 수 있다.

간단히 말하자면, 블로그 테마(스킨에) 색상을 CSS코드로 넣어 놓고 > 글쓰기의 HTML 모드에서 지정해주는 것이다. 아래 그림을 보면 누구나 쉽게 할 수 있을 것이다.


1. 텀블러 블로그 테마의 HTML에 CSS 코드 넣기

==> 블로그 테마 HTML 편집창으로 간다
HTML 편집창을 열기는 이 글을 참조>>

=> 아래 그림에서와 같이 </style></head>을 찾아서 </style>바로 위에 CSS코드를 넣는다. 코드 형식은
" .코드이름{color:색상이름 또는 코드;} "이다.

코드이름 앞에 있는 점(.)과 color 뒤에 있는 콜론(:) 그리고 끝에 있는 세미콜론(;)에 주의하면 된다.

==> 코드이름은 기억하기 쉬운 것으로 하면된다. 다만, 다른 CSS코드와 이름이 중복되지 않아야 한다. 색상이름은 red, blue, green, yellow, silver, grey, black 등으로 지정을 해도 되고, #xxxxxx와 같이 칼라코드를 쓰도 된다.

아래의 코드를 복사해서 필요한 만큼 붙여 넣고, 이름과 색상을 자신이 원하는 대로 바꾸면된다.

.r{color:red;}

[텀블러 블로그 테마 HTML 편집창에 CSS 코드 넣기]
텀블러 블로그 테마 HTML 편집창에 텍스트 글에 색상 CSS 코드 넣기



2. 텍스트 글쓰기에서 색상지정

==> 아래 그림에서 보는 것처럼, 텍스트 글쓰기(TEXT Aa)에서 글을 쓰는 도중이나 글을 쓴 다음에 창의 오른쪽 위에 있는 <html> 버튼을 눌러 html편집 기능으로 전환한다.

==> 색상을 지정하고 싶은 부분을 싸고 있는 <p>태그 속에 아래 그림과 같이 색상지정을 해준다. 형식은 <p class="앞에서 만든 CSS코드의 이름"> 이다.

==> <p 와 class 사이에서 스페이스바를 눌러 공백을 하나 둔다.
==> 색상코드 이름은 " " 로 둘러싼다.

글을 저장하고, 블로그에서 보면 지정된 색상이 반영되어 있을 것이다.

[텀블러 텍스트(TEXT Aa) 글쓰기에서 색상지정하기]
텀블러 텍스트 글에 색상 CSS 코드 지정하기

위의 보기에서와 같이 지정하고 나서, 블로그에서 보면 아래와 같은 모습이 된다.

[텀블러텍스트 글쓰기에 색상을 지정한 모습]
텀블러 텍스트 글에 색상 CSS 코드를 지정한 후의 모습

도움이 되었기를 바랍니다.