[HTML] Box 박스 모델 활용 CSS

안녕하세요.

 

오늘은 Box 박스 모델에 대해 알려드리겠습니다.

 

모든 글자, 칸, 이미지 등등 모든 것에는 테두리가 다 존재합니다.

 

F12를 누르고 Elements를 누르면 현재 페이지에서 이뤄지는 코드를 다 볼 수 있습니다.

 

거기서 아무거나 클릭해보고 낮보면

 

이런 모양을 보실 수 있습니다.

 

현재 그 태그에 margin, border, padding 크기를 다 수정할 수 있습니다.

 

<div class="box"> 지금 부캐는 열일중 </div>

margin, padding은 여백이므로 색상이 없습니다.

 

border에는 색상을 넣을 수 있습니다.

 

.box {
	margin: 15px 15px 15px 15px;
    		상단	오른	하단	왼쪽
    }
    margin : 15px 15px;
    		상하	좌우
    margin : 15px;
    		 모든면
    }

.box {
	padding : 15px 15px 15px 15px;
    }

.box {
	border : 15px solid black;
    }

예시였습니다.

 

 

대충 이런 식으로 됩니다.

 

어때요?

 

정말 쉽죠??

 

디테일하게 들어가면 크기를 자세하게 수정할 수 있습니다.

 

아니면 디테일을 원하면

 

.box {
	margin-top: 15px;
    margin-left: 15px;
    margin-right: 15px;
    margin-bottom: 15px;
    }

 

이런 식 표현도 가능합니다.

 

오늘은 여기까지

 

(❁´◡`❁)