안녕하세요, 코린이의 코딩 학습기 채니 입니다.
개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다.
Box Model
구조
content
padding (content와 border 사이의 여백)
border (경계영역)
margin (border와 다른 요소 사이의 여백)
HTML 코드
<div class="box">
<span>안녕</span>
</div>
CSS 코드
<style>
.box {
width: 300px;
height: 300px;
background-color: tomato;
}
</style>
.box의 크기는 지정한 300 x 300으로 확인 됩니다.
border
border: 1px solid #000;
border를 지정하고 확인하니 .box의 크기는 300 x 300이 아닌 302 x 302가 되었습니다.
기존 크기 300 x 300 + 양쪽 1pc씩의 border = 302 x 302가 된 것이죠.
padding
padding: 5px;
/* padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding: 5px 5px 5px 5px 모두 같은 표현*/
이번에는 .box의 크기가 312 x 312가 되었습니다.
마찬가지로 기존 크기 300 x 300 + 양쪽 1px씩의 border + 양쪽 5px씩의 padding = 312 x 312가 된 것이죠.
margin
margin: 10px;
그에 비해 margin의 값은 .box의 크기에 대하여 영향을 주지 않는다는 것을 알 수 있습니다.
☞ margin의 비밀
① 개발도구에서 margin을 꺼보면, 브라우저의 경계선과 딱 붙어있진 않은 것을 확인할 수 있습니다.
그 이유는 기본적으로 <body>태그에 margin이 잡혀있기 때문입니다.
user agent stylesheet → 크롬(브라우저)에서 설정한 값으로 기본적으로 <body>태그에 대해 margin이 8px 적용되어있는 것을 확인할 수 있습니다.
② margin-collapse 현상 : 인접한 두 요소의 margin이 다른 경우, 큰 쪽의 margin 값을 적용
개발도구에서 10px로 준 margin을 껐다 켜봤을 때, 왼쪽은 여백이 생기지만 위쪽으로는 여백이 생기지 않는 것을 확인할 수 있습니다.
사진을 비교해보면 확실히 왼쪽 여백은 생겼지만, 위쪽으로는 여백이 생기지 않았습니다.
이에 대한 이유는 h1(Box Model) 태그에 있습니다.
h1 태그에 margin: 21.44px 0으로 지정이 되어있으므로 위아래로 21.44px의 margin이 적용되어있습니다.
<h1>은 21.44px의 마진을, .box는 10px의 마진을 두고 싶어하는데, 이 때 길이가 더 긴 쪽의 margin 값을 우선시 합니다.
따라서 <h1>의 마진을 우선하여 .box의 10px에 대한 마진은 <h1>의 마진에 겹쳐버리게 되어 무시된 것 같이 보이는 것이죠.
(.box의 margin을 30px로 하면 .box의 margin을 우선시)
inline 요소
.box span {
width: 200px;
height: 200px;
padding: 10px;
margin: 20px;
}
inline 요소는 padding, margin은 적용이 되지만 width/height 속성이 적용되지 않는 것을 확인할 수 있습니다.
HTML 코드
<div class="square"></div>
CSS 코드
box-shadow
가로offset 세로offset blur(번짐정도) spread(그림자크기) color
<style>
.square {
width: 300px;
height: 300px;
box-shadow: 5px 5px 10px 0 lightgray;
}
.square:hover {
box-shadow: 5px 5px 10px 3px gray;
}
</style>
spread를 30px로 지정 시
px이 커질 수록 그림자의 크기가 커지는 것을 확인할 수 있습니다.
