박스 모델

margin : 경계선 바깥부분

border : 경계선

padding : 경계선과 콘텐츠 사이의 공간

content : 글자나 컨텐츠가 입력되는곳

 

● border

 - 스타일 : solid(실선), double(이중선), dotted(점선), dashed(줄선)

 - 굵기 : 픽셀단위(5px)

 - 색상 : red, green, #ffffff(RGB코드)

<style>
    div {
    	border-style : solid;
        border-width : 5px;
        border-color : red;
        border : solid 5px red;
        
        border-radius : 20px;		/* 둥근 모서리 */
    }
</style>

 

● margin, padding

 - 여백(top, bottom, left, right) 줄 수 있음

 

● content

 - 크기 : height(높이) width(너비)

 

● 단축표기법 : 여백줄때

 - 시계방향 순서(top->right->bottom->left)

  ex ) margin : 10px 20px 30px 40px (top-10px, right-20px, bottom-30px, left-40px)

        margin : 10px 20px (top&bottom-10px, left&right-20px)

<style>
    div {
        margin : 10px 20px;		
        border : solid 5px red;
        padding : 10px 20px 30px 40px;
    }
</style>