CSS3 - CSS 스타일 - 배경(background) 설정하기 1 (16)

CSS3 - CSS 스타일 - 배경(background) 설정하기 (16)

오늘은 CSS3의 열여섯번째 내용으로 배경

(background)

 

설정하는 방법에

 대해서 알아보도록 하겠습니다.

CSS도 HTML처럼 기초부터 알아보기 전에  

압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.

(백번 보는 것 보다 한번 살 타이핑 해보면 이해 되니! 꼭!)

굳이 압타나 아니더라도 이클립스등 자신에게 맞는 툴이 있으시다면 사용하시기 바랍니다.

css 스타일 - 배경(background) 설정하기

먼저 css의 배경 설정이란 background 라는 배경색을 입히는 속성으로 html태그(요소) 부분에 앞서 배웠던 16진코드, rgb코드, 키워드(영문색상이름) 등을 사용해 배경색을 입히는 속성입니다.

또 배경(background)속성은 관련된 속성아 여러가지가 있는데 이러한 속성은 아래와 같습니다.

속성	설명
background	한줄에서 모든 배경 속성 (아래 속성)을 정의 합니다.
background-attachment	베경 이미지가 고정되어 있는지 스크롤이 되는지 지정 합니다.
background-color	배경색을 지정 합니다.
background-image	배경 이미지를 지정 합니다.
background-position	배경 이미지의 시작 위취를 지정 합니다.
background-repeat	배경 이미지의 반복 여부를 지정 합니다.

<배경(background) 관련 속성>

배경에 관련된 속성은 위와 같이 있으며 아래부터는 

위 내용에 대해서 중요한 부분을 하나씩 살펴 보도록 하겠습니다.

css 스타일 - 배경색 설정하기

먼저 배경 설정 방법 입니다. 

배경 설정은 background라는 속성을 바로 써서 사용 해도 되지만 기본적으로 background-color 라는 속성을 사용하여 태그의 배경색을 아래와 같이 정의 합니다. 

위에서도 이야기 했지만 다시한번 설명 하겠습니다.

위 는 기본 body태그에 backgrond-color속성을 이용해 16진수, rgb 값, 색상이름을 사용하여

배경색을 검정으로 지정 하였는데 사용방법은 위와 동일하게 배경색을 입히고 싶은 태그(요소)를 

선택 후 위 16진수, rgb값, 색상이름중 한가지를 선택하여 색상을 입히면 됩니다.

css 스타일 - 배경 이미지 설정

이번엔 배경 이미지 설정 방법 입니다.

배경 이미지 설정방법은 위 표에 나와있는 background-image 라는 속성을 이용해 배경 이미지로 사용하고 싶은 이미지를 상대경로, 절대경로 중 가져오는 방법 이며 사용방법은 아래와 같습니다.

위와 같이 배경 이미지를 지정 할 때는 속상 값인 url ( ) 를 사용해 이미지가 있는 상대경로나 절대경로 및 이미지 이름을 넣어 주면 됩니다. 

(위 해당 이미지는 긴냥의 공간 아이콘을 넣었습니다.)

위와 같이 배경이미지를 넣었을 경우 웹브라우저 사이즈가 이미지 보다 크기 때문에 해당 이미지가 웹브라우저 보다 작을경우 위와 같이 빈 공간(여백)을 똑같은 이미지가 수평이나 수직 방향으로 반복되면서 칠해 지게 되는데 이럴때 위 표에 나와 있는 background-repeat 속성을 사용하여 반복되는 이미지를 수직이나 수평 한 방향으로 반복되게 할 수 있는 방법이 있습니다.

<위 repeat-x 속성 값을 이용한 x방향으로 배경 이미지 반복>

-----------------------------------------------------------------------------------------------

<위 repeat-y 속성 값을 이용한 y방향으로 배경 이미지 반복>

위와 같이 background-repeat 라는 속성은 background-image 라는 속성을 먼저 사용해 이미지를

지정 하였을때 같이 사용하는 속성 이며 background-repeat 속성의 값인 repeat-x와 repeat-y 의 값에 따라 x, y방향으로 이미지를 반복 시킬 수 있습니다.

그리고 위와 같이 배경 이미지가 반복되지 않고 하나의 이미지만 배경에 표시 하고 싶을때는 

no-repeat라는 속성 값을 입력해 주면 아래와 같이 반복되지 않은 이미지만 나오게 됩니다. 

<위 no-repeat 속성 값을 이용한 배경 이미지가 반복되지 않은 모습>

여기까지 배경 설정하기에 대한 내용에 대해서 간략 하게 알아 보았고 

나머지 배경 관련 속성에 대해서는 내일 마무리 짓도록 하겠습니다.

이상 CSS3 - CSS 스타일 - 배경(background) 설정하기 1 (16)에 관련된 포스팅을 마치도록 하겠습니다.