색상과 배경

 웹 사이트를 디자인할 때 가장 쉬운 방법은 색상과 배경을 바꾸는 것이다. 

 

1. 색상

 색상을 표현하는 방법은 다양하다. 십진수로 표시할 수도 있고, rgb값을 직접 입력할 수 있다. 또는 색상 이름을 직접 입력할 수 있다.

 

<style>
    body {
        background: #222222; 
        }
    .text1 {
        color:rgb(255,255,255);
        }
    .text2 {
        color:rgba(255,255,255,0.8); 
        }
    .text3 {
        color:rgba(255,255,255,0.5); 
        }
    .text4 {
        color:rgba(255,255,255,0.2);
        }
</style>

2. 배경

  배경은 이미지와 색으로 디자인이 가능하다. 그라데이션, 반복 등 여러 가지 기법이 있다. 

<style>
    .bg1 { background-clip:border-box;}
    .bg2 { background-clip:padding-box;}
    .bg3 { background-clip:content-box;}
/<style>

 

1. border-box :  테두리까지 적용

2. padding-box : 테두리를 뺀 범위까지 적용

3. content-box : 내용 부분에만 적용

 

---

본 내용은 이지스퍼블리싱의 'Do it! HtML5 + CSS3 웹 표준의 정석'을
참고하여 작성한 내용입니다.