박스모델
요소가 표현하는 영역 또는 범위를 개념화하는 것
경계선 바깥 여백 : margin
경계선 안쪽 여백 : padding
Content의 폭 : width
Content의 높이 : height
경계선 바깥 여백(margin) 속성
경계선 바깥 위쪽 여백 (margin) 지정 : margin-top
경계선 바깥 오른쪽 여백 (margin) 지정 : margin-right
경계선 바깥 아래쪽 여백 (margin) 지정 : margin-bottom
경계선 바깥 왼쪽 여백 (margin) 지정 : margin-left
경계선 한꺼번에 바깥 여백(margin) 지정 : margin
eg
margin:10px 20px; => 위쪽과 아래쪽은 10px, 왼쪽과 오른쪽은 20px 외부여백적용
margin collapse(겹친 현상)
인접한 margin값이 둘 중 더 큰 값으로 통일되는 것. 첫 번째 요소에는 margin 값이 아래쪽에 20px이 적용됐고, 두번 째 요소에는 margin 값이 위쪽으로 30px 적용되었으니 더 큰 값을 가진 30px로 적용되는 것.
border 속성
border 속성을 사용하면 요소에 테두리(경계선)를 줄 수 있음.
선의 굵기와 스타일, 그리고 색을 다양한 값으로 줄 수 있음.
box-sizing 속성은 너비와 높이 값에 padding과
border 값을 포함시킬지를 결정
border-radius 속성은 모서리를 둥글게 하는데 사용
border-width 속성
테두리 굵기를 지정한다.
border-style 속성
테두리 모양을 지정한다.
eg
border:<border-width><border-style><color>;
경계선 안쪽 여백(padding) 속성
경계선 안 위쪽 여백 (padding) 지정 : padding-top
경계선 안 오른쪽 여백 (padding) 지정 : padding-right
경계선 안 아래쪽 여백 (padding) 지정 : padding-bottom
경계선 안 왼쪽 여백 (padding) 지정 : padding-left
경계선 한꺼번에 안쪽 여백(padding) 지정 : padding
border 영역보다 안쪽에 있으며 요소의 내부 여백을 담당한다.
단축표현
eg
margin-top : 10px;
margin-right : 20px;
margin-bottom : 30px;
margin-left : 40px;
margin : 10px 20px 30px 40px;
border-width :10px;
border-style: solid;
border-color: lightcoral;
border: 10px solid lightcoral;
eg
margin에서 auto 값은 너비가 지정된 블록 요소의
가로 방향에서 남은 공간을 채운다. 컨텐츠 섹션을 가운데로 배치하는데 주로 사용되며 오늘날에는 배율 flex방식으로 많이 대체되었다고 함
inline-block 요소의 경우 부모 요소의 text-align을 center로!
box-shadow
박스 요소에 그림자를 줄 수 있음.
smooth shadow 참고 사이트
