크리스마스 트리장식으로 알아보는 CSS

연말, 크리스마스가 눈앞으로 다가오고 있어 블로그를 크리스마스 분위기로 꾸며볼까?라는 생각을 했는데 때마침 티스토리에서 크리스마스 트리 장식을 만들어 주셔서 제 블로그 상단에 적용을 해봤습니다.

요즘들어 자주 블로그 접속이 느려져서 속이 터지는것 빼고 티스토리의 블로거들을 위한 관심과 정성에 늘 감사할 뿐입니다. 제 마음을 알고 있다는 듯이 이렇게 트리장식까지 만들어주고 말입니다.

크리스마스 카드와 위젯달고, 카드로 마음을 전하세요!

제가 카테고리에 css 카테고리만 만들어 놓고는 글을 계속 못 올리고 있어서 괜히 만들었나 하는 생각이 들정도로 신경쓰이는 카테고리인데.. 크리스마스 트리장식 소스를 무심코 복사해서 skin.html에 삽입하는데, 소스가 css로 만들어져 있더라고요.. ^^

블로그를 시작하면서 부터 내눈에 보이는 모든 것은 포스트소재로 보이다 보니.. 그렇지 않아도 올리지못해서 고민하던 css 파트였는데 거저 줏었구나 하고 바로 작성들어갑니다. ㅋㅋ

크리스마스 트리장식

 

크리스마스 트리 소스

<style type="text/css">
#ChristmasDeco2 {
    background: url(http://cfs.tistory.com/static/sticker/s_18.png) repeat; text-indent: -1000em;
    position: absolute;
    left: 0; top: 0;
    width: 1411px; height: 70px;
}
* html #ChristmasDeco2 {
    background-image:none;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://cfs.tistory.com/static/sticker/s_18.png', sizingMethod='crop');
 }
</style>
<div id="ChristmasDeco2">Merry Christmas!</div>
 

위의 소스를 복사하여 skin.html의 <body> 아랫줄에 삽입하면 블로그 상단에 장식으로 표시가 됩니다.
그러면 어떻게 해서 상단부분에 표시가 되는지 알아보도록 하겠습니다.

위소스는 크게 두개의 부분의 구성이 되어 있습니다.
스타일 선언부인 ( <style)</styls> ) 과  사용부 ( <div></div> ) 인데요!
(스타일에 대해서 모르면 스타일시트(CSS)의 선언방법 1 을 보세요)


스타일 선언부

스타일 부분은 <style type="text/css"> 과 </style> 사이에 있는 내용이며 실제 크리스마스 트리 이미지와 표시될 위치, 방법을 지정하는 부분입니다.

그럼 이제 소스의 스타일 선언부분을 보도록 하겠습니다.


#ChristmasDeco2
{
    background: url(http://cfs.tistory.com/static/sticker/s_18.png) repeat; text-indent: -1000em;
    position: absolute;
    left: 0; top: 0;
    width: 1411px; height: 70px;
}


설명: 화면의 왼쪽상단에서부터 시작하여 넓이 1411픽셀, 높이 70픽셀의 공간에 background:url에서 지정한 이미지를 배경이미지로 표시하되, 사진이 작은 경우 반복해서 표시하라는 스타일을 선택자(selector) ChristmasDeco2에 선언


스타일 소스 세부설명 
#ChristmasDeco2 => 스타일 이름(선택자라고 함)이며 중괄호( {} ) 안의 내용이 스타일입니다. 
                              #ChristmasDeco2에 지정되어 있는 스타일은 <div>에서 사용합니다.

 #ChristmasDeco2에서 지정된 스타일은 background, text-indent, position, left, top, width, height 입니다.

  • background :url(이미지 url) =>  배경이미지를 지정할때 사용하는 속성으로 괄호안에 이미지의 주소(url)을 적어줍니다.
  • repeat  => 배경이미지를 반복해서 보여주라는 의미이며 no-repeat는 반복하지 않습니다.
                   일반적으로 배경이미지는 반복해서 표시합니다.
  • text-indent 는 문단의 첫 부분에 몇칸들여서 쓰는 들여쓰기를 지정하는 속성으로 양수를 적을때 들여쓰기가 되며 위 소스처럼 음수(-1000em)를 적어주면 내어쓰기처럼 표시가 됩니다. 
    그런데 배경그림을 표시하는데 왜 들여쓰기(내어쓰기)가 필요할까요? 그것은 소스마지막의 <div>에 있는 Merry Christmas! 때문입니다. 이 글자가 보이지 않도록 왼쪽화면 밖으로 밀어내기 위해서 사용이 된거죠..
  • position:absolute =>화면에 표시되는 방법을 지정합니다. 방법은 absolute는 절대적위치 지정, relative는 상대적 위치지정입니다. 이 속성은 top, left, bottom, right등의 위치지정 속성과 같이 사용합니다.
  • left: 0 => 화면의 가장 왼쪽 위치, top: 0 => 화면의 가장 위
    이 속성은 배경이미지를 표시할 위치를 지정할때 사용하며 left는 x좌표, top은 Y좌표값을 적어줍니다.
    (해상도가 1280x1024인경우 화면의 왼쪽 상단의 주소는 top:0, left:0으로 표시하고 제일 오른쪽은 left:1280, 제일아래는 top:1024로 표시를 합니다.)
  • width:1411px =>넓이를 지정할때 사용하는 속성
  • height:70px => 높이를 지정할 때 사용하는 속성


* html #ChristmasDeco2 {
    background-image:none;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://cfs.tistory.com/static/sticker/s_18.png', sizingMethod='crop');
 }

