본문으로 바로가기
  1. Home
  2. IT & 기타/티스토리
  3. 티스토리 글쓰기에서 컬러 텍스트 상자를 삽입하는 방법

티스토리 글쓰기에서 컬러 텍스트 상자를 삽입하는 방법

· 댓글 14

제 블로그에 자주 방문하시는 데보라님께서 다음과 같은 텍스트 상자를 삽입하는 방법이 궁금해하셔서 이 글을 통해 설명해드리려고 합니다.

(출처: https://deborah.tistory.com/)

해당 부분을 복사해서 본문에 넣으면 간단하지만, 티스토리의 새 에디터에서는 서식 있는 텍스트를 복사해도 서식이 적용되지 않습니다.ㅠ

조금 복잡하지만 다음과 같은 방법으로 비슷하게 구현할 수 있습니다.

먼저 꾸미기 > 스킨 편집을 클릭합니다.

스킨 편집 화면이 표시되면 HTML 편집을 선택합니다.

HTML 편집 페이지가 표시됩니다. 그러면 CSS 탭을 선택합니다.

 

CSS 섹션에서 맨 아래로 이동하여 다음 코드를 추가하고 저장합니다.

/* 컬러 텍스트 상자 */
.bluebox {
    border-style: solid;
    border-width: 1px;
    border-color: rgb(121, 165, 228);
    background-color: rgb(219, 232, 251);
    padding: 10px;
    line-height: 1.8;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.greenbox {
    border-style: solid;
    border-width: 1px;
    border-color: rgb(159, 211, 49);
    background-color: rgb(231, 253, 181);
    padding: 10px;
    line-height: 1.8;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.redbox {
    border-style: solid;
    border-width: 1px;
    border-color: rgb(254, 137, 67);
    background-color: rgb(254, 222, 199);
    padding: 10px;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.greybox {
	border-style: double;
    border-width: 3px;
    border-color: rgb(193, 193, 193);
    background-color: rgb(238, 238, 238);
    padding: 10px;
    line-height: 1.8;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

이 작업은 한 번만 해주면 됩니다.

CSS 코드를 추가했다면, 이제 새 에디터에서 원하는 Paragraph(문단)를 색깔 있는 텍스트 상자로 표시되도록 할 수 있습니다.

먼저 텍스트를 입력합니다. 텍스트 입력이 완료되면 오른쪽 상단의 "기본모드"를 클릭하고 HTML을 선택합니다.

위의 그림과 같이 컬러 텍스트 상자로 표시하고 싶은 문단 태그에 클래스를 지정합니다.

예를 들어, <p>파란색 상자!!</p>를 파란색 상자로 표시하려면 <p class="bluebox">파란색 상자!!</p>와 같이 class="bluebox"를 추가합니다. 마찬가지 방법으로 녹색 상자 (greenbox), 빨간색 상자 (redbox), 회색 상자 (greybox)를 만들 수 있습니다.

예시:

네 자식들이 해 주기 바라는 것과 똑같이 네 부모에게 행하라. - 소크라테스

너 자신을 알라. - 소크라테스

내 마음은 관상가가 하는 말과 같이 실로 흉악함에 차 있다. 단지 내가 이를 잘 이겨서 행동으로 나타나지 않을 뿐이다. - 소크라테스

다른 사람이 쓴 책을 읽는 일로 시간을 보내라. 다른 사람이 고생을 하면서 깨우치는 것을 보고 쉽게 자신을 개선시킬 수 있다. - 소크라테스

돼지가 되어 즐거워하기보다는 사람이 되어 슬퍼하리라. - 소크라테스

만족은 천연의 재산이다. - 소크라테스

많은 사람들이 그 무엇보다 쾌락을 구하지만 그 쾌락을 충분히 얻지 못하고 있다. - 소크라테스

 

HTML에 익숙하지 않으면 조금 어렵게 느껴질 수 있고, 번거로울 수 있을 것 같습니다. CSS 코드 부분의 색상 등은 자유롭게 수정할 수 있습니다. (클래스명도 다르게 지정할 수 있고, 비슷한 방법으로 다른 색상을 추가할 수도 있습니다.)

참고:

SNS 공유하기
💬 댓글 14
logo

유용한 팁이네요 ^^ 감사합니다. 앱이 새로 나와도 이상한 태그도 많이 생기고 불면은 계속되네요

logo

새 에디터도 아쉬운 점이 제법 눈에 띄네요.

logo

이전 글쓰기에서는 잇었는데 세 글쓰기는 없더군요.
HTML에 익숙하지 않아 어렵게 느껴집니다.

logo

네. HTML과 CSS에 익숙하지 않으면 조금 어렵게 느껴질 수 있을 것 같습니다.

logo

이건 정말 필요한 정보가 아닌가 싶네요!!ㅎㅎ
잘보고 공감하고 갑니다!!

logo

글에만 신경썼었는데, 워드님 팁을 보니까 디자인에도 욕심이 나네요.
영감을 주셔서 감사합니다!

logo

디자인은 웬만큼만 되면 되고 중요한 것은 콘텐츠인 것 같습니다. 저는 이제 노안이 올 나이가 되어 글자 크기에 민감한 편입니다. 글자 크기가 너무 작으면 안 읽고 나옵니다.ㅎㅎ

logo

CSS로 글상자를 만들때마다 적용할 수 있군요.

logo

귀찮지만 글상자를 이용하고 싶은 경우 이 방법을 활용해볼 수 있습니다.

logo

이거 고단위인데요..ㅠㅠ 좀더 연구를 해서 사용해 보도록 하겠습니다.

logo

옛날 편집기에서 즐겨 사용하던 기능이 이것과 외부 콘텐츠 넣는 것 두 가지였는데, 그것들만 쏙 빠져서 아쉽습니다.
문단 단위로 html모드에서 적용시키면 된다는 말씀이지요?
그런데, 혹시 표를 만들면 색이 적용되도록 해서 html 모드 전환할 필요 없도록 가능할까요? 셀 하나짜리 표를 만들면 비슷한 효과가 있을 것 같아서요. (제가 코드에 까막눈이라... ^^;;)

logo

HTML 모드에서 <p> 태그에 클래스를 추가하는 방법으로 해야 할 것 같습니다.

워드프레스에서는 Block Editor에서 CSS 클래스를 추가할 수 있어 해당 문단 블록에 CSS 클래스만 추가하면 되지만 티스토리의 새 에디터에서는 조금 번거롭네요.

logo

아, 그렇군요. 감사합니다. ^^

이름을 저장합니다.

가성비가 뛰어난 웹호스팅

저렴하고 가성비 좋은 웹호스팅

최근 댓글

블로그를 방문해주셔서 감사⋯ 💬워드프레스, 웹호스팅 정보를 제공하는 블로그 Avada 광고주 URL 차단기능이 있었⋯ 💬똘켓 방문자들로부터 문의를 받으⋯ 💬워드프레스, 웹호스팅 정보를 제공하는 블로그 Avada 사이트에서 방문자들로부터⋯ 💬워드프레스, 웹호스팅 정보를 제공하는 블로그 Avada 워드프레스 엘리멘터 문의폼⋯ 💬空空(공공)

워드프레스 시작 가이드

워드프레스 시작하기