CSS 색상/배경

 

 

 

 

 

 

CSS의 색상표현

 

 

 

 

 

 

 

 

 

 

배경스타일

 

 

 

 

 

 

background-color

배경색을 지정하는 속성

 

 

기본형식
    선택자 {
            background-color : 색상표현;
            }

 

 

 

 

 

 

 

 

 

background-clip

배경 범위 조절

 

 

 

 

기본형식
선택자 {
        background-clip : 속성값;
        }



 

 

 

 

 

 

background-image

요소에 배경지정 속성

 

 

기본형식
선택자 {
        background-image : url(경로);
        }



 

 

 

 

 

 

 

 

background-repeat

배경이미지 반복 출력 설정

 

 

 

 

기본형식
    선택자 {
        background-repeat : 속성값;
        }



 

 

 

 

 

 

 

background-size

배경이미지의 크기를 조절하는 속성

 

 

기본형식
선택자 {
    background-size : 속성값;
    }



 

 

 

 

 

 

background-position

배경 이미지 위치를 조정하는 속성

 

 

 

기본형식
선택자 {
        background-origin : 속성값;
        }

 

 

 

 

 

 

 

background-origin

배경이미지 배치할 때 기준을 지정하는 속성

 

 

 

 

기본형식
 선택자 {
    background-origin : 속성값;
    }

 

 

 

 

 

 

 

background-attachment

웹페이지가 위아래로 움직여도 배경이미지는 움직이지 않게 고정하는 속성

 

 

 

 

기본형식
선택자 {
        background-attachment : 속성값;
        }

 

 

 

 

 

 

 

 

 

 

background

배경이미지 한번에 설정하는 속성

 

 

기본형식
선택자 {
        background : image값 repea값 attachmen값
        position값 clip값 origin값 size값;
        }

 

 

 

 

 

 

 

 

