CSS - 색상 배경 스타일

 

 

 

색상 배경 스타일

 

background-color

 

body {
    /* 색상명 */
    background-color: pink;
    /* RGB(적녹청) */
    background-color: rgb(255, 192, 203);
    background-color: rgba(255, 192, 203, 0.5);
    /* HSL(색조, 채도, 명도) */
    background-color: hsl(350, 100%, 88%);
    background-color: hsla(350, 100%, 88%, 0.5);
    /* Hex Code(16진수) */
    background-color: #FFC0CB;
}

---

 

background-clip

 

• border-box : 테두리까지 배경색이 채워진다
• padding-box : 테두리 이전까지 배경색이 채워진다.(padding 범위까지 배경색이 채워짐)
• content-box : padding 이전까지 배경색이 채워진다.

 

<div class="div-test" id="div1">
    안녕하세요?<br>
    안녕하세요?
</div> 
<div class="div-test" id="div2">
    안녕하세요?<br>
    안녕하세요?
</div> 
<div class="div-test" id="div3">
    안녕하세요?<br>
    안녕하세요?
</div>

#div1 { background-clip: border-box; }
#div2 { background-clip: padding-box; }
#div3 { background-clip: content-box; }

---

 

background-repeat

 

• repeat : 가로, 세로 모두 이미지 반복
• repeat-x : 가로로만 이미지 반복
• repeat-y : 세로로만 이미지 반복
• no-repeat : 반복 없음

---

 

background-size

 

• auto : 요소 안에 배경 이미지가 다 들어오도록 이미지를 확대/축소
          인터넷 창 확대 축소에 따라 이미지 확대/축소
• cover : 배경 이미지로 요소를 모두 덮을 수 있도록 이미지를 확대/축소
           요소의 최대 크기만큼 확대/축소
• 150px 100px : 가로 세로 고정 크기 지정
• 80% 80% : 가로 세로 상대 크기 지정

---

 

background-position

 

• left top, right top, center top
• right bottom, right bottom, center bottom
• left center, right center, center center
• 30px 50px : 지정 위치

---

 

background-attachment

 

• scroll
• fixed

---