스타일시트(CSS) 이해하기 for 티스토리

티스토리의 skin.html과 style.css에 대하여 포스팅을 하다 보니 먼저 스타일시트(style sheet)에 대한 기본설명을 우선시 할 필요성이 있더군요. 또한 티스토리를 사용하는 블로거라면 당연히 알아야 할 부분이 이 CSS 부분이기도 합니다. 그래서 스타일시트에 대해서 간략하게 정리를 해봅니다. 한가지 더 덧붙이자면 제목은 티스토리를 위한 스타일시트라고 했지만 html을 사용하는 곳이라면 어디에서든지 스타일시트를 사용할 수가 있습니다.

CSS란 무엇인가

CSS는 Cascading Style Sheet의 약자로 스타일시트라고도 합니다. 스타일시트는 워드프로세서의 스타일과 마찬가지로 웹문서(html) 작성시 반복적으로 사용되는 서식(글꼴,글자크기,글자색,줄간격이나 여백등)을 미리 지정하는데 사용하는 언어(?)입니다. 스타일시트는 불편한 html을 보완하기 위하여 만들어진 것인만큼 html 소스편집창에서 작성할 수 있으며 html웹에디터 화면에서는 작성을 할 수 없습니다. 


html로만 작성된 웹페이지

예컨대 블로그에 포스팅할 때 기본글자색은 녹색으로 하고 글자크기는 10pt로 포스팅을 한다고 할 때 매번 포스팅할 때마다 <font> 태그를 사용하여 아래와 같이 일일이 지정을 해줘야 합니다. 요즘은 이런 소스를 직접입력하지 않고 글자색이나 크기를 쉽게 바꿀 수 있는 html 웹에디터를 지원하기 때문에 일일이 html 태그를 입력하여 웹페이지[각주:1]를 꾸미진 않습니다. 하지만 css를 알기 위해서는 이 html 태그도 어느정도는 알아둬야 합니다.

소스

<body bgcolor="white" text="black">
<P><font color="green" size="2">CSS란 무엇인가</font></p>
<p><font color="green" size="2">CSS를 스타일시트라고 한다.</font></p>
<p><font color="green" size="2">스타일시트를 이용하면 문서전체의 줄간격이나
<br>모든 포스트의 제목이나 본문 글자를 한번에 바꿀 수 있다.</font></p>
<p><font color="green" size="2">스타일시트를 정의하는 방법은 3가지가 있다.</font></p>
</body>

위 소스의 실행결과

CSS란 무엇인가

CSS를 스타일시트라고 한다.

스타일시트를 이용하면 문서전체의 줄간격이나
모든 포스트의 제목이나 본문 글자를 한번에 바꿀 수 있다.

스타일시트를 정의하는 방법은 3가지가 있다.

위 소스중 녹색부분의 <font color="green" size="2">와 </font>태그는 웹소스를 복잡하게 하고 작업시간도 더 걸리게 되며 수정을 해야 하는 경우 훨씬 더 많은 시간이 소요가 됩니다.

스타일시트(CSS)를 이용한 웹페이지

 그럼 위의 결과와 똑 같은 결과가 나올수 있도록 스타일시트를 이용해서 구현을 해보도록 하겠습니다. 먼저 스타일을 지정합니다.

본문 스타일 지정 예

      body {
                 font:   10pt;
                 color: #008000;
     }

 위와 같이 몇줄의 스타일을 지정해놓게 되면 아래와 같이 간단하지만 같은 효과를 낼 수가 있습니다.

스타일 지정후 소스

<body bgcolor="white">
<P>CSS란 무엇인가</p>
<p>CSS를 스타일시트라고 한다.</p>
<p>스타일시트를 이용하면 문서전체의 줄간격이나
<br>모든 포스트의 제목이나 본문 글자를 한번에 바꿀 수 있다.</p>
<p>스타일시트를 정의하는 방법은 3가지가 있다.</p>
</body>

어때요? 소스가 아주 깔끔하죠? 하지만 결과는 똑 같이 10포인트 크기의 녹색글자로 표시가 된답니다.