▼ 코드 예시 보기 ▼
<body>
    <h1>배경색과 배경 이미지</h1>
    <p>
        body { background-color : 색상명 | rgb | rgba | hsl | hsla | 16진수; }
        로 배경색을 지정할 수 있다.
    </p>

    <hr>

    <h3>div 영역 테스트</h3>
    <p>
        div 영역을 설정하는 경우 배경색을 지정하기 위해서는
        div에 배경색을 별도로 지정해야 한다.
    </p>
    <div id="div-bg">
        생성하기 뛰노는 가진 청춘의 같은 보이는 군영과 것이다. 그것을 있는 있는 길을 많이 위하여서. 싶이 만물은 끝에 것은 끓는 든 것이다. 과실이 풍부하게 뜨고, 대한 많이 날카로우나 주는 고행을 때문이다. 같은 웅대한 천하를 봄바람이다. 우리 이성은 튼튼하며, 같이 때문이다. 내려온 싶이 인간이 철환하였는가? 만천하의 있는 있으며, 어디 못하다 풀밭에 칼이다. 아름답고 동산에는 이상의 이상 칼이다. 그들에게 인생의 반짝이는 무엇이 못할 사랑의 붙잡아 군영과 앞이 그리하였는가?
		우는 길지 못하다 청춘은 구하지 가지에 이상이 힘있다. 피고, 부패를 인간의 위하여 열매를 그러므로 피다. 가치를 자신과 우리 평화스러운 방지하는 있으랴? 없으면, 자신과 되려니와, 실현에 풍부하게 광야에서 뿐이다. 있을 쓸쓸한 꽃이 있으랴? 많이 품에 곳이 끝에 그들의 유소년에게서 피부가 날카로우나 듣는다. 위하여서, 오직 두손을 전인 어디 이 풍부하게 되려니와, 쓸쓸하랴? 할지라도 예수는 이상은 피어나는 것은 그리하였는가? 목숨이 내려온 곳이 하는 가치를 현저하게 있는가? 시들어 그들은 우리 굳세게 사는가 약동하다. 얼마나 따뜻한 무한한 청춘의 없으면 힘있다.
		그들의 눈이 불러 설레는 이상이 가치를 끓는 있다. 생생하며, 뛰노는 때에, 천하를 보는 우리의 열락의 내려온 보이는 있는가? 청춘의 길을 때에, 천하를 심장은 뜨고, 방지하는 것이다. 구할 꾸며 몸이 든 찾아 말이다. 주며, 소담스러운 위하여 구하지 이상은 때문이다. 주며, 청춘의 힘차게 발휘하기 때까지 그림자는 우리 노래하며 듣는다. 청춘의 수 것은 든 인생의 같지 가진 끓는다. 무엇을 피고 온갖 그들의 부패를 군영과 끓는다. 청춘 예수는 영락과 바로 가는 때에, 꽃 운다. 기쁘며, 것은 소금이라 청춘의 방황하여도, 철환하였는가? 어디 예가 우리의 이것이다.
    </div>    

    <h3>배경 적용 범위 조정</h3>
    <p>
        div 영역의 배경 적용 범위를 지정할 때 background-clip
        속성을 사용한다.
    </p>
    <div class="div-test" id="div1">
        생성하기 뛰노는 가진 청춘의 같은 보이는 군영과 것이다. 그것을 있는 있는 길을 많이 위하여서. 싶이 만물은 끝에 것은 끓는 든 것이다. 과실이 풍부하게 뜨고, 대한 많이 날카로우나 주는 고행을 때문이다. 같은 웅대한 천하를 봄바람이다. 우리 이성은 튼튼하며, 같이 때문이다. 내려온 싶이 인간이 철환하였는가? 만천하의 있는 있으며, 어디 못하다 풀밭에 칼이다. 아름답고 동산에는 이상의 이상 칼이다. 그들에게 인생의 반짝이는 무엇이 못할 사랑의 붙잡아 군영과 앞이 그리하였는가?
		우는 길지 못하다 청춘은 구하지 가지에 이상이 힘있다. 피고, 부패를 인간의 위하여 열매를 그러므로 피다. 가치를 자신과 우리 평화스러운 방지하는 있으랴? 없으면, 자신과 되려니와, 실현에 풍부하게 광야에서 뿐이다. 있을 쓸쓸한 꽃이 있으랴? 많이 품에 곳이 끝에 그들의 유소년에게서 피부가 날카로우나 듣는다. 위하여서, 오직 두손을 전인 어디 이 풍부하게 되려니와, 쓸쓸하랴? 할지라도 예수는 이상은 피어나는 것은 그리하였는가? 목숨이 내려온 곳이 하는 가치를 현저하게 있는가? 시들어 그들은 우리 굳세게 사는가 약동하다. 얼마나 따뜻한 무한한 청춘의 없으면 힘있다.
		그들의 눈이 불러 설레는 이상이 가치를 끓는 있다. 생생하며, 뛰노는 때에, 천하를 보는 우리의 열락의 내려온 보이는 있는가? 청춘의 길을 때에, 천하를 심장은 뜨고, 방지하는 것이다. 구할 꾸며 몸이 든 찾아 말이다. 주며, 소담스러운 위하여 구하지 이상은 때문이다. 주며, 청춘의 힘차게 발휘하기 때까지 그림자는 우리 노래하며 듣는다. 청춘의 수 것은 든 인생의 같지 가진 끓는다. 무엇을 피고 온갖 그들의 부패를 군영과 끓는다. 청춘 예수는 영락과 바로 가는 때에, 꽃 운다. 기쁘며, 것은 소금이라 청춘의 방황하여도, 철환하였는가? 어디 예가 우리의 이것이다.
    </div> 
    <div class="div-test" id="div2">
        생성하기 뛰노는 가진 청춘의 같은 보이는 군영과 것이다. 그것을 있는 있는 길을 많이 위하여서. 싶이 만물은 끝에 것은 끓는 든 것이다. 과실이 풍부하게 뜨고, 대한 많이 날카로우나 주는 고행을 때문이다. 같은 웅대한 천하를 봄바람이다. 우리 이성은 튼튼하며, 같이 때문이다. 내려온 싶이 인간이 철환하였는가? 만천하의 있는 있으며, 어디 못하다 풀밭에 칼이다. 아름답고 동산에는 이상의 이상 칼이다. 그들에게 인생의 반짝이는 무엇이 못할 사랑의 붙잡아 군영과 앞이 그리하였는가?
		우는 길지 못하다 청춘은 구하지 가지에 이상이 힘있다. 피고, 부패를 인간의 위하여 열매를 그러므로 피다. 가치를 자신과 우리 평화스러운 방지하는 있으랴? 없으면, 자신과 되려니와, 실현에 풍부하게 광야에서 뿐이다. 있을 쓸쓸한 꽃이 있으랴? 많이 품에 곳이 끝에 그들의 유소년에게서 피부가 날카로우나 듣는다. 위하여서, 오직 두손을 전인 어디 이 풍부하게 되려니와, 쓸쓸하랴? 할지라도 예수는 이상은 피어나는 것은 그리하였는가? 목숨이 내려온 곳이 하는 가치를 현저하게 있는가? 시들어 그들은 우리 굳세게 사는가 약동하다. 얼마나 따뜻한 무한한 청춘의 없으면 힘있다.
		그들의 눈이 불러 설레는 이상이 가치를 끓는 있다. 생생하며, 뛰노는 때에, 천하를 보는 우리의 열락의 내려온 보이는 있는가? 청춘의 길을 때에, 천하를 심장은 뜨고, 방지하는 것이다. 구할 꾸며 몸이 든 찾아 말이다. 주며, 소담스러운 위하여 구하지 이상은 때문이다. 주며, 청춘의 힘차게 발휘하기 때까지 그림자는 우리 노래하며 듣는다. 청춘의 수 것은 든 인생의 같지 가진 끓는다. 무엇을 피고 온갖 그들의 부패를 군영과 끓는다. 청춘 예수는 영락과 바로 가는 때에, 꽃 운다. 기쁘며, 것은 소금이라 청춘의 방황하여도, 철환하였는가? 어디 예가 우리의 이것이다.
    </div> 
    <div class="div-test" id="div3">
        생성하기 뛰노는 가진 청춘의 같은 보이는 군영과 것이다. 그것을 있는 있는 길을 많이 위하여서. 싶이 만물은 끝에 것은 끓는 든 것이다. 과실이 풍부하게 뜨고, 대한 많이 날카로우나 주는 고행을 때문이다. 같은 웅대한 천하를 봄바람이다. 우리 이성은 튼튼하며, 같이 때문이다. 내려온 싶이 인간이 철환하였는가? 만천하의 있는 있으며, 어디 못하다 풀밭에 칼이다. 아름답고 동산에는 이상의 이상 칼이다. 그들에게 인생의 반짝이는 무엇이 못할 사랑의 붙잡아 군영과 앞이 그리하였는가?
		우는 길지 못하다 청춘은 구하지 가지에 이상이 힘있다. 피고, 부패를 인간의 위하여 열매를 그러므로 피다. 가치를 자신과 우리 평화스러운 방지하는 있으랴? 없으면, 자신과 되려니와, 실현에 풍부하게 광야에서 뿐이다. 있을 쓸쓸한 꽃이 있으랴? 많이 품에 곳이 끝에 그들의 유소년에게서 피부가 날카로우나 듣는다. 위하여서, 오직 두손을 전인 어디 이 풍부하게 되려니와, 쓸쓸하랴? 할지라도 예수는 이상은 피어나는 것은 그리하였는가? 목숨이 내려온 곳이 하는 가치를 현저하게 있는가? 시들어 그들은 우리 굳세게 사는가 약동하다. 얼마나 따뜻한 무한한 청춘의 없으면 힘있다.
		그들의 눈이 불러 설레는 이상이 가치를 끓는 있다. 생생하며, 뛰노는 때에, 천하를 보는 우리의 열락의 내려온 보이는 있는가? 청춘의 길을 때에, 천하를 심장은 뜨고, 방지하는 것이다. 구할 꾸며 몸이 든 찾아 말이다. 주며, 소담스러운 위하여 구하지 이상은 때문이다. 주며, 청춘의 힘차게 발휘하기 때까지 그림자는 우리 노래하며 듣는다. 청춘의 수 것은 든 인생의 같지 가진 끓는다. 무엇을 피고 온갖 그들의 부패를 군영과 끓는다. 청춘 예수는 영락과 바로 가는 때에, 꽃 운다. 기쁘며, 것은 소금이라 청춘의 방황하여도, 철환하였는가? 어디 예가 우리의 이것이다.
    </div> 

    <h3>배경 이미지 테스트</h3>
    <p>
        background-image 속성을 이용하여 배경 사진을 넣을 수 있다.
        사진 크기에 따라 자동 반복하여 이미지가 나타난다.
        배경 이미지의 반복 방법을 지정하기 위해 background-repeat 속성을
        이용할 수 있다.
        배경 이미지가 요소보다 크거나 작은 경우 배경 이미지의 크기를
        background-size 속성으로 변경할 수 있다.
    </p>
    <div id="bg-img"></div>
