스타일시트(Cascade Style Sheet)로 배경꾸미기?

배경 만들기

스타일 시트를 이용하여 색상을 지정할때에는 color속성을 이용한다.
color 속성에는 색상이름이나 RGB값을 입력하면 스타일이 적용된 곳 모두 같은 색으로 바뀐다.

<STYLE>
<!-- 
	Selector {color:색상 or RGB값}
-->
</STYLE>

background-color 속성도 color 속성과 같이 색상이름이나 RGB값을 사용해서 지정함

<STYLE>
<!-- 
	Selector {backgrund-color:색상 or RGB값}
-->
</STYLE>

background-image 속성을 사용하면 배경그림을 지정할수 있고 인터넷에 있는 그림을 이용할때는 그림파일대신 URL을 입력해도되요

<STYLE>
<!-- 
	Selector {backgrund-image:그림파일이름 or URL}
-->
</STYLE>

background-repeat속성을 이용하면 배경 그림을 반복할지 설정할수 있어요.
기본값을 repeeat(반복)이고, 옵션별로 나타나는 효과는 다릅니다.

속성옵션

repeat : 배경그림이 가로, 세로 방향으로 계속 반복
no-repeat : 반복없고 한번만 나타남
repeat-x : 가로방향으로 반복
repeat-y : 세로방향으로 반복

웹브라우저의 화면에 꼭 맞춘 배경 그림을 사용한 경우에는 본문이 스크롤 됨에 따라 그림도 할께 스크롤 됩니다.
background-attachment 속성을 기본값은 scroll이고, fixed로 바꾸면 본문 내용을 스크롤 되도 배경그림은 움직이지 않게 설정할수 있어요

속성옵션

scroll : 문서내용이 스크롤되면 배경 그림도 같이 스크롤됨
fixed : 문서내용이 스크롤되도 배경그림 고정됨

배경그림이 한번만 보일게 할경우 background-position이용해서 그림의 가로 세로 의 위치를 지정할수 있어요

속성옵션

가로방향 : left, center, right, %
세로방향 : top, center, bottom, %

참고

배경 그림 속성을 한번에 여러개 지정할때 위와 같이 하나씩 지정해도 되지만 한꺼번에 지정가능해요
고분할때는 스페이스바로 띄어쓰면되요.

<STYLE>
<!-- 
	Selector {backgrund:background-image 속성값; background-repeat 속성값; 
                      background-attachment 속성값; background-position 속성값;}
-->
</STYLE>