티스토리 뷰

[개발]프로그래밍/css3

[css3] background-origin - 배경 이미지 배치 기준 조절

좋은 블로그 2021. 4. 16. 09:19
1. 개념
background-origin - 배경 이미지 배치 기준 조절
background-origin는 배경 이미지를 배치할 때 기준을 지정해 주는 속성

속성

설명

padding-box

박스 모델에서 테두리를 뺀 패딩이 기준(기본값)

border-box

박스 모델의 가장 외곽인 테두리가 기준

content-box

박스 모델에서 내용 부분이 기준
2. 태그
background-origin
html5 코드
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
<! DOCTYPE html>
<html lang = "kr" >
<head>
<meta charset = "utf-8" >
<title> 키보드와 하루 </title>
<style>
div
{
margin-top : 20px ;
width : 200px ;
height : 200px ;
background-image : url(monitor.png) ;
background-repeat : no-repeat ;
border : 5px solid #000 ;
display : inline-block ;
padding : 30px ;
background-position : left top ;
}
</style>
</head>
<body>
1
<div style = ' background-origin : padding-box ' > </div>
2
<div style = ' background-origin : border-box ' > </div>
3
<div style = ' background-origin : content-box ' > </div>
</body>
</html>
결과 화면
background-origin 사용 예제
코드 설명
1
background-origin : padding-box ;
div 테두리를 5px로 설정하고 테스트를 진행해 보았습니다.
기본 값에 해당하는 padding-box는 테두리를 뺀 패딩이 기준이 됩니다.
그래서 지금 보시는 1번에서 보시는 것처럼 테두리를 제외한 부분을 기준으로 left top 위치에 이미지가 있음을 알 수 있습니다.
2
background-origin : border-box ;
border-box는 이미지의 시작 위치가 테두리 부터 시작이 됩니다.
그래서 div 테두리 값을 5px로 주었을 때 그림의 일부분이 테두리에 가려진 것처럼 보이게 됩니다.
3
background-origin : content-box ;
content-box는 내용이 기준이 됩니다.
현재 div 요소 내에 여백을 30px로 주었고 content-box는 그 여백을 띠어서 내용이 시작되는 지점을 기준으로 잡히게 됩니다.
그래서 3번과 같은 위치에 이미지가 표시되는 것을 확인하실 수 있습니다.
저작자표시

'[개발]프로그래밍 > css3' 카테고리의 다른 글

[css3] linear-gradient - 선형 그라데이션  (0) 2021.04.19
[css3] background - 하나의 속성으로 배경 이미지 설정  (0) 2021.04.16
[css3] background-position - 배경 이미지 위치 조절  (0) 2021.04.15
[css3] background-size - 배경 이미지 크기 조절  (0) 2021.04.15
[css3] background-repeat - 배경 이미지 반복 방법  (0) 2021.04.14
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday