스타일시트 - (기본개념 + 박스만들기 + 이미지대치기법)

1. 박스모양의 기본 개념

브라우져는 width값을 계산할때 마진과 본문 (패딩,내용)을 합한 값을 너비로 계산한다.
width 값을 100px로 지정하고 마진이나 패딩값을 주면 내용이 좁아지게 되는 것이다.
하지만 IE5.x 버젼은 패딩값을 내용안에 포함시키기때문에 마진+내용 만을 width로 계산하게 된다.
                         100px
|-------------------------------------|
  10px  (margin)                           10px
|-----|                                     |-----|

여기부터가 본문

            5px(padding)           5px
         |----|                      |----|
                     70px(내용)
                 |--------------|

IE5.x는 패딩값의 좌우 5px씩, 10px이 내용에 포함되므로 90px로 인식하게 되고, 다른 브라우져들은 100px로 width를 계산한다.



2. 마진 겹침현상

마진겹칩현상은 margin-bottom과 margin-top이 있을때, margin이 하나로 합쳐지는 현상을 말한다.

내용
margin-bottom:30px;
margin-top:20px;
내용

두개의 마진이 합쳐져 50px이 아니라 margin-bottom과 margin-top 중 큰 값인 30px로 마진이 합쳐진다.


3. 화면 표시 모델

1) 상대위치
2) 절대위치
3) 플로팅


4.  마운틴 탑: 4모서리가 둥근 박스모양 만들기

<div class="box">
  <div class="box-outer">
    <div class="box-inner">
      <h2>제목</h2>
      <p>본문내용</p>
    </div>
  </div>
</div>
 
.box
{
   width: 20em;
   background: #effce7 url(images/bottom-left.gif) no-repeat left bottom;
}

.box-outer
{
  background: url(images/bottom-right.gif) no-repeat right bottom;
  padding-bottom:5%;
}

.box-inner
{
  background: url(images/top-left.gif) no-repeat left top;
}

.box h2
{
  background: url(images/top-right.gif) no-repeat right top;
  padding-top: 5%;
}

.box h2, .box p
{
  padding-left: 5%;
  padding-right: 5%;
}

5. 그림자 효과

마진값을 이용해서 그림자효과를 낼 수 있다.

1) orchard 그림자효과

<div class="img-wrapper">
  <img src="test.jpg" width="160" height="240">
</div>

.img-wrapper
{
   background:url(images/shadow.gif) no-repeat bottom right;
   clear:right;
   float: left;
   position: relative;
}
.img-wrapper img
{
   background-color: #ffffff;
   border: 1px solid #a9a9a9;
   padding: 4px;
   display: block;
   margin : -5px 5px 1px -5px;
   position: relative;
}

2) Clagnut 스타일 그림자효과

.img-wrapper
{
   background:url(images/shadow.gif) no-repeat bottom right;
   float: left;
   line-height: 0;
}
.img-wrapper img
{
   background-color: #ffffff;
   border: 1px solid #a9a9a9;
   padding: 4px;
   position: relative;
   left: -5px;
   top: -5px;  
}

6. 이미지 대치 기법

1) FIR 방법
이미지로 대치할 텍스트에 span태그를 지정한다.
<h2>
  <span>백구백구~</span>
</h2>

그리고 제목 엘리먼트에 지정한 배경이미지로 대치한다.
h2
{
  background: url(백구_world.gif) no-repeat;
  width: 150px;
  height: 35px;
}

span에 지정한 내용은 display속성에 none이란 값을 지정해서 숨긴다.
span
{
  display: none;
}

2) 파크 방법 (http://phark.net)
<h2>
  백구백구~~
</h2>

h2
{
  text-indent: -5000px;
  background: url(백구_world.gif) no-repeat;
  width: 150px;
  height: 35px;
}

3) 길더/레빈방법
<h2>
  <span></span>백구백구~
</h2>

h2
{
  width: 150px;
  height: 35px;
  position: relative;
}

h2 span
{
  background: url(백구_world.gif) no-repeat;
  position: absolute;
  width:100%;
  height:100%;
}

4) IFR과 sIFR방법
이미지 대치방법은 브라우져에서 다양한 폰트를 지원하지 않기 때문에 텍스트 이미지를 사용하기 때문에 많이 사용된다. 플래시를 사용하면 swf 파일에 폰트를 포함시킬 수 있기에 이것을 이용해서 다양한 폰트체로 보여줄 수 있다.

다음 링크로 들어가면 볼 수 있다.
http://www.shauninman.com/plete/2004/04/ifr-revisited-and-revised


sIFR을 사이트에 적용하려면
http://www.mikeindustries.com/sifr
에서 최신버전을 다운로드한후, sIFR을 적용하면 된다.



## 링크스타일 + 리스트,네비게이션바 + 플리커이미지맵