설명: 이 스타일은 위에 있는 스타일과 거의 비슷한데요! 이 스타일을 선언하는 이유는 배경이미지를 png로 사용하기 때문입니다. png 파일은 배경을 투명으로 하여 제작을 해도 익스플로러 6.x(IE6.0) 이하에서는 배경이 투명하게 표시되지 않고 회색으로 표시되는 경우가 있습니다. 이때 AlphaImageLoader 필터로 이미지의 배경을 투명하게 표시하기 위하여 선언을 한것입니다. 배경을 투명하기 보일필요가 없다면 생략해도 됩니다.


* (애스터리스크) : 공통선택자로 지정한 속성이 전체 스타일에 영향을 미칩니다. 
* html #ChristmasDeco2 {} : 지정한 스타일을 <html>태그내의 #ChristmasDeco2 에만 적용시키라는 의미입니다.

 

스타일 사용부

선언한 스타일을 사용하는 부분으로 여기서는 아래의 한줄을 사용함으로써 크리스마스 장식이 표시됩니다.

<div id="ChristmasDeco2">Merry Christmas!</div> 

설명. 스타일 선언시 선택자 이름(ChristmasDeco2) 앞에 #을 붙이는 경우에는 ID="선택자", .(마침표)을 사용하는 경우에는 class="선택자"와 같은 방식으로 사용합니다.

간단한줄 알고 시작했더니 별로 간단하지가 않군요. ^^
스타일시트(CSS)가 뭔지 모르는 분들은 스타일시트(CSS) 이해하기 for 티스토리 를 참조하시고요~~
위 소스를 이해하시면 위와 같은 방식으로 다른 이미지나 배경등을 꾸밀 수가 있습니다. 예쁘게 꾸미신분은 트랙백 날려주세요! ^^ 메리크리마쑤요!

