티스토리 블로그 사용법 CSS로 서식 지정하기

demun
티스토리/티스토리가이드
2010. 10. 12. 06:00

서식을 만드는법과 서식중에서 다운로드 서식이나 참고링크를 지정하는 서식을 알려드렸습니다. 좀더 깊게 들어가면 더 좋은 것을 만들수 있을겁니다. 그건 사용자의 몫이죠.

본인의 스킨과 잘 어울리는 서식을 사용하면 되겠죠.

이번에는 서식을 사용할때 본인의 스킨과 맞게 또는 어울리게 하는 방법과 css 3에서 사용하는 효과를 알려드리겠습니다. 이것도 깊게 들어가면 머리아프니 제가 사용하는 간단한 예제로 알려드리고 활용은 여러분의 몫입니다.

각 코드에 주석을 달아놨으니 보시고 수정해서 사용해도 됩니다.

서식을 지정하는 방법을 모르시면 이전글을 보시고 여기서는 코드만 알려드립니다. 단순이 서식 제목을 참고링크라고 정하면 되겠네요.

<!-- 서식 -->
<style>
.form1{
border-left:1px solid #c1c1c1; 
border-right:1px solid #c1c1c1; 
border-bottom:1px solid #c1c1c1; 
width:100%;
}
.form1 a{
color:#333; 
text-align:left; 
background:url("http://cfs.tistory.com/custom/blog/5/53533/skin/images/list-right.gif") no-repeat 5px 5px;
padding:0 0 0 17px;
}
.form-p{
text-align:center; 
text-shadow:1px 1px 0 #000;
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=1, Color=#000, Positive=true);
color : #fff;
font-family :NanumGothic,"나눔고딕",Georgia, Verdana;
font-size : 13px;
font-weight : bold;
margin : 0;
padding : 5px;
background-color : #0081a7;
background:#75d2f1 -webkit-gradient(linear, 0% 0%, 0% 100%,from(#75d2f1), to(#0081A7));
background:#75d2f1 -moz-linear-gradient(top, #75d2f1, #0081A7);
filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#75d2f1, endColorStr=#0081A7);
*display:inline-block; zoom:1;
}
</style>

<div class="form1">
<p class="form-p">참고링크</p>
<a href="http://gggggggg" target="_blank" title="[http://gggggggg]로 이동합니다.">ggg</a>
<a href="http://gggggggg" target="_blank" title="[http://gggggggg]로 이동합니다.">ggg</a>
</div>
<!-- 서식 -->

스킨이 변경되면서 코드하이라이트를 사용안하다보니 코드가 이상해서 다시 작성합니다.

참고로 아래 미리보기를 함 보시죠.

참고링크

ggg
ggg

자 해설들어갑니다. 먼저 css 부분.

.form1{ /* div class="form1" 에 대한 스타일입니다. */
border-left:1px solid #c1c1c1;  /* 박스왼쪽선 - 선굵기, 선스타일, 선색깔 */
border-right:1px solid #c1c1c1; 
border-bottom:1px solid #c1c1c1; 
width:100%; /* 박스의 너비 */
}
.form1 a{ /* 박스안에 링크에 대한 설정 */
color:#333;  /* 색깔 */
text-align:left;  /* 글씨는 왼쪽정렬로 */
background:url("http://cfs.tistory.com/custom/blog/5/53533/skin/images/list-right.gif") no-repeat 5px 5px; /* 배경을 블릿으로 함. 이미지주소, 반복하지않음, 왼쪽으로 5px떨어짐, 위에서 5px떨어짐 */
padding:0 0 0 17px; /* 여백설정 - 왼쪽으로 17px 떨어짐 */
}
.form-p{ /* 박스안에 p 클래스에 대한 설정 */
text-align:center;  /* 글씨를 가운데로 정렬 */
text-shadow:1px 1px 0 #000; /* 검은색으로 글자 그림자를 설정 */
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=1, Color=#000, Positive=true); /* 글자 그림자 ie 말듣게하기 */
*display:inline-block; zoom:1;
color : #fff; /* 글자색깔 */
font-family :NanumGothic,"나눔고딕",Georgia, Verdana; /* 글자스타일 */
font-size : 13px; /*글자크기 */
font-weight : bold; /* 글자를 굵게 */
margin : 0; /* 외부여백없이 */
padding : 5px; /* 내부여백 5px */
background-color : #0081a7; /*배경색깔 */
/* 아래는 그라이언트에 대한 설정입니다. 대략 색깔이 75d2f1 시작해서 0081A7로 끝나는 그라이언트입니다. */
background:#75d2f1 -webkit-gradient(linear, 0% 0%, 0% 100%,from(#75d2f1), to(#0081A7));
background:#75d2f1 -moz-linear-gradient(top, #75d2f1, #0081A7);
filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#75d2f1, endColorStr=#0081A7); /* filter로 ie 말듣게하기 */
*display:inline-block; zoom:1; /* ie 에 대한 핵 */
}

html 은 뭐 따로 설명을 안해도 되겠지요. 스킨에 사용되는 클래스명과 겹치는것을 방지하기위해 일부러 form1 이런식으로 숫자를 붙였습니다.

글자를 가운데로 하든, 왼쪽으로 하든 설명이 있으니 편한대로 사용하시면 되겠습니다.

참고로 리스트 배경으로으로 블릿을 표현하였는데요. 현재 이미지주소가 사용이 되니 그냥 사용하셔도 되고 직접 업로드후 그 주소를 사용해도 됩니다.

코드하이라이트 기능이 완전하지 않은 경우를 대비해 소스를 업로드하니 다운로드해서 사용하세요. 윗글은 참고만 하시구요.

참고링크1.txt

개 개

demun(대문블로그)

티스토리 블로그 사용법 CSS로 서식 지정하기

티스토리툴바