'티스토리 에디터 글 박스'에 해당되는 글 1건

  1. 2021.03.06 티스토리 신 에디터에서 구 에디터처럼 글 상자 만드는 방법 3

 

 

 

티스토리 신에디터에서 구 에디터처럼 글 상자 만드는 방법

 

신 에디터로 넘어오면서 여러가지 불편한 점들이 많이 하나하나 열거하기도 쉽지 않습니다만

저처럼 박스를 이용한 글적기를 하시던 분들은 더 이상 이것을  사용하지 못하게 되서 많이 불편 하실거라 봅니다.

 

그래서 글박사 상자를 예전처럼 사용할수 있는 방법을 약간 번거롭지만 알려드리도록 하겠습니다.

 

 

먼저 간단한 예시로 작성된 글박스를 몇가지 보여드리고 나서 설명을 드리도록 하겠습니다.

 

이중으로 된 테두리 박스를 만들어서 박스안에 글을 작성

 

 

단일 테두리가 있는 박스 글자

 

 

테두리가 없는 박스를 만들어서 박스안에 글을 작성

 

 

회색바탕에 11 사이즈 폰트로 된 글을 작성

 

 

현재 신 에디터에서는 이런씩으로 글상자를 만들어서 글을 작성할 수가 없게 되었습니다.

간단하게 글 상자를 만들 수 있는 방법을 순서대로 알려드리겠습니다.

 

 

1) 먼저 기본모드로 된 글작성 에디터에서 HTML 을 선택합니다.

 

 

2) HTML 형태로 넘어오게 되면 그 상태에서 원하는 위치에 원하는 상자 코드를 복사해 넣습니다.

박스형태의 몇가지 코드는 아래 텍스트 파일로 첨부해 놓았으니 다운받아서 원하는 것을 선택해서 하시면됩니다.

글박스를 넣을 위치에 원하는 상자 스타일의 코드를 복사해 넣습니다.

 

 

아래 첨부파일을 받으시면 코드를 이용할 수 있습니다.

글상자 코드 첨부파일.txt
0.01MB

 

 

3) 코드를 복사해 넣었으면 다시 글쓰기 모드를 기본모드로 선택해서 돌아오면 글 박스가 만들어져 있습니다.

글 박스가 아래위로 글 간격 같은게 있어 보이지만 실제로 글을 등록하거나 미리보기로 보시면 제대로 나오는것을 확인하실 수 있습니다.

 

 

 

4) 상자안의 내용을 원하는 문서로 기본모드에서 작성하시면 되고 글자의 색깔이나 폰트크기는 기본모드에서 변경하시면 됩니다.

 

 

 

이 과정을 간단하게 움짤로 보여드리면 아래와 같습니다.

 

 

 

HTML 코드에서 글 상자의 배경색과 테두리의 색깔을 바꾸는 법

상자의 색깔이나 테두리의 색깔 혹은 굵기를 수정하려면 HTML 모드에서 글 박스 코드를 입력후 바로 기본모드로 다시 나오지 말고 이상태에서 원하는 것으로 수정해주시면 됩니다.

 

5-1) 상자 배경색깔을 수정하고 싶으면 위 코드에서 rgb(219, 232, 251) 이부분을 바꾸면 됩니다.

이 부분을 0, 0, 255로 하면 진한 파랑색으로 바뀌며 255, 0, 0 으로 하시면 진한 빨강색이 되며 255, 0, 255를 하시면 보라색이 되는 형태라고 이해하시면 됩니다.

 

쉽게 말해서 빛의 삼원색을 섞어 원하는 색을 만드는 방식입니다. 0, 0, 0면 검은색이고, 255, 255, 255면 흰색이 됩니다. 노랑색을 만들려면 붉은색과 녹색값을 올려주고 파랑색값은 낮추면 되겠죠?

즉 255, 255, 0 이렇게 하면 완전 밝은 노란색이 되며 앞의 두 값을 조금 낮추어서 220, 220, 0을 하면 약간 어두운 노란색이 되는 것입니다.

 

5-2) 위의 설명을 이해했다면 테두리의 색깔을 바꾸는것도 어렵지 않습니다. 위와 마찬가지로 똑같이 rgb(121, 165, 228) 이부분을 수정하시면 변경이 가능합니다.

 

5-3) 테두리의 굵기는 1px이 가장 작은 선이며 2px, 3px, 4px 이런씩으로 바꾸어서 테두리 선의 굵기를 바꿀수 있습니다.

 

 

 

 

아래의 예시된 글 상자는 첨부 파일에 있는 코드를 그대로 넣은것입니다.

첨부 파일을 받아서 원하는 박스를 사용하시면 됩니다.

 

테두리가 없는 박스 글자

 

 

이중 테두리가 있는 박스 글자

 

 

단일 테두리가 있는 박스 글자

 

 

점선 테두리가 있는 박스 글자

 

 

긴 점선 테두리가 있는 박스 글자

 

 

약간 뚜꺼운 단일 테두리가 있는 박스 글자

 

 

좀더 뚜꺼운 단일 테두리가 있는 박스 글자

 

 

테두리가 없는 회색배경 박스 글자

 

 

테두리가 없는 연한녹색 박스 글자

 

 

테두리가 없는 연한빨강 박스 글자

 

 

테두리가 없는 주황 박스 글자

 

 

테두리가 없는 노랑 박스 글자

 

 

아래 첨부파일을 다운 받으시면 코드를 이용할 수 있습니다.

글상자 코드 첨부파일.txt
0.01MB

 

티스토리의 글쓰기가 신 에디터로 바뀌면서 여러가지 불편한 점들이 많습니다.

티스토리에서는 얼른 새로운 에디터로 바꾸거나 불편한 점들을 수정해 주었으면 하지만 아마도 힘들거나

꽤나 오래걸릴것으로 생각됩니다.

 

이렇게 번거롭지만 글 박스를 이용할 수 있기를 바랍니다.

더불어 더 좋은 방법을 알고 계시는 분을 알려주시면 감사하겠습니다.

 

 

 

글이 마음에 드시면 아래 공감버튼 살짝 눌러주세요.

공감과 댓글은 저에게 큰 힘이 됩니다. 

 

 

728x90
반응형
Posted by 전화카드
,