크리스마스 트리장식으로 알아보는 CSS
요즘들어 자주 블로그 접속이 느려져서 속이 터지는것 빼고 티스토리의 블로거들을 위한 관심과 정성에 늘 감사할 뿐입니다. 제 마음을 알고 있다는 듯이 이렇게 트리장식까지 만들어주고 말입니다.
제가 카테고리에 css 카테고리만 만들어 놓고는 글을 계속 못 올리고 있어서 괜히 만들었나 하는 생각이 들정도로 신경쓰이는 카테고리인데.. 크리스마스 트리장식 소스를 무심코 복사해서 skin.html에 삽입하는데, 소스가 css로 만들어져 있더라고요.. ^^
블로그를 시작하면서 부터 내눈에 보이는 모든 것은 포스트소재로 보이다 보니.. 그렇지 않아도 올리지못해서 고민하던 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 => 높이를 지정할 때 사용하는 속성
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 에만 적용시키라는 의미입니다.
스타일 사용부
선언한 스타일을 사용하는 부분으로 여기서는 아래의 한줄을 사용함으로써 크리스마스 장식이 표시됩니다.
설명. 스타일 선언시 선택자 이름(ChristmasDeco2) 앞에 #을 붙이는 경우에는 ID="선택자", .(마침표)을 사용하는 경우에는 class="선택자"와 같은 방식으로 사용합니다.
간단한줄 알고 시작했더니 별로 간단하지가 않군요. ^^
스타일시트(CSS)가 뭔지 모르는 분들은 스타일시트(CSS) 이해하기 for 티스토리 를 참조하시고요~~
위 소스를 이해하시면 위와 같은 방식으로 다른 이미지나 배경등을 꾸밀 수가 있습니다. 예쁘게 꾸미신분은 트랙백 날려주세요! ^^ 메리크리마쑤요!
'CSS for 티스토리' 카테고리의 다른 글
| [html] table 태그 확실하게 이해하기 (18) | 2009.02.15 |
|---|---|
| 블로거가 꼭 알아야 할 HTML 태그 7가지 (76) | 2009.02.11 |
| 블로그 메뉴 꾸미기(만들기) (70) | 2008.12.09 |
| 스타일시트의 선언방법 및 사용 예제 2 (22) | 2008.10.27 |
| 스타일시트(CSS)의 선언방법 1 (15) | 2008.10.24 |