background

CSS 공작소에 방문해 주셔서 감사드립니다. 반응형 예제로 느껴보세요!!

background 는 배경색, 배경이미지와 관련된 것을 설정합니다.
상당히 많은 설정을 할 수 있습니다. 하나씩 살펴보겠습니다.

그리고 페이지 하단의 관련 CSS 도 참고해 보시면 좋습니다. ^^

예제 1
배경색 지정하기
보기
색 이름
background : yellow		 16진수 코드
background : #FFFF00
16진수 코드 줄임형
background : #FF0		 RGB 코드값
background : rgb(255, 255, 0)
RGBA 코드값(알파값)
background : rgba(255, 255, 0, 0.3)		 RGBA 코드값(알파값)
background : rgba(255, 255, 0, 0.6)
설명

아래와 같은 방법으로 배경색을 지정할 수 있습니다.

1. background : 컬러이름
2. background : 16진수코드
3. background : 16진수코드, 중복시 줄여서 사용 - #FFFFFF > #FFF
4. background : rgb 코드값 사용
5. background : rgb 코드값 + 반투명(알파)값 사용
6. background : rgb 코드값 + 반투명(알파)값 사용

5, 6 알파값은 0~1 사이로 입력합니다. 0 은 투명, 1은 불투명 입니다.

사용 예
1. background : red
2. background : #FFFF00
3. background : #FFF  (background : #FFFFFF  와 같습니다)
4. background : rgb(255,255,0)
5. background : rgba(255, 255, 0, 0.3)   (반투명 효과 30%)
6. background : rgba(255, 255, 0, 0.6)   (반투명 효과 60%)


※ 컬러관련 이름은 아래쪽의 링크를 참고해 주세요 ^^

컬러테이블에서 golden rod 처럼 띄어쓰기가된 이름이 있습니다.
이런 컬러이름 사용시에는 띄어쓰기 없이 입력해 주어야 합니다.

background : goldenrod ; 처럼요.
그리고 대소문자를 구분하지 않으므로 GoldenRod 처럼 사용해도 됩니다.

배경색 지정에 관련한 내용은 CSS 에서의 컬러값 을 참고해 주세요.

추가 참고 : 컬러 영어 이름 정리표
예제 2
컬러테이블 참고자료
설명

컬러테이블 참고 자료입니다.

☞ Color Table

예제 3
실습 - background 로 배경색 지정해보기
보기
CSS 공작소
background :
background : black
설명
- background 를 배경색 지정의 용도로 사용한 예제입니다.
- 배경색만 지정하기 위한 background-color 도 있습니다.
예제 4
background 로 배경그림 넣기
보기
background : url('이미지 경로')
소스
<style type="text/css">
    .css_test {
        background : url('https://t1.daumcdn.net/cfile/tistory/22528D4C550B9B3A03');
        color : white;
        font-size : 20pt !important;
        font-weight : bold;
        height : 450px;
        line-height : 450px !important;
        text-align : center;
        text-shadow : 0 0 5px black, 0 0 5px black;
    }
</style>

<div class="css_test">background : url('이미지 경로')</div>
사용된 CSS (클릭시 보기) : backgroundcolorfont-sizefont-weightheightline-heighttext-aligntext-shadow
설명

- background : url('이미지경로') 로 사용합니다.
- 배경이미지 지정에 특화된 background-image 도 있습니다.

예제 5
실습 - 배경그림 바꿔보기
보기
CSS 공작소
background :
background : url('http://superkts.com/img/css/bg0426.gif')
설명
- 참고 : 글자의 그림자 효과는 text-shadow 입니다.
예제 6
실습 - 배경그림과 반복형태 지정해 보기
보기
CSS 공작소
이미지 선택 반복 선택
background :
background : url('이미지경로')
설명
- 배경그림 반복 설정에 특화된 background-repeat 가 있습니다.
- 참고 : 반복형태에 대한 자세한 것은 background-repeat 를 참고해 주세요.
예제 7
실습 - background 4개 속성 조절해 보기
보기
컬러 이미지 반복 위치
background :
background : yellow url('이미지경로') repeat left top
설명
- 위치 설정은 반복 설정을 no-repeat 로 해놓고 해보시면 좋습니다.

