본문으로 바로가기
  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 코드 부분의 색상 등은 자유롭게 수정할 수 있습니다. (클래스명도 다르게 지정할 수 있고, 비슷한 방법으로 다른 색상을 추가할 수도 있습니다.)

참고:

💬 댓글 14
logo

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

logo

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

logo

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

logo

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

logo

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

logo

감사합니다~ 즐거운 하루 보내세요.

logo

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

logo

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

logo

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

logo

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

logo

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

logo

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

logo

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

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

logo

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

이름을 저장합니다.

가성비가 뛰어난 웹호스팅

저렴하고 가성비 좋은 웹호스팅
최근 댓글

초기화 시켜야 하는 경우 참⋯

💬空空(공공)

신뢰가 되지않는다면 세무사⋯

💬똘켓ioi

가성비가 좋은 호스팅이로군요^^

💬空空(공공)

잘 보고 갑니다 무더운 하루⋯

💬空空(공공)

올해는 국세청에서 쉽게 신고⋯

💬워드프레스, 웹호스팅 정보를 제공하는 블로그 Avada

워드프레스 시작 가이드

워드프레스 시작하기
워드프레스 네이버 카페
이모티콘창 닫기
울음
안녕
감사해요
당황
피폐

이모티콘을 클릭하면 댓글창에 입력됩니다.

프리미엄 테마 그래픽 동영상 템플릿 무료 다운로드