이렇게 스타일시트를 이용하면 반복적으로 사용되는 태그들을 더 이상 적지 않아도 되며 글자색을 수정해야 하는경우 스타일지정부분에서 color값을 바꿔주기만 하면 전체에 다 적용이 되므로 수정작업시 더욱 편리하답니다.

티스토리나 대부분의 홈페이지는 웹페이지에 대한 제목 및 본문, 링크, 이미지등에 대한 폰트,글자크기 및 글자색줄간격등의 서식을 미리 정해놓고 웹페이지를 제작합니다. 티스토리의 경우는 사용자의 취향에 맞게 블로그 스킨을 변경할 수 있도록 지정한 서식을 style.css에 저장해놓고 이용자가 직접 수정할 수 있도록 구성되어 있습니다. 그래서 style.css를 수정하게 되면 관련 내용이 블로그 전체에 적용이 됩니다. 

어떤가요? 스타일시트(CSS)가 어떤것인지 왜 이용하는지 이해가 가시나요?
다음에는 스타일 지정방법에 대해서 포스팅하도록 하겠습니다.

2008/04/09 - [블로그팁] - CSS Naked Day! 블로그 옷 다 벗겨버렸어요
2008/10/24 - [CSS for 티스토리] - 스타일시트(CSS)의 선언 및 사용법


  1. 웹페이지란 흔히 말하는 인터넷에 표시되는 내용을 말합니다. 블로그나 홈페이지나 검색포탈이나 어떤 내용이든 인터넷 창에 표시되기 때문에 모두 웹페이지라 말할 수 있습니다. [본문으로]

