FastBoot (V1.6.1) 제목태그(h1~h6) 꾸미기

Posted by 가로수 앞마당

2015. 8. 18. 14:30 블로그 맛소

html 태그 중 제목을 나타내는 태그,
h1, h2, h3, h4, h5, h6 이 있습니다.
글을 볼 때 제일 먼저 눈에 뛰는 곳이 제목이죠.

그리고 글 중간 중간에 부제목, 소제목으로 묶어서 따로 혹은 연관된 글을 이어갑니다.

보통 제목을 쓸 때 본문보다 글씨크기를 크게 그리고 진하게 혹은 기울이거나 좀 더 눈에 잘 뛰게 독특한 글씨체로 적습니다.
이렇듯 주제목과 부제목을 적을 때 일일이 수정하는 일을 단 한번에 h1 ~ h6 태그로 깔끔하고 멋있게 나타낼 수 있습니다.

아래는 FastBoot (V1.6.1) 스킨에서 정의된 h1 ~ h6 태그 스타일 입니다.
h1

가나다라 ABCD abcd 1234 !@#$+-*/

다음은 제가 사용하는 h1 ~ h6 태그 스타일 입니다.
h1

가나다라 ABCD abcd 1234 !@#$+-*/

이렇듯 자신만의 h1~h6 태그 스타일을 만들 수가 있습니다.
만드는 방법은 TISTORY 관리 - HTML/CSS 편집 - HTML/CSS - style.css의
.article h1, .article h2 , .article h3, .article h4, .article h5, .article h6 부분에서 자신만의 제목스타일을 만드시면 됩니다.

아래는 제가 사용하는 h1 ~ h6 태그 스타일 소스 입니다.

style.css

.article h1 { 
  font-size: 250%;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  color: #666;
  border-bottom: 2px solid #ccc;
  border-left: 10px solid #55555B;
  text-height:200%;
  padding: 3px 5px;
  margin: 5px 0;
  letter-spacing: 1px;
  word-spacing: 3px;
}
.article h2 {
  font-size: 200%;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  color: #666;
  PADDING-BOTTOM: 10px;
  TEXT-ALIGN: left;
  BORDER-LEFT: #55555B 8px solid;
  padding: 3px 5px;
  margin: 5px 0;
  BACKGROUND-COLOR: #FFF;
  border-bottom: 1px solid #000;
}
.article h3 {
  FONT-SIZE: 22px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  COLOR: #2E86B9;
  PADDING-BOTTOM: 10px;
  TEXT-ALIGN: left;
  BORDER-LEFT: #55555B 8px solid;
  padding: 3px 5px;
  margin: 5px 0;
  BACKGROUND-COLOR: #FFF;
  BORDER-BOTTOM: 1px solid #000;
}
.article h4 {
  FONT-SIZE: 22px;
  COLOR: #eeeeee;
  PADDING-BOTTOM: 10px;
  TEXT-ALIGN: left;
  PADDING-TOP: 10px;
  PADDING-LEFT: 10px;
  BORDER-LEFT: #00b5ff 8px solid;
  PADDING-RIGHT: 10px;
  BACKGROUND-COLOR: #282828;
  border-radius:3px;
}
.article h5 {
  font-size: 22px !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  padding: 3px 5px;
  margin: 5px 0;
  BACKGROUND-COLOR: #FFF;
  BORDER-BOTTOM: 2px solid #ccc;
  BORDER-TOP: 2px solid #ccc;
  BORDER-LEFT: #4D82B8 8px solid;
  BORDER-RIGHT: 2px solid #ccc;
  border-bottom: 2px solid #ccc; 
}
.article h6 {
  font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;
  font-weight: normal !important;
  font-style: normal !important;
  font-size: 1em !important;
  min-height: inherit !important;
  min-height: auto !important;
  PADDING-BOTTOM: 4px;
  PADDING-TOP: 4px;
  PADDING-LEFT: 10px;
  PADDING-RIGHT: 4px;
  BACKGROUND-COLOR: #FFF;
  BORDER-LEFT: #03867B 4px solid;
}

사용방법은 위의 예제처럼 자신만의 제목 스타일을 style.css에 넣고, html 편집 모드에서 아래와 같이 하면 됩니다.

가나다라 ABCD abcd 1234 !@#$+-*/
가나다라 ABCD abcd 1234 !@#$+-*/
가나다라 ABCD abcd 1234 !@#$+-*/
가나다라 ABCD abcd 1234 !@#$+-*/
가나다라 ABCD abcd 1234 !@#$+-*/
가나다라 ABCD abcd 1234 !@#$+-*/

그럼 아래와 같이 결과물이 나옵니다.

가나다라 ABCD abcd 1234 !@#$+-*/

이상 제목태그(h1~h6) 정의로 제목 스타일 꾸미기 였습니다.

<script>
$(function() {
    $("#top_button").on("click", function() {
        $("html, body").animate({scrollTop:0}, '500');
        return false;
    });
});
</script>

$(function() {

$("#top_button").on("click", function() {

$("html, body").animate({scrollTop:0}, '500');

return false;

});

</script>

저작자표시 비영리 변경금지

'블로그 맛소' 카테고리의 다른 글

찢어진 종이 효과로 이미지를 축소 시켜보기 (0)	2015.08.04
티스토리 반응형 스킨 FastBoot (V1.6.1) 설치하기 (0)	2015.07.30

Trackback: Comment:

맛소

맛소

FastBoot (V1.6.1) 제목태그(h1~h6) 꾸미기

가나다라 ABCD abcd 1234 !@#$+-*/