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)에 관련된 포스팅을 마치도록 하겠습니다.
'웹 공부 > 3. CSS3' 카테고리의 다른 글
CSS3 - CSS 스타일 - 링크(link)스타일 설정하기 (18) (0) | 2017.06.15 |
---|---|
CSS3 - CSS 스타일 - 배경(background) 설정하기 2 (17) (0) | 2017.06.14 |
CSS3 - CSS 스타일 - 패딩(padding) 설정하기 (15) (0) | 2017.06.12 |
CSS3 - CSS 스타일 - 마진(margin) 설정하기 (14) (0) | 2017.06.09 |
CSS3 - CSS 스타일 - 태그의 크기 설정과 변경 (13) (0) | 2017.06.08 |
댓글