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

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

오늘은 CSS3의 열일곱번째 내용으로 어제 포스팅에 이어 나머지 배경

(background)

 

설정하는 방법에

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

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

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

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

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

css 스타일 - 배경 이미지 부착 방법

먼저 배경 이미지 부착 방법에 관련된 내용으로 이전 포스팅에 배경 관련 속성의 표를 보면

background-attachment라는 속성이 있을 겁니다.

이 속성은 말 그대로 배경 이미지를 부착 시키는 속성인데 속성을 적고 해당하는 속성 값인 scroll, fixed, local이라는 속성을 써서 지정을 합니다.

1. scroll : 배경이 태그와 같이 스크롤이 됩니다.

2. fixed : 배경이 뷰포트에 대하여 고정이 됩니다.

3. local : 태그의 콘텐츠와 같이 스크롤이 됩니다.

<위 background-attachment 속성에 사용 되는 값>

여기까지 background-attachment 속성과 속성 값에 대해서 알아 보았는데 위 내용은 

이 전 포스팅에서 보았던 것과 같이 background-image 속성과 같이 사용이 되기 때문에 별도의

화면은 보이지 않겠습니다. 

(이해 안되면 한번써서 보는게 빠를 겁니다. ^^)

css 스타일 - 배경 이미지 위치 지정

이번엔 배경 이미지 위치 지정에 관련된 내용 입니다.

배경 이미지 위치 지정은 background-position 이라는 속성을 이용하는데 사용법은 간단 합니다.

<background-position 속성 사용법>

위 속성은 본래 background-image와 같이 사용 하지만 속성 하나만 속성 하나만 적어 설명하도록 하겠습니다. 

backgroun-position속성은 기본 px또는 %단위로 배경 이미지의 위치를 잡으며 앞에 값 200px은 (왼쩍에서부터 오른쪽까지 몇 px) 뒤에 값 300px은 (위에서 아래로 몇 px)로 지정이 되며 이러한 방법은 %단위를 써도 똑같이 적용 됩니다.

추가로 위와 같은 px이나 %말고 키워드로도 위치를 잡을 수 있는데 이는 아래와 같습니다.

1. left top, left center, left bottom

2. right top, right center, right bottom

3. center top, center center, center bottom

<background-position 방향 키워드 단위 값>

위 와 같은 키워드 단위의 값은 실제 배경 이미지를 적용 후 background-position속성에 px 이나 %단위의 값을 쓰지 않고 위에 단위 값에 콤마( , )로 구분지어 놓은 두단어씩 적용해 본다면 어떻게 적용 되는지 눈으로 보실 수 있으니 따로 화면은 보이지 않겠습니다. 

css 스타일 - 지금까지 배운 배경에 대한 속성을 한줄로 정의!

지금까지 배경에 관련된 속성을 알아 보았는데 이렇게 많은 배경에 관련된 속성을 일일이 

쓰기란 번거롭고 귀찮기도 합니다.

이럴때 쓰는 속성은 이전 포스팅 표에 제일 상단에 위치한 "background"라는 속성을 쓰는데요 이 속성은 표에 나와 있듯이 배경에 관련된 속성을 한줄로 정의 하는 속성이며 이 속성은 아래와 같이 사용 합니다.

<background 속성 사용 방법>

1. #000000 : 16진수 코드로 배경색을 검정으로 지정 합니다. (rgb코드, 키워드(색상이름) 가능)

2. url(yg.jpg) : 배경에 이미지를 삽입 배경이미지 지정시 같이 사용 

3. no-repeat :  배경 이미지 반복하지 않음 (이전 포스팅 자세하게 설명 되어 있음)

4. center top : 바로위 키워드 단위로 배경 이미지 위치 가운데 상단으로 지정 (px, % 단위로도 가능)

위 처럼 background 속성은 이때까지 배운 속성을 줄줄이 나열하여 사용합니다.

css 스타일 - 배경 이미지 사이즈 조정

깜빡하고 설명을 하지 않은 부분 입니다.

위 배경 이미지를 넣었는데 배경 이미지가 생각보다 작을경우 아니면 클 경우 사이즈를 조정 해야되는데 이러한 경우 앞서 배운 background-size (가로, 폭)과 (세로, 길이)속성을 이용해 아래와 같이 사용 합니다.

<background-size 속성 사용법>

위 는 바로 전에 보았던 코드에 background-size 속성을 추가하여 이미지 사이즈를 키운 모습입니다.

사용법은 px, %단위 둘다 가능하며 앞에서부터 (가로, 폭), (세로, 길이)를 지정 합니다.

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