FastBoot (V1.6.1) 제목태그(h1~h6) 꾸미기
html 태그 중 제목을 나타내는 태그,
h1, h2, h3, h4, h5, h6 이 있습니다.
글을 볼 때 제일 먼저 눈에 뛰는 곳이 제목이죠.
그리고 글 중간 중간에 부제목, 소제목으로 묶어서 따로 혹은 연관된 글을 이어갑니다.
보통 제목을 쓸 때 본문보다 글씨크기를 크게 그리고 진하게 혹은 기울이거나 좀 더 눈에 잘 뛰게 독특한 글씨체로 적습니다.
이렇듯 주제목과 부제목을 적을 때 일일이 수정하는 일을 단 한번에 h1 ~ h6 태그로 깔끔하고 멋있게 나타낼 수 있습니다.
아래는 FastBoot (V1.6.1) 스킨에서 정의된 h1 ~ h6 태그 스타일 입니다.
h1
가나다라 ABCD abcd 1234 !@#$+-*/
h2
가나다라 ABCD abcd 1234 !@#$+-*/
h3
가나다라 ABCD abcd 1234 !@#$+-*/
h4
가나다라 ABCD abcd 1234 !@#$+-*/
h5
가나다라 ABCD abcd 1234 !@#$+-*/
h6
가나다라 ABCD abcd 1234 !@#$+-*/
다음은 제가 사용하는 h1 ~ h6 태그 스타일 입니다.
h1
가나다라 ABCD abcd 1234 !@#$+-*/
h2
가나다라 ABCD abcd 1234 !@#$+-*/
h3
가나다라 ABCD abcd 1234 !@#$+-*/
h4
가나다라 ABCD abcd 1234 !@#$+-*/
h5
가나다라 ABCD abcd 1234 !@#$+-*/
h6
가나다라 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 !@#$+-*/
가나다라 ABCD abcd 1234 !@#$+-*/
가나다라 ABCD abcd 1234 !@#$+-*/
가나다라 ABCD abcd 1234 !@#$+-*/
가나다라 ABCD abcd 1234 !@#$+-*/
가나다라 ABCD abcd 1234 !@#$+-*/
이상 제목태그(h1~h6) 정의로 제목 스타일 꾸미기 였습니다.
|
1 2 3 4 5 6 7 8 |
<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 |
찢어진 종이 효과를 적용 할 이미지
PickPick (픽픽)
Photoshop (포토샵) 이미지 편집 프로그램
Lasso Tool(L)(올가미 툴)을 이용해서 찢어진 효과를 줄 영역을 자유롭게 그려 선택영역을 만듭니다. 
Edit in Quick Mask Mode(Q)(퀵마스크 모드) 버튼을 클릭합니다.
Edit in Standard Mode(Q)(스텐다드 모드) 버튼을 클릭합니다.
