728x90
반응형
09_bgorigin.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>요안도라</title>
<style>
@import "../css/09_bgorigin.css";
</style>
</head>
<body>
<section>
<h2>이용안내</h2>
<div class="intro1">
<p>입실은 오후 3시, 퇴실은 오전 11시입니다.</p>
<p>이곳은 관광지가 아닌, 귤농사를 짓는 중산간 마을입니다. 바베큐, 야외식사 등 바깥채, 외부 앞뜰에서의 활동은
밤 11시 이전까지 마쳐 주셔야 합니다. 바깥채 내부의 소등은 자유롭게 하시되, 자정 이후로 음주나 소란스러운 대화를
자제해 주시면 고맙겠습니다.</p>
</div>
<div class="intro2">
<p>입실은 오후 3시, 퇴실은 오전 11시입니다.</p>
<p>이곳은 관광지가 아닌, 귤농사를 짓는 중산간 마을입니다. 바베큐, 야외식사 등 바깥채, 외부 앞뜰에서의 활동은
밤 11시 이전까지 마쳐 주셔야 합니다. 바깥채 내부의 소등은 자유롭게 하시되, 자정 이후로 음주나 소란스러운 대화를
자제해 주시면 고맙겠습니다.</p>
</div>
<div class="intro3">
<p>입실은 오후 3시, 퇴실은 오전 11시입니다.</p>
<p>이곳은 관광지가 아닌, 귤농사를 짓는 중산간 마을입니다. 바베큐, 야외식사 등 바깥채, 외부 앞뜰에서의 활동은
밤 11시 이전까지 마쳐 주셔야 합니다. 바깥채 내부의 소등은 자유롭게 하시되, 자정 이후로 음주나 소란스러운 대화를
자제해 주시면 고맙겠습니다.</p>
</div>
</section>
</body>
</html>09_bgorigin.css
@CHARSET "UTF-8";
div{ /*영역 내부 디자인*/
width:400px;
padding:20px;
margin:5px;
border:15px solid skyblue;
border-radius:20px;
background-image:url(../img/bg2.png);
background-repeat:no-repeat;
background-position:right bottom;
}
.intro1{
background-origin: border-box;
/*background-position 과 함께 쓰는 것이 background-clip과의 차이점*/
}
.intro2{
background-origin: padding-box;
}
.intro3{
background-origin:content-box;
}
728x90
반응형
'WEB > CSS' 카테고리의 다른 글
| [CSS] ch04-01. width (0) | 2017.08.23 |
|---|---|
| [CSS] ch03-10. grad (0) | 2017.08.23 |
| [CSS] ch03-08. bgsize (0) | 2017.08.23 |
| [CSS] ch03-07. bgclip (0) | 2017.08.23 |
| [CSS] ch03-06. bg (0) | 2017.08.23 |