댓글을 달아 주세요

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

  1. BlogIcon 행우니 2008.12.21 11:32  댓글주소  수정/삭제  댓글쓰기

    크리스마스 트리장식 적용하셨네요...
    어제 보고선 할까 말까 하다가 안했는데... 분위기 좋네요^^*
    날씨가 괜찮아서 나가고 싶은데 아내가 교육을 받으러가서
    아이들과 방콕하고 있답니다. ㅎㅎㅎ
    행복한 주말 보내세요!!!

    • BlogIcon Kay~ 2008.12.21 11:54 신고  댓글주소  수정/삭제

      행우니님! 방콕하시고 계세요? ㅎㅎ
      날씨는 차갑지만 바람이 불지 않고 해가 떠서..
      정말 겨울나들이 하기에 좋을듯도 하네요..
      저도 늦게까지 자다가 이제야.. 일어났답니다. ㅋㅋ
      즐거운 방콕! ㅎㅎ 되세요!

  2. BlogIcon YoshiToshi 2008.12.21 12:36 신고  댓글주소  수정/삭제  댓글쓰기

    사이트 전체에 크리스마스 내음이 물씬 풍기내요. (>_<;)~~*
    티스토리 어제밤엔 갑자기 멈춰서 전 20일 공지를 22일로 착각한 줄 알았더랍니다. (ㅠㅠ);;
    밖에 비가와서 춥내요~ 따스한 주말 보내세요~~(^^)~*

    • BlogIcon Kay~ 2008.12.21 13:08  댓글주소  수정/삭제

      아하 그런가요? ^^ 감사합니다.
      요즘 티스토리 접속장애가 너무 잦네요! ^^
      근데..어디에 사시는데 비가오나요?
      여기 부천은 날씨가 아주 화창해서 동네공원으로 촬영이나 나갈까 생각하고 있거든요! ^^

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

      아하..울산에 사시는군요. ㅋㅋ
      옙..찍어서 바로 올려야겠습니다. ㅎㅎ
      근데 시앙라이님은 누구죠? ^^

    • BlogIcon YoshiToshi 2008.12.21 14:11 신고  댓글주소  수정/삭제

      남쪽 따라지에 울산입니다. (^^);;
      비는 그친거 같은데 맑은하늘은 그림자도 안 보이내요~
      음음, 제 몫까지 증거인멸(카이)님의 좋은 사진 많이 건지시기를~~~!!

    • BlogIcon YoshiToshi 2008.12.21 14:12 신고  댓글주소  수정/삭제

      죄송합니다...약기운에 정신이 몽롱한가봐요. (ㅠㅠ);;

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

      ㅋㅋ 그러셨군요! ㅎㅎ 어느새 증거인멸까지..
      어디 아프신가봐요! 얼른 쾌차하세요~

  3. BlogIcon DanielKang 2008.12.21 13:20 신고  댓글주소  수정/삭제  댓글쓰기

    저처럼 무식한 사람들은 그냥 복사해서 붙이는게 쵝오인것 같네요 ㅎㅎ

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

      ㅎㅎ 크리스마스 장식 넣으려면 그냥 복사해서 넣으시면 됩니다요. css에 관심있는 분들 보시라고 올린것이니까요. ㅎㅎ

  4. BlogIcon 아이러브앨리스 2008.12.21 20:50 신고  댓글주소  수정/삭제  댓글쓰기

    저두요--;; 당췌 무슨말인지,,, 모르겠어요,,,
    요즘은 자꾸 자꾸 블로그가 어려워져서,,정말 따로 교육을 받던지 해야지,,,ㅎ

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

      음. 이 CSS는 블로그보다는 홈피에서 더욱 많이 사용하는 것이랍니다.
      그러니 아이러브 앨리스님에게도 필요한게 아닐까 생각하는데 이 기회에 한번 배워보세요! ㅋㅋ

  5. BlogIcon 빛이드는창 2008.12.22 08:47  댓글주소  수정/삭제  댓글쓰기

    크리스마스 분위기를 더 즐겨 볼수 있는 기회네요.^^
    좋은 글 감사해욤...

  6. BlogIcon 드자이너김군 2008.12.22 13:06 신고  댓글주소  수정/삭제  댓글쓰기

    크리스마스가 몇일 남지 않았어요~ ㅋ 올해는 착한일 많이 했는데~ 선물 받을수 있으려나요?ㅋㅋ

  7. BlogIcon 시골친척집 2008.12.22 13:55  댓글주소  수정/삭제  댓글쓰기

    저도 따라하려고 무작정 따라하기 했는데~~ㅠㅠ

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

      무작정 따라하기? 음 장식은 티스토리에 가서 따라하셔야 하고요..
      http://notice.tistory.com/1216 <--요기요
      여기서는 css에 대해서 이해만 하시면 될듯 한데요! ^^

  8. BlogIcon kLiR 2008.12.22 16:34 신고  댓글주소  수정/삭제  댓글쓰기

    저어... 태클은 아닌데... 잘못된게 있어서요.

    * html 선택자 {속성}

    이거는 CSS 핵 이라고 부르는 것입니다.
    특정 CSS구문을 브라우저마다 틀리게 인식하는 버그 비슷한 현상을 거꾸로 브라우저 구별을 위해 이용한 방법입니다.
    CSS핵에도 종류가 많은데 저거는 *(star)핵 이라고 부른다고 하네요.
    저 스타핵 같은 경우에는 IE6이하버전에서만 읽어지고 다른 브라우저에서는 무시된다는 점을 이용했습니다.

    CSS핵에 대해서 정리를 잘 해놓은 블로그를 하나 알려드립니다.
    http://blog.naver.com/ssaeju?Redirect=Log&logNo=60050225325
    많은 참고되시길 바랄게요.

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

      앗! 안녕하세요! 필명이 넘 어려워요!...
      관심가져주셔서 감사드립니다.
      저도 배우면서 하는 입장이라 잘을 모른답니다.
      공용선택자(Public Selector)를 css핵이라는 분도 계시고 공용선택자라고 하시는 분도 계시더군요.
      css 와 html, xml, dom, cgi에 대한 웹표준을 개발하고 장려하는 조직이 W3C입니다.
      먼저 웹3 컨소시엄(W3C) 사이트의 selectors 부분을 참조해보시고요 ( http://www.w3.org/TR/CSS2/selector.html )

      http://www.nmindplus.com/2007/01/15/css-selector-1/ 에 css 셀렉터에 대한 설명이 있으니 참조 바랍니다.
      저도 잘 봤습니다. ^^