[CSS] ch03-07. bgclip

07_bgclip.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>요안도라</title>
<style>
    @import "../css/07_bgclip.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>

 

 

07_bgclip.css

@CHARSET "UTF-8";
div{/*영역 외부 디자인*/
    width: 400px;
    padding: 15px;
    border: 15px solid transparent; /*transparent: 테두리 가려준다*/
    border-radius: 20px; /*테두리를 둥글게 해준다 여기서 radius의 px값은 원의 반지름값이다.*/
    background: #7ec9ff;
}
.intro1{
    background-clip: border-box; /*테두리 까지*/
}
.intro2{
    background-clip: padding-box;/* 패딩까지 */
}
.intro3{
    background-clip: content-box;/* 내용까지 */
}