배경색 지정하기(background-color)
background-color:#000000; (HAX코드 16진수 사용)
background-color:rgb(0,0,0); (RGB 코드 사용)
background-color:rgba(0,0,0,0); (RGBA 코드 사용)
background-color:balck; (키워드 사용)예제
<html>
<head></head>
<body style="background-color:red">
배경을 빨간색으로 지정합니다.
</body>
</html>
각 요소에 background-color 설정하기
HTML
<div class ="d1">배경 빨간색</div>
<div class ="d2">배경 초록색</div>
<div class ="d3">배경 파란색</div>
CSS
.d1{background-color:red}
.d2{background-color:rgb(0,255,0)}
.d3{background-color:#0000FF}
배경 적용 범위 조절하기 (background-clip)
HTML
<div class ="d1">border-box</div>
<div class ="d2">padding-box</div>
<div class ="d3">content-box</div>
CSS
div{
margin: 20px 0px;
padding: 10px;
border: 10px dotted #5D5D5D;
}
.d1{
background-color:red;
background-clip:border-box;
}
.d2{
background-color:rgb(0,255,0);
background-clip:padding-box;
}
.d3{
padding:10px;
background-color:#0000FF;
background-clip:content-box;
}| 속성 값 | 설명 |
| border-box | 박스 모델의 가장 외곽 테두리까지 적용합니다. |
| padding-box | 박스 모델에서 테두리를 뺀 패딩까지 적용합니다. |
| content-box | 박스 모델에서 내용 부분에만 적용합니다. |
'HTML, CSS' 카테고리의 다른 글
| [HTML/CSS] div 박스에 테두리(border) (0) | 2024.04.20 |
|---|---|
| [HTML/CSS] 배경 이미지 넣는 방법(background-image) (0) | 2024.04.20 |
| [HTML/CSS] UL, OL, DL 목록(list)에 기호 스타일 지정 (0) | 2024.04.20 |
| [HTML/CSS] 공백과 줄바꿈 지정(white-space) (0) | 2024.04.20 |
| [HTML/CSS] 넘치는 텍스트 표기하기 (overflow, text-overflow) (0) | 2024.04.20 |
