배경과 테두리, 그림자로 레이어 꾸미기

 

 

지난번 '블로그에 플로팅 배너(플로팅 레이어) 달기'포스트에서 예고드린바, 이번 포스트에서는 레이어를 꾸밀 수 있는 방법에 대해서 설명드리도록 하겠습니다. 레이어는 배경과 테두리, 그림자 등을 넣음으로써 꾸밀 수 있습니다. 이번 포스트에서 소개하는 방법들의 상당수는 CSS3을 이용한 것들로 IE8 이하의 하위 브라우저에서는 원하는 모양대로 출력되지 않을 수 있습니다.

 

이번 포스트는 플로팅 레이어를 꾸밀 수 있는 방법들을 설명하는 포스트입니다. 때문에 해당 속성들의 세부적인 내용이나, 속성의 값이 변함에 따라 어떻게 출력되는지 등의 자세한 내용은 다루지 않았습니다. 보다 자세한 내용은 추후에 다루도록 하겠습니다. 이번 포스트도 지난 포스트와 유사하게 다음의 순서로 구성됩니다.

 

1. 사전 지식

2. 레이어에 배경넣기

3. 레이어에 테두리 넣기

4. 레이어에 그림자 넣기

5. 현 블로그에 사용중인 예 살펴보기

 

배경과 테두리, 그림자로 레이어 꾸미기.txt

 

사전 지식

 

 

본 내용에 들어가기에 앞서 스타일 태그를 어떻게 넣는지를 미리 짚고 가겠습니다. 이는 크게 세가지 방법으로 나눠집니다. div 태그 내에 style을 넣어 사용할 수 있으며, 스타일시트에 넣을수도 있습니다.

 

* 레이어에 직접 입력하는 법

태그 내에 style=""을 넣고, 원하는 속성을 따옴표 내에 삽입합니다. 각각의 속성은 세미콜론(;)을 이용하여 구별하여 여러 속성을 넣을 수 있습니다.

 

* 스타일 시트 파일에 삽입(1)

만들고자 하는 스타일의 이름이 float_layer라고할 때 스타일 시트 내에 #float_layer { }를 만들고 괄호 내에 원하는 속성을 삽입합니다. 각각의 속성은 세미콜론(;)을 이용해 구별됩니다. 원하는대로 스타일시트에 작성한 후, 적용하려는 레이어의 이름은 스타일 이름과 같게 합니다. <div id="스타일 이름">

 

* 스타일 시트 파일에 삽입(2)

만들고자 하는 스타일의 이름이 float_layer라고할 때 스타일 시트 내에 .float_layer { }를 만들고 괄호 내에 원하는 속성을 삽입합니다. 각각의 속성은 세미콜론(;)을 이용해 구별됩니다. 해당 스타일을 적용하고자 하는 레이어의 클래스를 스타일 이름과 같게 합니다. <div class="스타일 이름">

 

레이어에 배경 넣기

 

 

* 배경색 넣기 : <div style="background-color:#ffffff"></div>

* 배경 이미지 넣기 : <div style="background-image: url([IMGURL])"></div>

 

* 배경 이미지 반복

: <div style="background-image: url([IMGURL]); background-repeat:[속성값]"></div>

- repeat : 반복 / repeat-x : 가로 반복 / repeat-y : 세로 반복 / no-repeat : 반복 없음

 

* 배경 이미지 위치 설정

: <div style="background-image: url([IMGURL]); background-position:[속성값]"></div>

- Left / Center / Right. Top / Center / Bottom

- 속성값 입력 예시: background-position: Left Center;(좌측 중앙 이미지 고정)

 

레이어에 테두리 넣기

 

 

* 테두리 넣기 : <div style="border:크기px 실선/점선 #cecece"></div>

 - px : 테두리 두께, 실선 : solid, 점선 : dashed

 

* 원하는 부분에 테두리 넣기 : <div style="border-위치:크기px 실선/점선 #cecece"></div>

 - border-top(상), border-bottom(하), border-left(좌), border-right(우)

 - 속성값 입력 예시 : border-top:1px solid #cecece (상단에만 1px두께의 테두리)

 

* 테두리 둥글게 하기 : 다양한 브라우저에서 활용하기 위해 다음의 사항을 모두 입력해야 함.

    -moz-border-radius-위/아래-좌/우: 둥근 정도px;
    -khtml-border-위/아래-좌/우-radius: 둥근 정도px;
    -webkit-border-위/아래-좌/우-radius: 둥근 정도px;
    border-위/아래-좌/우-radius: 둥근 정도px;

 - 위 : top / 아래 : bottom / 좌 : left / 우 : right

 - 속성값 입력 예시 : border-bottom-left-radius : 10px ;(좌측 하단 10px 모깎기)

 

레이어에 그림자 넣기

 

 

    box-shadow: x_offset y_offset blur #cecece;
    -moz-box-shadow: x_offset y_offset blur #cecece; 
    -webkit-box-shadow: x_offset y_offset blur #cecece; 
    -o-box-shadow: x_offset y_offset blur #cecece; 

 

- x offset : 그림자의 가로 위치(10px이라면 레이어 우측으로 10px만큼 떨어진 곳에 그림자 생김)

- y offset : 그림자의 세로 위치

- blur : 어느정도의 번짐 효과를 줄 것인지

- color : 원하는 그림자의 색상 입력

- 속성값 입력 예시 : box-shadow: 0px 0px 15px #cecece;(레이어 바로 아래에 15px블러 그림자)

 

(예) 흰 배경, 둥근 테두리, 그림자 레이어

 

<div id="float_up"> </div>의 레이어(블로그 상단 참고)가 있다고 할 때 스타일 시트에는

 

#float_up {
    width:980px;
    height:48px;
    margin: 0 auto;
    padding:0; 

 

     <!-- 흰 배경 / 테두리 -->
    background-color:#ffffff;
    border:1px solid #e0e0e0;

 

   <!-- 레이어 그림자 -->
    box-shadow: 0px 0px 15px rgba(0,0,0,.3);
    -moz-box-shadow: 0px 0px 15px rgba(0,0,0,.3); 
    -webkit-box-shadow: 0px 0px 15px rgba(0,0,0,.3); 
    -o-box-shadow: 0px 0px 15px rgba(0,0,0,.3); 

 

    <!-- 좌측 하단을 둥글게 -->
    -moz-border-radius-bottom-left: 10px;
    -khtml-border-bottom-left-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    border-bottom-left-radius: 10px;

 

    <!-- 우측 하단을 둥글게 -->
    -moz-border-radius-bottom-right: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    border-bottom-right-radius: 10px;

}

 

가 삽입되면 지금 블로그의 상단의 레이어와 같은 모양이 만들어집니다.