http://cafe.naver.com/q69/63090

▣ 배경 처리 ? background 속성과 color속성


 


color 속성과 background 속성의 종류

























속성

형식


color

글꼴의 색 설정


background-color

문서의 배경색 설정


background-image

문서의 배경 이미지 설정


background-repeat

배경 이미지 반복 설정


background-attachment

배경 이미지 고정 여부 설정


background-position

배경 이미지 위치 지정


 


1) 색상을 설정하는 color  속성


color 속성은 문자의 색을 설정한다. 웹 페이지에서 제작할 때 가장 많이 사용하는 기능 중에 하나이다.


 


 


2) 배경에 다양한 스타일을 주는 background 속성


 






















속성

형식


{ background-color:색상명 | 색코드 }

배경 색상을 설정


{ background-image:url(이미지파일경로명) }

배경이미지 위치를 지정


{ background-repeat: repeat | repeat-x | repeat-y | no-repeat }

배경이미지의 반복 설정


{ background-attachment:scroll | fixed }

배경이미지 고정 여부


{ background-position:%값 | 절대크기 }

배경이미지의 배치


 


 


① background-color


웹 페이지의 배경색을 설정할 때는 background-color속성을 이용한다. 이 속성은 <BODY>태그 뿐만 아니라 <TABLE>, <DIV>,<P> 등의 태그에서도 배경색을 지정할 수 있다.


 


 


② background-image


 


배경 이미지를 삽입하려면 background-image속성을 이용한다.


 


 


③ background-repeat


배경이미지를 어떤 방식으로 반복할지는 background-repeat속성으로 설정한다.



















속성

형식


repeat

전체적으로 배경이미지 반복(바둑판)


repeat-x

수평(x축) 방향으로만 배경 이미지 반복


repeat-y

수직(y축) 방향으로만 배경 이미지 반복


no-repeat

이미지를 반복하지 않는다.


 


④ background-attachment


background-attachment는 배경 이미지를 고정 시킬 때 이용한다. 이미지를 고정시킨다는 것은 스크롤을 해도 이미지는 고정되어 그대로 있다는 것이다.













속성

형식


scroll

배경이미지를 고정시키지 않는다.


fixed

배경이미지를 고정시킨다.


 


 


⑤ background-position


배경이미지의 위치를 지정하려면 background-position 속성을 이용한다.


 













속성

형식


%(퍼센트)

초기값은 0%, 0%인데 이것은 좌측상단을 의미한다. 반대로 100%, 100%는 우측하단을 의미한다. 설정은 가로값이 먼저, 세로값이 나중에 나온다. 스크롤 기능으로 이동해도 배경이미지는 고정된 상태로 나타낸다.


절대크기, 상대크기

스크롤이 이동하면 배경 이미지도 따라서 이동한다.


이 게시물을...