안녕하세요.

오늘은 티스토리의 머리말 설정에 대해 알아보겠습니다.

확실히 머리말(제목)에 강조 표시를 해두면 눈에 잘 들어올 것입니다.



오늘의 결과물 입니다.

머리말 설정 후 화면 입니다.

이제 어떻게 설정하는지를 알아보겠습니다.



사실 전 잘 쓰진 않지만... 그래도 포스팅을 해보겠습니다.

먼저 사용방법은 티스토리 글쓰기에서 좌측에 보시면

본문, 머리말 을 선택 할 수 가 있습니다.



그렇게 해서 입력한 화면은 다음과 같습니다.

일반 텍스트처럼 보이죠? 맞습니다.

하지만 css라는 소스코드를 변경시키면

포스팅 결과 화면에서는 머리말이 잘 꾸며진것 처럼 나오게 됩니다.


흠...저도 머리말을 한번 써보겠습니다.

머리말 설정 CSS 변경작업(중요)!

css설정을 하기위해서는 

관리자페이지 - HTML/CSS 편집 으로 이동 하시면 됩니다.


이제 css 편집 화면으로 이동합니다.

그리고 실제 포스팅 화면에 출력되는 태그를 찾아야 합니다.

만약에 없다면 본인이 추가 하셔야 합니다.


머리말 태그는 h1, h2, h3, h4를 사용하고 있습니다.

이 사실은 기억하고 계셔야 원리를 알고 소스코드를 변경 할 수 있습니다.



현재 블로그는 .atricle 이라는 태그가 있었지만

h1 등 머리말 설정 css가 없어서 제가 추가 했습니다.



그리고 또하나의 블로그에서는 포스팅 화면에 출력하는 

머리말 태그가 존재 하여 알맹이 코드만 변경하였습니다.


변경 부분 찾기 방법

방법 1 : atricle 을 검색한다.

 - atricle view라던지 article h1 부분이 있으면 그게 머리말일 가능성이 크다.


방법 2 : h1 을 검색한다.

 - 이방법은 다수의 검색 결과가 나올수 있으나... 검색해 하나씩 보여 포스팅 결과 화면임을 캐치해야한다.



변경 소스코드는 다음과 같습니다.

{

border-bottom: 2px solid #0055FF; <---밑줄색

  border-left: 10px solid #0055FF;     <--- 왼쪽 사각형 색

padding: 3px 5px;                      <---여유공간

}


소스코드 적용시킬때는 <--- 로 표시한 설명은 지워주세요.



그리고 색상은 취향따라 변경할 수 있습니다.

0055FF 부분을 변경시켜 주시면 됩니다.

티스토리 글쓰기 화면에서 글자의 색상을 변경할때의 색상을 보시면

해당 색상의 rgb를 확인 할 수 있습니다.


질문이 있다면 댓글로 남겨주세요.

블로그 이미지

Mr.mandu

좋은 정보 공유해요.

,