728x90
박스 모델에 대해서 알아보면 먼저 F12를 통하여 해당 영역의 크기를 볼 수가 있습니다.
예를들면
이런식으로 내부에 크기가 있고 그 위에 패딩 보더 마진 이런식으로 보여지는것을 통틀어서 박스모델이라고 합니다.
코드의 주석과 내용을 보고 결과 화면을 보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>박스모델</title>
<style>
/*
박스모델
- 한 요소가 박스의 모양을 갖는 모델
- width, height, padding, border, margin 로 구성
- 더 정확히 말하면,
width, height, padding-top, padding-right, padding-bottom, padding-left,
border-top, border-right, border-bottom, border-left,
margin-top, margin-right, margin-bottom, margin-left 14가지 속성의 합
- auto 값, 음수 값 표현
*/
#box {
/*
width, height 값은 기본 값이 auto 다.
(블록레벨의 width 가 auto 면 부모의 width 를 따름
height 가 auto 면 자식들 높이의 합
기본 뒷 배경 border, padding, content(width, height)
background-clip 으로 변경 가능
*/
width: 100px;
height: 100px;
background-color: #FFA500;
background-clip: content-box;
border-top: 50px solid #00F123;
border-right: 50px solid #DDFF2F;
border-left: 50px solid #DDFF2F;
border-bottom: 50px solid #00F123;
padding : 50px;
margin : 50px;
border-radius: 250px;
text-align: center;
line-height: 100px;
}
#test {
width: 100px;
height: 100px;
background: lightcoral;
}
div {
float: left;
}
</style>
</head>
<body>
<div id="box">Hello</div>
<div id="test"></div>
</body>
</html>
해당 코드를 보면 width 값과 height 값을 지정해주었습니다.
주석 설명과 같이 보더와 패딩 마진에는 각 영역 시계방향부터 해서 top , right, bottom, left 영역이 있습니다.
해당 코드를 바탕으로 결과를 보면
이런 식의 모델이 완성 됩니다. 웹 페이지를 구현하기 위해서 어떤 요소의 크기를 지정하려면 박스모델의 크기를 정확히 아셔야 합니다.
반응형