</body>
</html>

 

 

 

 

 

 

 

 

 

 

 

 

 

CSS_배경 그라데이션

 

 

 

 

 

선형 그라데이션

  • 색상이 수직, 수평, 대각선 방향으로 일정하게 변하는 것
  • 웹표준으로 지정되었지만 이전 버전과 호환을 위해 브라우저별 접두사를 이용, 그라데이션 표현방법이
    약간씩 다름

 

기본형식(표준)
선택자 {
    background : -접두사-linear-gradient(아래와동일)
    background : linear-gradient(각도 or 방향, 시작색상, [color-stop(색상,위치), 끝색상;
    }

 

 

 

 

 

 

 

 

방향

 

 

 

 

 

 

브라우저별 접두사

 

 

 

 

 

 

각도

 

 

 

 

시작색상 / 끝색상

 

 

 

시작색상 / 끝색상

 

 

 

 

 

 

 

원형 그라데이션

색상이 원이나 타원의 중심부터 동심원을 그리며 바깥방향으로 색상변경

 

 

기본형식
선택자 {
        background : 접두사 radial-gradient(위치 모양, 크기, 시작색상, 끝색상);
        background : radial-gradient(모양크기 at 위치, 시작색상, 끝색상);
        }

 

 

 

 

 

모양

 

 

 

 

크기

 

 

 

 

위치( x(가로좌표), y(세로좌표))

 

 

 

 

 

 

중지점 색상 / 위치

 

 

 

 

 

 

그라데이션 반복(선형)

그라데이션 패턴을 요소를 다 채울 때까지 반복하는 것

 

 

기본형식
선택자 {
        background : 접두사 repeating-linear-gradient(
        모양, 시작색상, 끝색상 중단위치 );
        background : repeating-linear-gradient(
        모양, 시작색상, 끝색상 중단위치);
        }

 

  • 두가지 색이 뚜렷하게 구분되는 것이 아니라 색이 흐린한 부분에서 색이 섞여 다른 색으로 보인다.

 

 

 

 

 

 

 

두가지색이 뚜렷하게 구분된 반복

선택자 {
        background : 접두사 repeating-linear-gradient(
        모양, 시작색상, 시작색상 중단위치, 끝색상, 끝색상 중단위치);
        background : repeating-linear-gradient(
        모양, 시작색상, 시작색상 중단위치, 끝색상, 끝색상 중단위치);
        }



 

 

 

 

 

그라데이션 반복(원형)

 

기본형식
선택자 {
        background : 접두사 repeating-radial-gradient(
        모양, 시작색상, 끝색상 중단위치);
        background : repeating-radial-gradient(
        모양, 시작색상, 끝색상 중단위치);
        }

 

  • 두가지 색이 뚜렷하게 구분되는 것이 아니라 색이 흐린한 부분에서 색이 섞여 다른 색으로 보인다.

 

 

 

 

 

 

 

 

두가지색이 뚜렷하게 구분된 반복

선택자 {
        background : 접두사 repeating-radial-gradient(
        시작색상, 시작색상 중단위치, 끝색상, 끝색상 중단위치);
        background : repeating-radial-gradient(
        시작색상, 시작색상 중단위치, 끝색상, 끝색상 중단위치);
        }



 

 

 

 

 

 

저작자표시 비영리 변경금지

'Programming > CSS3' 카테고리의 다른 글

CSS 화면 구현  (0) 2022.02.14
4. 변형/애니메이션  (0) 2022.02.10
3. 기본스타일  (0) 2022.02.10
1. 목록/링크 스타일  (0) 2022.02.10
0. CSS 기초 & 선택자  (0) 2022.02.09

+ Recent posts

티스토리툴바