블로그를 보다보면 보기 좋게 제목을 달고 잘 정리된 글을 볼 수 있습니다. 스킨이나 기본 에디터에서는 지원하지 않는 기능으로 보이는데 어떻게 작성했는지 궁금할 때가 많습니다. html 테그나 style 만 조금 할 줄 알면 어렵지 않습니다. 오늘은 티스토리 블로그에 자주 보이는 제목에 밑줄 긋기를 알려드립니다.
제목 3가지 형태와 응용한 1가지 형태를 알려드리겠습니다.
그대로 사용하셔도 되고, 색상만 바꿔서 이용하셔도 됩니다. 조금만 찾아보시면 더 다양한 형태로 응용할 수 있습니다.
주의하실 점은 스킨을 중간에 바꾸면 미리 작업하신 내용이 바뀔 수 있으니 백업은 잘 받아 두세요.
그라디에이션 제목 (제목1)
첫번째로 위와 같이 제목을 박스에 넣고 그라디에이션으로 색상을 지정하는 형태입니다.
제목을 블럭으로 지정하여 [제목1 ~ 제목3] 중에 선택을 합니다.
오른쪽 기본모드에서 HTML를 선택하시면 다음과 같이 지정된 것을 확인할 수 있습니다.
- 제목1 > h2
- 제목2 > h3
- 제목3 > h4
이렇게 지정하고 저장을 합니다.
다음은 꾸미기 > 스킨편집을 진행합니다.
스킨편집에서 오른쪽의 [Html 편집 >> CSS]를 선택하셔서 style을 다음과 같이 수정하시면 됩니다.
다음에 볼 제목2(h3), 제목3(h4)에 해당하는 css도 미리 작성했습니다.
저는 파일 제일 하단에 추가 했습니다.
작성이 끝났다면 [적용] 버튼을 클릭합니다.
밑줄만 있는 제목 (제목2)
왼쪽에 [글]을 선택하셔서 변경된 내용을 확인할 수 있습니다.
왼쪽에 줄(바)이 있는 제목 (제목3)
이렇게 하시면서 스타일을 다양한 형태로 변경하시면서 확인해 보세요.
한번 지정해 두시면 다음부터는 그냥 글만 작성하시면 바로 적용 됩니다.
다시 한번 말씀드리지만 블로그 스킨을 변경하시면 이렇게 저장한 css를 다시 지정하셔야할 수 있습니다.
꼭 백업받아 두시기 바랍니다.
응용: 왼쪽 바 + 밑줄 (제목2 + class)
마지막으로 응용을 해 보겠습니다.
이번에는 class 이름을 지정한 형태입니다.
제목을 지정하시고 [기본모드 >> HTML]에서 다음과 같이 클래스를 지정하셔야 합니다.
그리고 스킨 편집에서 클래스에 해당하는 CSS를 지정합니다.
이렇게 하시고 적용하시면 위와 같은 제목을 확인할 수 있습니다.