댓글을 달아 주세요

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

  1. BlogIcon 시골친척집 2008.10.22 11:45 신고  댓글주소  수정/삭제  댓글쓰기

    기본적으로 웹상에서 사용되어지는 용어를 알고
    이것을 읽으면 알듯할거 같은데..

    저도 남들처럼 멋지게 꾸미고 싶은데..^^;;

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

      ^^ 웹용어는 하나 하나 검색하면서 아셔야 할것 같아요. ㅋㅋ
      아니면 어떤 용어들을 모르시는지 알려주시면 아는범위내에서 설명을 드릴께요!

  2. BlogIcon 빨간여우 2008.10.22 12:18 신고  댓글주소  수정/삭제  댓글쓰기

    저도 스킨을 손 보고 싶지만 넘 어려워서 포기했습니다.
    이젠 여기에서 좀 공부해서 바꿔 봐야 하겠네요..
    앞으로도 부탁드립니다...^^

    • BlogIcon Kay~ 2008.10.22 13:20 신고  댓글주소  수정/삭제

      아무래도 웹개발쪽 일을 하지 않는다면 어려움이 있어요.
      css에 대하여 완전한 이해를 위해서는 html을 알아야 해요.
      css 가 html의 불편을 보완하기 위해 만들어졌으니까요! ^^
      그런데 빨간여우님땜에 이 부분 끝까지 가야 할것 같네요. ^*^

  3. BlogIcon 오백이 2008.10.22 13:05  댓글주소  수정/삭제  댓글쓰기

    이렇게하니까 아직 언어는 잘 몰라도
    뭘하는지 어떻게 쓰이는지는 이해가 잘 되네요^^

  4. BlogIcon 레이지폭스 2008.10.22 13:23 신고  댓글주소  수정/삭제  댓글쓰기

    쉽고 간단한 설명 좋네요. 감사합니다. :)

  5. BlogIcon 돌이아빠 2008.10.22 17:13 신고  댓글주소  수정/삭제  댓글쓰기

    CSS를 이해하고 적용해 보고 싶은 1人이나 ㅡ.ㅡ;;
    현실이 바쳐주질 않는다는 흐...Kay님 글 잘 보고 갑니다.~~~

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

      돌이아빠님은 다 아실텐데..
      어떤 현실이 문제가 되나요? ^^
      시간이라는 현실이요? ㅋㅋ 찾아주셔서 감사합니다.

    • BlogIcon 돌이아빠 2008.10.22 21:31 신고  댓글주소  수정/삭제

      아녀용 시간 문제가 아니공 ㅡ.ㅡ;;;
      CSS를 공부해 본적이 없다는 사실이 문제이지용. 흐흐흐흐
      순수 HTML만 이용해서(쪼끔의 javascript 포함) 홈페이지를 직접 만들어서 운영하던 바로 그 시절! 90년대 후반! 그때 그냥 HTML만 쪼매 보다가 웹 쪽은 빠이 빠이 해버렸다는 ㅡ.ㅡ

  6. BlogIcon 도피처 2008.10.24 11:46 신고  댓글주소  수정/삭제  댓글쓰기

    html, asp, php보다 css가 더 어렵게 느껴져요 ;;
    덕분에 새로 한번 공부 해봐야겠어요~!!^^

  7. BlogIcon 煙雨 2008.10.25 01:23 신고  댓글주소  수정/삭제  댓글쓰기

    찬찬히 보면서 공부해야겠네요..^^좋은팁얻어갑니다.

    • BlogIcon Kay~ 2008.10.25 23:06 신고  댓글주소  수정/삭제

      예. 연우님. 티스토리를 이용하는 블로거분들 중 css를 모르시는 분들을 위해서
      포스팅을 시작했는데 어렵지 않았으면 좋겠습니다.

  8. BlogIcon 이보전진 2008.11.14 12:30  댓글주소  수정/삭제  댓글쓰기

    안녕하세요^^ 처음 뵙네요 어쩌다 보니 이곳을 알게되서 티스토리 변경위해 이것저것 해보고 있네요
    많은 궁금한게 있는데 먼저 하나 물어볼게요 지금 이댓글 밑에 보면 전체포스트보기 리스트 목록이
    하단에 위치하고 있는데 어떻게 설정을 해야
    아래처럼 글내용 밑에 전체 포스트 보기 리스트 목록이 나오게 되는지요?
    아~~그리고 티 초보가 궁금한게 많은데 많은 도움 부탁 드려도 될지요? ^^

    • BlogIcon Kay~ 2008.11.15 15:24 신고  댓글주소  수정/삭제

      요즘 바쁘다 보니 못보고 넘어간 댓글이 있었던것 같습니다. ^^ 이제야 보다니..
      위에서 댓글로 남겼다 시피 관리페이지의 플러그인에서 태터데스크 설정해주시고 웹에서 선택을 해주시면 됩니다.

  9. BlogIcon 미국얄개 2008.12.13 06:16  댓글주소  수정/삭제  댓글쓰기

    글 감사합니다.
    자주 들러서 공부 좀 해야 겠네요.
    즐거운 하루 되시길...

    • BlogIcon Kay~ 2008.12.13 09:18 신고  댓글주소  수정/삭제

      아 그러시군요. 아직 시리즈로 올려야 할게 많은데..
      작업이 참 어렵네요. ^^
      미국얄개님때문이라도 추가적인 내용을 올려야 겠네요. ^^

  10. BlogIcon 샤자한 2009.03.06 09:48  댓글주소  수정/삭제  댓글쓰기

    휴.. 초대해주셔서 블로그를 만들긴 했는데
    정말 어렵군요..
    열공해서 꼭 저도 멋진 블로그 만들꼐요 ㅋㅋ
    초대해주셔서 감사해요~~

  11. BlogIcon 햇빛샤워 2009.06.25 10:39 신고  댓글주소  수정/삭제  댓글쓰기

    오~~~ 감사합니다,,
    이제 막 홈피 개설해 놓고 생소한게 너무 많아서,, 티스토리 공부를 좀 해야 하겠어요~,
    님 글이 많은 도움이 됩니다,,^^*

  12. BlogIcon 키르케 2009.09.08 12:02  댓글주소  수정/삭제  댓글쓰기

    네~
    이해됐어요!
    신나고~ 다음 포스트로 고고씽♪

  13. BlogIcon 금메달.아빠 2010.07.28 00:11 신고  댓글주소  수정/삭제  댓글쓰기

    좋은 정보 감사합니다. 재미있게 보고 엮인글(트랙백)을 추가하였습니다.(맞트랙백도 환영합니다.)
    수고많으셨습니다. 행복한 하루 되세요.