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

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

참고:

  • 네이버 블러그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 카카오스토리 공유하기

댓글을 달아 주세요

">
  1. thumbnail
    [찌쏘]'s Magazine

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

  2. thumbnail
    空空(공공)

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

  3. thumbnail
    인생2막은 EnJoY

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

  4. thumbnail
    짐농

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

  5. thumbnail
    IT세레스

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

  6. thumbnail
    Deborah

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

  7. thumbnail
    열매맺는나무

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