[2021/12/31]국비지원 CSS3 11-(2) background-size, resize

background-size
- cover : 틀 맞춤
- contain : 이미지 맞춤
background-origin ( 상대적 배치 )
- border-box : 틀 기준
- padding-box ( default ) : 틀 내부 여백 기준
- content-box : 내용 기준
background-clip
- border-box : 2D상 테두리 바깥 침범 ( 3D z축 상 테두리 아래 위치 )
- padding-box : 여백까지만 침범
- content-box : 내용 기준

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>background size</title>
    <style type="text/css">
        div{float:left;margin:30px;padding:10px 5px;width:200px;height:100px;border:2px solid #06f;}
        p{font-size: 12px;}
        .bg1{background:url(images/bg.png) no-repeat 100% 0;resize: both;overflow:hidden;background-size: 90% 90%;}
        /* 박스 크기의 90%로 배경 이미지 */
        .bg2{resize: both;overflow: hidden;background:url(images/bg.png) no-repeat 100% 0,
            url(images/orange.jpg) repeat 0 0;background-size: 100px 80px, 50px 30px;}
        .bg3{width:200px;height:200px;background: url(images/bg1.jpg) no-repeat 0 0;
             background-size: cover;}
        .bg4{width:200px;height:200px;background: url(images/bg1.jpg) no-repeat 0 0;
             background-size: contain;}
        .bg5{width:300px;height:200px;background: url(images/bg1.jpg) no-repeat 0 0;}
        /* background-size:cover/background-size:contain */
        .bg6{width:550px;padding:25px;margin-bottom:20px;border:15px double rgba(0,0,0,0.6);
             background: url(images/bg1.jpg) no-repeat 0 0;background-origin: border-box;}
        /* border-box,padding-box(기본값),content-box */
        .bg7{width:550px;padding:25px;margin-bottom:20px;border:15px double rgba(0,0,0,0.6);
             background: #e5cadd;background-clip: border-box;}
    </style>
</head>
<body>
    <p><img src="images/bg.png" alt="나비"></p>
    <h3>배경 이미지 원본</h3>
    <div class="bg1">
        <p>배경 이미지 <br> div 크기의 <br>90% 90%로 할 때</p>
    </div>

    <div class="bg2">
        <p>배경 이미지를 <br> 150px 120px로 할 때</p>
    </div>
    <div class="bg3">cover</div>
    <div class="bg4">contain</div>
    <div class="bg5">원본</div>
    <div class="bg6">background-origin</div>
    <div class="bg7">background-clip</div>
</body>
</html>

결과물

≫ textarea 안에 이미지가 있으면, textarea 크기에 따라서 이미지 사이즈도 같이 변함

resize : 사이즈 조정

이 속성을 주면 textarea와 같은 속성이 생김

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        p{font-size: 12px;}
        div{width:200px;height:50px;padding:5px;border:1px solid #06f;overflow: hidden;resize: both;}
        /* horizontal, vertical, both */
    </style>
</head>
<body>
    <div>
        <p>
            CSS3 속성 중 resize 속성을 이용하면 요소의 크기를 사용자가 임의대로 조절할 수 있습니다.
            CSS3 속성 중 RESIZE 속성을 이용하면 요소의 크기를 사용자가 임의대로 조절할 수 있습니다.
        </p>
    </div>
</body>
</html>

결과물

저작자표시 비영리 변경금지

티스토리툴바