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

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

며칠전에 서식에 대한 글을 올린적이 있는데 제블로그 방문자의 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는 많이 사용하므로 꼭 알아두시기 바랍니다.  이해가 안가는 부분이 있는 경우 댓글 달아주세요!

댓글을 달아 주세요

댓글창에 배경그림 넣는방법

  1. BlogIcon 라이너스™ 2009.02.16 10:49 신고  댓글주소  수정/삭제  댓글쓰기

    좋은 정보입니다^^
    제가 테그니 css니 이런걸 조금은 쓸줄아는데 정식으로 배운적이없어서
    여기서 찔끔저기서 찔끔 배운지식들인데... 이번 기회에 카이님
    글보고 공부나 해야겠어요.ㅎㅎ
    행복한 한주되세요^^

  2. BlogIcon 솔이아빠 2009.02.16 11:00 신고  댓글주소  수정/삭제  댓글쓰기

    멋집니다. 정리하기 빡시실텐데 이렇게 해주니 이웃들은 감사할 따름이지요. 쉬엄 쉬엄 하세요. ^^

  3. BlogIcon DanielKang 2009.02.16 15:06 신고  댓글주소  수정/삭제  댓글쓰기

    아는 것을 글로 옮겨 적는다는게 가장 힘든 일이지요
    저도 요즘 포스팅할것들 생각한것은 있는데 그걸 글로 옮길려니 힘들더라고요

    • BlogIcon Kay~ 2009.02.16 21:27 신고  댓글주소  수정/삭제

      마저요! 아는것을 옮겨 적는다것..
      더군다나.. 어떤 소스가 들어간다면.. 더욱 더 그런것 같아요!
      사실 이런 내용을 원하는 분이 있는지도 잘 모르고 말입니다. ㅋㅋ

  4. BlogIcon 드자이너김군 2009.02.16 15:15 신고  댓글주소  수정/삭제  댓글쓰기

    너무 열심히 정리 하시는거 아니에용?ㅋ
    일일이 색으로 다 구분해 주시고, 잘 정리해 주시니 감사합니다~

  5. BlogIcon 소인배닷컴 2009.02.16 15:16 신고  댓글주소  수정/삭제  댓글쓰기

    에구. . . --; 머리가. . . -_-;;;;;;

  6. BlogIcon sky~ 2009.02.16 17:30 신고  댓글주소  수정/삭제  댓글쓰기

    전 언제봐도 그냥 아무생각이 안듭니다.

  7. BlogIcon 체리베어 2009.02.17 09:42 신고  댓글주소  수정/삭제  댓글쓰기

    ㅋㅋㅋㅋㅋㅋㅋㅋㅋ저도 암생각 안들어여,,
    에혀, 제가 언제 웹디자인을 배웠던가;; 까먹은지 옛날이네여 쩝@<@

  8. BlogIcon 온누리 2009.02.17 10:00 신고  댓글주소  수정/삭제  댓글쓰기

    암튼 골 아파요
    우린 이런거 아무리 설명을 해주셔도
    항개도 알지 못한다는...ㅎ
    역시 사람은 배워야 한다는 말이 맞습니다 그려
    날이 찹니다. 건강하시구요

    • BlogIcon Kay~ 2009.02.17 17:40 신고  댓글주소  수정/삭제

      하하.. 온누리님은 산에 다니면서 한개씩 외워도 벌써 다 외우셨겠어요! ㅎㅎ
      온누리님도 감기조심하세요!

  9. BlogIcon PLUSTWO 2009.02.17 17:02 신고  댓글주소  수정/삭제  댓글쓰기

    너무 파고들면 골치 아파오는게 태그죠..ㅎㅎ
    티스토리를 한다면 그래도 기본은 꼭 알아야 할 태그명령어를 잘 정리해주셨네요..

  10. BlogIcon 레이먼 2009.02.17 19:46 신고  댓글주소  수정/삭제  댓글쓰기

    잘 보고 잘 배워 갑니다. 유용하게 사용할 계획입니다.
    앞으로도 기대합니다.꾸~벅

  11. BlogIcon 해피아름드리 2009.02.17 21:44 신고  댓글주소  수정/삭제  댓글쓰기

    와우~~이거 배워야 하나요?
    안 배워도 되죠? ㅋㅋㅋ...
    필요하면 배우러 올께요^^
    평안한 밤 되세요~~

  12. BlogIcon 이름이동기 2009.02.18 09:39 신고  댓글주소  수정/삭제  댓글쓰기

    아 ... 이렇게 되는것이군요 !!!
    부제목 서식을 받아서만 사용해보았지 수정하는건 색깔밖에 수정을 못했는데
    감사합니다 ~ 0~ 오늘도 하나배워가네요 ㅎㅎㅎ

  13. BlogIcon 피똥 2009.03.22 18:08 신고  댓글주소  수정/삭제  댓글쓰기

    예전부터 이런거 어떻게만드나 궁금했는데, 이제 어떻게 만드는지 알게되었네요..
    감사합니다.. 케이님블로그에는 유익한 정보가 정말 많은듯..^^

  14. BlogIcon 웅이아뿌 2010.05.14 10:49 신고  댓글주소  수정/삭제  댓글쓰기

    아 감사합니다.
    저도 서식을 사용하려고 적용해 보았는데
    이상하게 제 블로그에서는 위의
    색깔이 들어가 있는 부분이 서식으로
    볼때는 잘 보이는데 작성을 완료하고
    보면 색이 없이 흰색으로 나옵니다.

    어딘가에서 잘못된것 같은데
    혹시 어디에서 그런것일까요 ?

  15. BlogIcon Nams858 2011.03.03 11:30 신고  댓글주소  수정/삭제  댓글쓰기

    잘배우고 갑니다.
    쌩초짜인데... 습득 많이해야겠어요^^ㅎ