각각의 특화된 CSS
- background-color : 컬러
- background-image : 이미지
- background-repeat : 반복
- background-position : 위치
해당 CSS 에 더 자세한 정보가 있습니다.
예제 8
background 를 다른 특화 속성과 비교해 보기
보기
아래 두개는 같습니다.
background : url( '이미지 경로' )
background-image : url( '이미지 경로' )
설명
- 예제 : background-image 를 보시면 좋습니다.
- 새로고침 하시면 이미지가 바뀝니다. ^^*
예제 9
background 를 다른 특화 속성과 비교해 보기
보기
아래 두개는 같습니다.
background : url('이미지 경로') no-repeat center;
background-image : url('이미지 경로');
background-repeat : no-repeat;
background-position : center;
설명
관련 CSS
- background-image
- background-repeat
- background-position
연구 1
공포체험 - 깜놀 주의 !!! 절대 주의 !!! (jQuery + CSS로 무섭게 하기 예제)
보기
약간 무서울 수 있습니다. 절대 심장이 약하신 분은 하지 마세요 !!!
소스
<style type="text/css">

    #css_test {
        background-color : black;
        background-repeat : no-repeat;
        height : 550px;
        border-radius : 10px;
    }

    #css_test.ghost1 {
        background-image : url('/img/css/ghost.gif');
        background-position : 50% 50%;
        background-size : 0;
    }

</style>

<script type="text/javascript">

    var chk = false;

    function ghostIn(){
        if(chk) return;
        chk = true;
        $('#css_test').stop().animate({'background-size':'+=80%'}, 500, ghostOut);
    }

    function ghostOut(){
        $('#css_test').stop().animate({'background-size':'-=80%'}, 5000, ghostEnd);
    }

    function ghostEnd(){
        chk = false;
    }

</script>

<div class="bold red ac pd5">약간 무서울 수 있습니다. 절대 심장이 약하신 분은 하지 마세요 !!!</div>
<div id="css_test" class="ghost1"></div>
<div class="mt5 ac">
    <button type="button" onclick="ghostIn()">준비됬으면 누르세요 !</button>
</div>
사용된 CSS (클릭시 보기) : background-colorbackground-imagebackground-positionbackground-repeatbackground-sizeborder-radiusheight
설명
- 공포 수위 조절 했는데 적절한지 모르겠네요 ^^;


☞ 전 체 화 면 버 전 ☜ ☞ 제작 과정 ☜
연구 2
달리는 강아지 - 제이쿼리로 배경제어
보기
소스
<style type="text/css">
    .css_test {
        background-image : url('/img/css/dogs.gif');
        background-repeat : repeat-x;
        height : 100px;
    }
</style>

<div class="css_test"></div>

<script type="text/javascript">

    function css_test(){
        $('.css_test').css({'background-position':'-=1'}); // 배경이미지를 왼쪽으로 1px 씩 계속 움직임
    }
    setInterval(css_test, 10);

</script>
사용된 CSS (클릭시 보기) : background-imagebackground-repeatheight
설명

- 애니메이션 GIF 파일과 CSS 배경그림설정 그리고 jQuery 를 이용하여 만들어 보았습니다.
- 강아지들이 귀엽네요 .. 마치 ..
- 소스는 엄청간단한데 효과는 만점이네요. 바로 이런거죠 ㅋ
- "제이쿼리 공작소" 를 오픈하게 되면 다루도록 하겠습니다.

※ 이 예제에 대한 강좌는 http://biketago.com/ev175 에서 보실 수 있습니다.

+ 관련 CSS +
☞ 목록으로 가기
CSS 공작소  /   jQuery 공작소