티스토리 뷰

Web/CSS

[Web/CSS] CSS - 배경색과 배경 범위 지정

poopooreum 2024. 4. 24. 19:48
반응형

✏️ 배경색을 지정하는 background-color 속성

배경색을 지정하려면 배경을 넣고 싶은 요소의 스타일 규칙을 만들 때 background-color 속성을 이용

rgb값을 이용하거나 16진수값 등을 이용할 수 있고 속성값은 상속되지 않음 기본적으로 모든 웹 요소의 배경은 투명하기 때문에 body 스타일로 지정한 문서 배경이 비치는 것일 뿐임

background-color : #000000;
background -color : rgb(0,128,0); 
background-color : green;

 

✏️ 배경색의 적용 범위를 조절하는 background-clip 속성

배경색을 박스 모델의 가장 외곽인 테두리까지 적용할지, 테두리를 빼고 적용할지 등을 지정

종류 설명
border-box 박스 모델의 가장 외곽인 테두리까지 적용, 기본값
padding-box 박스 모델에서 테두리를 뺀 패딩 범위까지 적용
content-box 박스 모델에서 내용(콘텐츠) 부분에만 적용

 

왼쪽부터 차례대로 border-box / padding-box / content-box 값을 적용시킴

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>상품 소개 페이지</title>
  <style>
    .desc {
      border:5px dotted #222;
      background-color:#ffd9a0;
      width:350px;
      padding:20px;
      margin-right:20px;
      float:left;
    }
    #clip-border {
      background-clip: border-box;
    }
    #clip-padding {
      background-clip: padding-box;
    }
    #clip-content {
      background-clip: content-box;
    }
  </style>
</head>
<body>
  <div id="container">
    <div class="desc" id="clip-border">
      <h1>레드향</h1>
      <p>껍질에 붉은 빛이 돌아 <b>레드향</b>이라 불린다.</p>
      <p>레드향은 <em>한라봉과 귤을 교배</em>한 것으로<br>일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
    </div>
    <div class="desc" id="clip-padding">
      <h1>레드향</h1>
      <p>껍질에 붉은 빛이 돌아 <b>레드향</b>이라 불린다.</p>
      <p>레드향은 <em>한라봉과 귤을 교배</em>한 것으로<br>일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
    </div>
    <div class="desc" id="clip-content">
      <h1>레드향</h1>
      <p>껍질에 붉은 빛이 돌아 <b>레드향</b>이라 불린다.</p>
      <p>레드향은 <em>한라봉과 귤을 교배</em>한 것으로<br>일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
    </div>        
  </div>
</body>
</html>
반응형
저작자표시 비영리 변경금지

'Web > CSS' 카테고리의 다른 글

[Web/CSS] CSS - 그라데이션 효과 주기  (0) 2024.04.24
[Web/CSS] CSS - 배경 이미지 지정하기  (0) 2024.04.24
[Web/CSS] CSS - 복습3  (0) 2024.04.23
[Web/CSS] CSS- 웹 요소의 위치 지정하기  (0) 2024.04.23
[Web/CSS] CSS - 웹 문서의 레이아웃 만들기  (0) 2024.04.23
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/07   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31
글 보관함