html의 모든 요소는 box로 구성
content
가로: with,세로:height
padding
안쪽 여백, content와 border 사이
border
굵기, 스타일, 색상을 정해야함
border: 1px solid #000
border:none 사용하지않음
border-radius: 4px 테두리를 둥글게 만들어줌
border의 특정부분만 깎고 싶을때
border-top-left-radius: 10px
border-botton-right-radius: 5px
margin
바깥 여백, 요소와 요소 사이를 만들때
margin-bottom: 40px 밑에 여백 크기
속기형
top right bottom left: 시계방향으로 표현
top=bottom, right=left로 대체가능
ex)
10px 20px 40px
top:10 right,left:20px bottom:40px
div class="box"
.box = box라는 클래스를 표현
box-sizing
width와 height에서 각각 top과 left 값을 뺀만큼 나옴
box-sizing: border-box
border까지의 사이즈 고려
- { box-sizing: border-box; }
border box 기준으로 선언
block 공간차지
따로 width를 선언하지 않은 경우, width=부모의 content-box의 100%
width를 선언한 경우, 남은 공간은 margin으로 자동채움
따로 부모의 height를 선언하지 않을 경우, 자식 요소의 height의 합 = 부모의 height
Inline 흐름,
span, a, strong 태그는 inline이 기본속성
줄이 넘어가도 자동배치
block & inline
block과 inline의 장점이 모임
