고정 헤더 영역
상세 컨텐츠
본문
반응형
background-color 속성 - 배경 색 지정하기
- 배경 색을 지정하려면 배경을 넣고 싶은 요소에 속성을 background-color 속성을 넣으면 된다.
background-color: <색상>background-color: #00ff00; /* 16진수 표현 */
background-color: rgb(0, 255, 0); /* rgb 표현 */
background-color: green; /* 색상이름 */
배경 색 스타일과 상속
- <body> 태그 선택자에서 지정하면 문서 전체에 상속되므로 하위 요소에서 스타일을 수정하지 않는 한, 문서 전체에 똑같이 적용된다.
<html>
<head>
<meta charset="utf-8">
<style>
body {
background-color: #0094ff;
}
div {
background-color: white;
width: 90%;
padding: 15px;
border: 1px solid balck;
}
p {
line-height: 30px;
}
</style>
</head>
<body>
<div>
<p>
동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록
동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록
동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록
동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록
동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록
동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록
동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록
동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록
동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록
</p>
</div>
</body>
</html>
backgorund-clip 속성 - 배경 적용 범위 조절하기
- 지정한 영역 박스를 배경 적용 범위를 조절할 수 있다.
- 박스 모델의 가장 외각인 테두리까지 적용할지, 테두리를 빼고 패딩(padding) 범위까지 적용할지 아니면 내용 부분에만 적용할 지 선택할 수 있다.
background-clip: border-box | padding-box | content-box
속성
- border-box : 박스 모델의 가장 외각인 테두리(border)까지 적용한다.
- padding-box : 박스 모델에서 테두리를 뺀 패딩(padding) 범위까지 적용한다.
- content-box : 박스 모델에서 내용 부분에만 적용한다.
<html>
<head>
<meta charset="utf-8">
<style>
.bg1 { background-clip: border-box; }
</style>
</head>
<body>
<div class="bg1" style="width: 300px;">
<p>
동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록
동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록
동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록
동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록
동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록
동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록
동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록
동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록
동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록
</p>
</div>
</body>
</html>
background-image 속성 - 웹 요소에 배경 이미지 넣기
- 배경에 이미지를 넣을 경우 background-image 속성을 이용해 이미지를 배경에 삽입할 수 있다.
<style>
body { background-image: url('test.png'); }
</style>
background-repeat 속성 - 배경 이미지 반복 방법 지정하기
- 배경에 이미지를 추가한 후 이미지가 작은 경우 반복해서 화면을 꽉 채운다. 배경 이미지 반복에는 background-repeat 속성을 이용해 배경 이미지를 반복해준다.
bakground-repeat: repeat | repeat-x | repeat-y | no-repeat
속성
- repeat : 브라우저 화면에서 가득 찰 때까지 배경 이미지를 가로와 세로로 반복한다.
- repeat-x : 브라우저 창 너비와 같아질 때까지 배경 이미지를 가로로 반복한다.
- repeat-y : 브라우저 창 높이와 같아질 때까지 배경 이미지를 세로로 반복한다.
- no-repeat : 배경 이미지를 한 번만 표시하고 반복하지 않는다.
<html>
<head>
<meta charset="utf-8">
<style>
body {
background-image: url("dot.png");
background-repeat: repeat;
}
</style>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
실행결과
반응형
'IT > HTML 및 CSS' 카테고리의 다른 글
| [CSS 기초] 테두리 관련 속성들 (0) | 2021.04.27 |
|---|---|
| [CSS 기초] CSS와 박스 모델 (0) | 2021.04.26 |
| [CSS 기초] 목록 스타일 (0) | 2021.04.23 |
| [CSS 기초] 문단 스타일 (2) (0) | 2021.04.21 |
| [CSS 기초] 문단 스타일 (1) (0) | 2021.04.20 |
댓글 영역