CSS for 티스토리

서식으로 배우는 스타일시트(CSS)

Kay~ 2009. 2. 16. 09:27

서식으로 배우는 스타일시트

스타일시트에 대한 연재를 할 계획인데 아직까지 짬이 많지 않아 이렇게 가뭄에 콩나듯 스타일시트에 대한 포스팅을 하고 있습니다. 원래 이런 내용의 글은 꾸준히 올려야 배우는 분들이 제대로 된 학습효과를 얻을 수가 있는데 그러지 못함을 양해 바라겠습니다.

며칠전에 서식에 대한 글을 올린적이 있는데 제블로그 방문자의 50%는 이미 충분히 활용하시는 분들이고 50%는 알지만 사용을 안 하시거나 태그를 몰라서 사용을 못하시는 분들인것 같습니다.
( 관련글 서식활용으로 포스팅 시간을 줄여보자. )

오늘은 서식에 많이 사용되는 스타일시트에 대해서 써보기로 하겠습니다.
역시나 스타일시트가 무엇인지 모른다면 먼저 스타일시트(CSS) 이해하기 for 티스토리 를 읽어보시기 바랍니다.

과제) 아래의 서식은 제가 이용하는 부제목 서식입니다. 아래와 같은 서식을 만들어보시오.

제목ㅡ  

방법)

위의 서식은 <table>태그를 이용해서 만들며 셀이 2개로 구성되어 있습니다.
또한 앞부분의 셀은 파랑계열의 배경색과 흰색의 제목이며 뒤에 있는 셀은 아무내용은 없으나 아래에 밑줄이 표시되어 있습니다. 이부분에 대해서 스타일시트(style sheet)를 이용해서 구현을 하면 됩니다.

* 소스

<TABLE cellSpacing=1 cellPadding=2 width="99%">
<TR>
<TD style="BORDER-RIGHT: #1e78d2 1px solid; BORDER-TOP: #1e78d2 1px solid; BORDER-LEFT: #1e78d2 1px solid; BORDER-BOTTOM: #1e78d2 1px solid" width=273 bgColor=#1e78d2>
<SPAN style="FONT-SIZE: 10pt; COLOR: #ffffff; FONT-FAMILY: 굴림"><STRONG>제목ㅡ</STRONG></SPAN></TD>
<TD style="BORDER-RIGHT: #ffffff 0px solid; BORDER-TOP: #ffffff 0px solid; BORDER-LEFT: #ffffff 0px solid; BORDER-BOTTOM: #1e78d2 1px solid">&nbsp;</TD>
</TR></TABLE> 

설명.
서식이 2개의 셀로 구성이 되어 있기 때문에 <td> 태그가 2개로 구성이 되었습니다.
여기서 핵심은 <td> 태그에 style=" "이 있는데 이 부분이 바로 스타일시트입니다.
그럼 최대한 쉽게 설명을 해보도록 하겠습니다. 제발 꼭 알아두세요! ㅋ

 

첫번째 <TD> 스타일의 이해

첫번째 <TD>는 서식의 앞부분(파랑색 배경에 제목을 적는곳)에 해당되는 내용입니다.

<TD style="BORDER-RIGHT: #1e78d2 1px solid; BORDER-TOP: #1e78d2 1px solid; BORDER-LEFT: #1e78d2 1px solid; BORDER-BOTTOM: #1e78d2 1px solid" width=273 bgColor=#1e78d2>
<SPAN style="FONT-SIZE: 10pt; COLOR: #ffffff; FONT-FAMILY: 굴림"><STRONG>제목ㅡ</STRONG></SPAN></TD>

복잡한듯 하지만 자세히 보면 아주 간단합니다. 위 소스는 테두리를 그려주는 border 와 width, bgcolor로 구성이 되어 있습니다.

BORDER-RIGHT: 셀의 오른쪽 선에 대한 스타일을 지정하는 옵션입니다. #1e78d2 1px solid 은 1픽셀크기의 파랑색(#1e78d2) 실선(solid)을 표시하라는 의미입니다. border-left, border-top, border-bottom도 모두 똑 같은 옵션으로 이루어져 있습니다.

참고로 위와 같이 상하좌우 모두 같은 종류의 선을 지정할때에는 border: #1e78d2 1px solid 와 같이 초간편하게 지정할 수 있습니다. width는 셀의 넓이이고 , bgcolor=#1e78d2는 셀의 배경색을 지정하는 옵션입니다.

 

두번째 <TD> 스타일의 이해

두번째 <TD>는 서식의 뒷부분 (밑줄만 있는)에 해당하는 내용입니다.

<TD style="BORDER-RIGHT: #ffffff 0px solid; BORDER-TOP: #ffffff 0px solid; BORDER-LEFT: #ffffff 0px solid; BORDER-BOTTOM: #1e78d2 1px solid">&nbsp;</TD> 

두번째 <TD> 스타일은 비교적 간단합니다. 사각형 셀중에서 아래부분만 파랑색 밑줄과 같은 줄이 있으므로 아래부분만 파랑색으로 지정하면 되고 나머지는 포스트 배경색과 같은 색(저의 경우 흰색(#ffffff))으로 지정하면 됩니다.

BORDER-BOTTOM: #1E78D2 1px solid 를 통하여 밑줄 효과를 냈습니다. 0px 은 선이 표시되지 않습니다.

지금까지 몇개의 스타일 옵션에 대해서 설명을 했는데 이렇게 몇개를 알고 나면 다른 옵션들도 쉽게 이해를 할 수가 있을것입니다.

오늘 설명한 내용의 핵심은 선에 대한 옵션을 지정하는 BORDER 입니다. 이 BORDER는 많이 사용하므로 꼭 알아두시기 바랍니다.  이해가 안가는 부분이 있는 경우 댓글 달아주세요!