로그인  회원가입  
인포앤북 홈

1-5. 배경 색상

■ 배경 색상

background-color 속성은 요소의 배경 색상을 설정하는 데 사용됩니다.

배경 색상
ex1-12.html
<style>
body {
    background-color: pink;
}
{
    background-color: yellow;
}
</style>
<body>
    <h3>배경 색상</h3>
    <p>웹 페이지에 배경 색상을 설정할 때는 background-color 속성을 사용한다.</p>
</body>
ex1-12.html의 실행 결과
■ 색상 코드

웹에서는 color, background-color 속성 값으로 사용되는 색상 이름 red, blue, green, pink, white, orange 등 외에도 RGB로 표현되는 웹의 색상 코드를 이용하면 수백 만 이상의 색상을 제공하는 트루 컬러(True Color)를 사용할 수 있습니다. 색상 코드 #da70d6을 예로써 색상 코드에 대해 설명합니다.

다양한 색상 코드가 사용된 다음의 예를 통하여 색상 코드에 대해 좀 더 자세히 알아봅니다.

색상 코드
ex1-13.html
<style>
    body { background-color: yellow; }
</style>
<body>
    <h3>색상 코드</h3>
    <p> <span style="color:#4169e1;">색상코드 #4169e1</span>
        <span style="color:#87cefa;">색상코드 #87cefa</span>
        <span style="color:#fc000d;">색상코드 #fc000d</span> 
        <span style="color:#16da72;">색상코드 #16da72</span><br>
        <span style="color:#ffffff;">흰색</span><br>
        <span style="color:#eeeeee;">회색1</span>
        <span style="color:#dddddd;">회색2</span>
        <span style="color:#cccccc;">회색3</span>
        <span style="color:#bbbbbb;">회색4</span>
        <span style="color:#aaaaaa;">회색5</span>
        <span style="color:#999999;">회색6</span>
        <span style="color:#888888;">회색7</span>
        <span style="color:#777777;">회색8</span>
        <span style="color:#666666;">회색9</span>
        <span style="color:#555555;">회색10</span>
        <span style="color:#444444;">회색11</span>
        <span style="color:#333333;">회색12</span>
        <span style="color:#222222;">회색13</span>
        <span style="color:#111111;">회색14</span>
        <span style="color:#000000;">검정색</span> 
    </p>
</body>
ex1-13.html의 실행 결과