CSS 핵심개념(3)

박스 모델

박스모델은 margin -> border -> padding -> content로 이루어져 있다.

1. 다양한 padding, margin 표기법

/* top right bottom left */
padding : 8px; /* 8px 8px 8px 8px */
padding : 16px 8px; /* 16px 8px 16px 8px */
padding : 16px 8px 24px; /* 16px 8px 24px 8px */
padding : 16px 8px 24px 10px; /* 16px 8px 24px 10px */

margin : 8px; /* 8px 8px 8px 8px */
margin : 16px 8px; /* 16px 8px 16px 8px */
margin: 16px 8px 24px; /* 16px 8px 24px 8px */
margin: 16px 8px 24px 10px; /* 16px 8px 24px 10px */

width: 520px; /* 반드시 너비가 정해져 있어야 자동으로 채울 수 있음 */
margin: 16px auto; /* 16px auto 16px auto */

2. border와 border-radius

border : 1px solid #dedede; /* border : 테두리굵기 테두리모양 테두리색깔 */
border-radius : 8px; /* 영역의 모서리 */

• 타원 형태 : border-radius: 50%;
• 알약 형태 : border-radius: 9999px;

3. box-sizing

* {
	box-sizing : border-box; /* border을 기준으로 박스 사이즈 계산 */
}

box-sizing은 최근에는 모든 요소에 추가하는 추세이다. 모든 요소에 추가하려면 요소에 *을 입력하면 된다.

4. overflow

overflow 속성으로는 hidden, auto, scroll이 있다.

• hidden : 넘치는 것 감추기
• auto : 넘치면 스크롤하게 만들기
• scroll : 항상 스크롤하게 만들기

5. 마진 상쇄(세로 마진은 서로 겹친다)

<div id="a">
  a
    <div id="c">
    c
    </div>
</div>
<div id="b">
  b
</div>

#a {
  padding: 10px;
  margin: 30px;
}

#b {
  margin: 20px;
}

#c {
  margin: 40px;
}

이웃하는 요소들끼리 마진 상쇄가 일어나며, 부모-자식 간에도 마진 상쇄가 일어날 수 있다. 만약 부모-자식 간 border 등이 존재한다면 일어나지 않을 수 있다.
=> 코드) #a와 #c는 부모-자식 관계인 <div> 태그들이다. 각각 세로 마진이 30px, 40px인데, #a에 패딩이 있기 때문에 서로 마진이 겹치지 않는다. 그래서 #a의 아래쪽 마진은 30px이 된다. 이걸 #b의 위쪽 마진인 20px과 겹치면 30px이 된다.