안녕하세요! 디어입니다.
요즘은 티스토리 블로거들의 글을 보면서, 본문 안의 소제목에 별도의 서식을 넣어주면 가독성이 훨씬 좋다는 것을 느꼈어요!
그래서 디어도 찾아봤습니다.
자주 쓰이는 스타일 2가지의 html 코드, 티스토리 <서식> 활용으로 포스팅 시 간편하게 사용하는 방법을 알아볼게요!
1. A타입, B타입 서로 다른 스타일!
우선 A타입!
티스토리 블로그에서 많이 쓰이는 스타일이죠!
테두리는 SOLID, 테두리 & 글자 색상은 #656665, 배경 색을 #f4ebf5 로 했습니다!
solid
다음으로는 B타입!
-모든 것을 동일하되, 테두리만 바꾼 것인데요!
-코드의 border-style: 뒤에 나오는 것을 선택하셔서 바꾸시면 됩니다.
-타입을 9가지: none | dotted | dashed | solid | double | groove | ridge | inset | outset
어떤 게 제일 마음에 드나요?
코드 정보는 html 이라, 하단에 별도 첨부하도록 하겠습니다!
CTRL + F 찾기를 이용해 테두리 스타일 none | dotted | dashed | solid | double | groove | ridge | inset | outset | 중 마음에 드는 것을 찾은 후,
<div>에서 </div> 까지 복사하셔서 사용하면 돼요 :)
none
dotted
dashed
solid
double
groove
ridge
inset
outset
다운 받으실 분들은 아래 파일을 클릭해주세용!
2. 색상표
디어는 글자 색상은 #656665, 배경 색을 #f4ebf5로 통일했는데요!
이건 여러분의 취향에 맞춰서 바꾸시면 됩니다
딱 색을 집어서 선택할 수 있는 무료 사이트 <HTML COLOR CODES>를 추천해드려요
HTML Color Codes
Easily find HTML color codes for your website using our color picker, color chart and HTML color names with Hex color codes, RGB and HSL values.
htmlcolorcodes.com
위와 같이 내가 원하는 색을 클릭하면 상단 HEX에 HTML 코드가 나옵니다! #부분부터 복사하시면 돼요!
border-color : 테두리 색
background-color: 배경 색, 채우기
font-size: 14pt; color: 여기에 폰트 색을 입력
3. 티스토리 서식 적용하기
마지막으로 등록해둔 서식을 포스팅 시 간편하게 사용하기 위해 <서식> 등록을 해야죠!
블로그 관리 화면에서 콘텐츠-서식 관리로 이동할게요.
우측 상단의 <서식 쓰기>를 클릭, HTML 편집 모드에서 선택하신 코드를 입력합니다.
디어는 A타입 하나, B타입-ridge 이렇게 두개를 저장할 거예요!
각각 작성해주시면 됩니다.
그럼 아래와 같이 서식 목록이 생기겠죠?
이제 포스팅을 해볼까요?
바로 이 글을 쓰면서 캡쳐해봤습니다.
글쓰기- ... 클릭- 서식
(이건 스킨을 뭘 쓰는지에 따라 조금씩 차이를 보일 수 있는데, 글 편집 도구 창에서 <서식>을 찾아주세요!
방금 만들어둔 서식 A타입, B타입을 클릭해보면, 각각 아래와 같이 포스팅 화면에 뜹니다!
A타입
solid
B타입
ridge
끝!
그럼 안에 있는 글 내용만 제목에 맞게 편집하면 됩니다!
어렵지 않죠?
이렇게 마무리 멘트를 넣기에도 딱입니당!
도움이 되는 글이었다면 공감 하트 ♥와 구독하기를 눌러주세요 :)
더 유익한 글로 보답하겠습니다 - from 디어
모두 잘 활용하시길 바라요 :)
'INTERESTS > 알찬 일상' 카테고리의 다른 글
| 토스 해킹, 공식 입장 및 조치, 탈퇴 방법, 개인정보 유출 확인 무료 사이트(정부 운영, 안전!) (8) | 2020.06.09 |
|---|---|
| 미스터트롯 임영웅 아로하(안녕자두야 오리 캐릭터 닮은꼴) (8) | 2020.06.08 |
| 블로그 활성화, 방문자 늘리기 위한 TIP 모음 (27) | 2020.06.03 |
| 버킷리스트 점검(다이어트, 취미발레, 프랑스어, 제태크 등 중간 정리) (0) | 2020.04.17 |
| 클린다음 게시글 관리자 삭제 조치 이의 제기하기 2탄(답변 내용) (6) | 2020.03.02 |
댓글