[CSS] CSS 색상 / 배경 설정

CSS 에서 색을 표현하는 방법입니다.

색상 이름으로 표현

 

흔히 알고 있는 색상의 영어 이름으로 설정합니다.

 

<style>
    .blue { color: blue; }
    .green { color: green; }
    .silver { color: silver; }
</style>

 

현재 대부분의 브라우저가 140 여개의 색상 이름을 지원합니다.

 

 

 

RGB 색상으로 표현

 

빨간색(Red), 녹색(Green), 파란색(Blue) 을 혼합하여 색을 표현합니다.

 

<style>
    .blue { color: rgb(0,0,255); }
    .green { color: rgb(0,128,0); }
    .silver { color: rgb(192,192,192); }
</style>

 

 

 

16진수 색상값으로 표현

 

RGB 색상값을 16진수로 변환하여 표현합니다.

 

<style>
    .blue { color: #0000FF; }
    .green { color: #008000; }
    .silver { color: #C0C0C0; }
</style>

 

 

 

 

 

CSS 에서 사용할 수 있는 background 속성입니다.

 

background-color

각 요소의 배경색을 설정합니다.

 

<style>
    body { background-color: blue; }
    h1 { background-color: rgb(255,128,0); }
    p { background-color: #FFEEDD; }
</style>

 

 

 

background-image

 

각 요소의 배경 이미지를 설정합니다.

 

<style>
    body { background-image: url("/examples/images/img_background.png"); }
</style>

 

 

 

background-repeat

 

배경 이미지를 반복하여 보여줄때 수평이나 수직 방향을 설정하거나 이미지를 한번만 표시되게 설정합니다.

 

<style>
    body { background-image: url("/examples/images/img_background.png"); background-repeat: repeat-x; }
</style>

설정 가능한 키워드는 다음과 같습니다.

 

• repeat-x : 수평 방향 설정
• repeat-y : 수직 방향 설정
• no-repeat : 한번만 표시되게 설정

 

 

background-position

 

배경 이미지의 상대 위치를 설정합니다.

키워드 설정 뿐 아니라 퍼센트(%)나 픽셀(px)을 사용하여 상대 위치를 직접 명시할 수도 있습니다.

 

<style>
    body { background-position: top right; }
</style>

사용 가능한 키워드 설정은 다음과 같습니다.(가로 세로 각각 3등분으로 해서 보면 이해하기 쉬움)

 

• left top
• left center
• left bottom
• right top
• right center
• right bottom
• center top
• center center
• center bottom

 

 

background-attachment

 

배경 이미지를 해당 위치에 고정시켜 스크롤과는 무관하게 화면의 위치에서 이동하지 않도록 설정합니다.

 

<style>
    body {
        background-position: left bottom;
        background-attachment: fixed;
    }
</style>