CSS-BOX MODEL 2 (box-sizing, box-shadow)

1. box-sizing

속성 값	설명
box-sizing: content-box;	요소의 전체 크기에 padding, border 값 포함 (기본값)
box-sizing: border-box;	요소의 전체 크기에 padding, border 값 미포함

border-box 속성을 이용해 여백과 테두리를 추가하거나 변경해도 원래 크기에 변함이 없도록 한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BOX MODEL - box-sizing</title>
    <style>
        div.content-box{
            width: 500px; border: 10px solid; background-color: beige;
            padding: 50px; margin: 20px;
            box-sizing: content-box; /* 기본값 */
        }
        div.border-box{
            width: 500px; border: 10px solid; background-color: beige;
            padding: 50px; margin: 20px;
            box-sizing: border-box; 
        }
        ul.sizing_list-content{width: 600px; }
        ul.sizing_list-content li{
            list-style: none; float: left; width: 120px;
            padding: 10px;  margin-bottom: 10px; margin-right: 10px;
            text-align: center; background-color: antiquewhite; border: 3px dashed;
            box-sizing: content-box; /* 기본값 */
        }
        ul.sizing_list-border{width: 600px; clear: both;}
        ul.sizing_list-border li{
            list-style: none; float: left; width: 120px;
            padding: 10px; margin-bottom: 10px; margin-right: 10px;
            text-align: center; background-color: lightcyan; border: 3px dashed;
            box-sizing: border-box; 
        }
    </style>
</head>
<body>
    <div class="content-box">box-sizing: content-box</div>
    <div class="border-box">box-sizing : border-box</div>
    <ul class="sizing_list-content">
        <li>content-box</li>
        <li>content-box</li>
        <li>content-box</li>
        <li>content-box</li>
    </ul>
    <ul class="sizing_list-border">
        <li>border-box</li>
        <li>border-box</li>
        <li>border-box/li>
        <li>border-box</li>
    </ul>
</body>
</html>

BOX MODEL - box-sizing

box-sizing: content-box

box-sizing : border-box

content-box
content-box
content-box
content-box

border-box
border-box
border-box
border-box

2. box-shadow : 요소 박스에 그림자 지정

선택자 { box-shadow: Inset | Horizontal-offset | Vertical-offset | Blur-Radius | Spread | Shadow-Color; }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BOX MODEL - box-shadow</title>
    <style>
        div.box{width: 300px; display: inline-block;
            margin: 20px 10px; padding: 20px; 
            border-radius: 55px 10px / 10px 55px; 
            background-color: plum
        }
        div.shadow1{box-shadow: 8px 15px;}
        div.shadow2{box-shadow: 8px 15px rgba(0,0,50,0.4);}
        div.shadow3{box-shadow: 8px 15px 10px rgba(0,0,50,0.4);}
        div.shadow4{box-shadow: 8px 15px 10px 7px rgba(0,0,50,0.4)}
        div.shadow5{box-shadow: 8px 15px 10px inset rgba(0,0,50,0.4);}
        div.shadow6{
            box-shadow: 5px 5px 5px darkred, 
                10px 10px 5px yellow, 
                15px 15px 5px darkblue;
        }
    </style>
</head>
<body>
    <div class="box shadow1">가로 8px, 세로 15px</div>
    <div class="box shadow2">가로 8px, 세로 15px, 색상</div>
    <div class="box shadow3">가로 8px, 세로 15px, 블러 10px, 색상</div>
    <div class="box shadow4">가로 8px, 세로 15px, 블러 10px, 그림자확장 7px 색상</div>
    <div class="box shadow5">가로 8px, 세로 15px, 안쪽그림자, 색상</div>
    <div class="box shadow6">세개의 그림자 동시 지정</div>
</body>
</html>

BOX MODEL - box-shadow

가로 8px, 세로 15px

가로 8px, 세로 15px, 색상

가로 8px, 세로 15px, 블러 10px, 색상

가로 8px, 세로 15px, 블러 10px, 그림자확장 7px 색상

가로 8px, 세로 15px, 안쪽그림자, 색상

세개의 그림자 동시 지정

저작자표시

'CSS' 카테고리의 다른 글

CSS-Transform (0)	2020.08.24
CSS- Vendor Prefix (벤더 프리픽스) (0)	2020.08.20
CSS-BOX MODEL (width, height, padding, margin, border) (0)	2020.08.18
CSS-배경(background)2 (0)	2020.08.17
CSS-배경(background) (0)	2020.08.16