[CSS] 박스 모델

---

 

1.박스모델

HTML의 모든 요소는 box 형태의 영역이다.

 

<style>
    company div{
        background-color: aqua;
        height: 30%;
        width: 30%;
        padding: 20px;
        margin: 20px;
        border:4px solid black;
        background-clip: content-box;
    }
</style>

<company>
    <div>
        <a>안녕</a>
    </div>
</company>

 

 

 

 

 

2.width , height

너비와 높이를 지정
해당 너비와 높이로 지정한 콘텐츠 영역보다 콘텐츠가 크면 넘치게 된다.

<style>
    company div{
        background-color: antiquewhite;
        height: 50px;
        width: 50px;
       
    }
</style>


<company>
    <div>
        <a>안녕하세요</a>
    </div>
</company>

 

 

 

 

 

 

3.margin, padding

margin 하고 padding 영역을 정한다.

https://www.geeksforgeeks.org/css-padding-vs-margin/

 

<style>
    company div{
        background-color: antiquewhite;
        height: 50px;
        width: 50px;
        margin-top: 30;
        padding-top: 100;
        border: solid darkblue;
    }
</style>


<company>
    <div>
        <a>안녕</a>
    </div>
</company>

 

 

 

 

 

4.border

4-1.border-style

테두리선 스타일을 지정한다.
다양한 종류가 있다.

https://developer.mozilla.org/ko/docs/Web/CSS/border-style

 

 

 

4-2.border-width

테두리의 두께를 정한다. 4방향에 정할수도있다.(border style 필수 적용)

 

 

4-3.border-color

테두리의 색상을 지정. 4방향에 정할수도있다.(border style 필수 적용)

 

 

 

4-4. border-radius

테두리 모서리를 둥글게 표현 4모서리에 각각 정할수도있다.

 

 

 

4-5.border

border-width, border-style, border-color를 한번에 설정가능

 

<style>
    company div{
        background-color: rgb(73, 167, 81);
        height: 50px;
        width: 50px;
        border: 3px solid blue;
        border-radius: 14px;
    }
</style>


<company>
    <div>
        <a></a>
    </div>
</company>

 

 

 

5.box-sizing

width, height 프로퍼티의 대상 영역을 변경

 

5-1.content-box

contetnt영역만(기본값)

 

5-2.border-box

content 영역, padding, border가 포함된 값

<style>
    company div{
        background-color: rgb(73, 167, 81);
        height: 50px;
        width: 50px;
        border: 3px solid blue;
        border-radius: 14px;
        margin: 10;
        padding: 10;
    }
    .border-box{
        background-color: aqua;
    }
</style>


<company>
    <div class="border-box">
        <a></a>
    </div>
</company>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

---

🎈참고자료

https://poiemaweb.com/css3-box-model