은학의 코딩 일기장
Css (Box) 본문
BoxModel
weight = 가로
height = 세로
padding = 안쪽 여백
border = 테두리 (크기 형태 색깔 3개다 정해줘야됨!!!!)
margin = 바깥 여백
Box-sizing
css의 boxmodel의 box-sizing 은 content-box으로 지정되는데
이렇게 되면 padding값을 바꿀 때 Box 자체의 크기까지 변경되어 좀 귀찮아질 수 있음
그러므로 초기설정 때
*{
box-sizing = border-box;
}
로 해주면 편함
Block ( 길막)
다른 박스가 자신의 라인에 침범 못하고 다음 줄로 넘어감
따로 width를 설정하지 않은경우 width = 부모의 content-box의 100%
따로 width를 설정한 경우 남은 공간은 margin으로 자동으로 채움
box모델의 모든 특성( padding margin weight height 등) 다 쓸 수 있음
inline (흐름)
한글과컴퓨터 쓰듯이 주어진 라인 다 쓰면 다음 라인으로 자동으로 넘어감(흐름!!)
## weight height padding-top padding-bottom margin-top margin-bottom border-top border-bottom 사용 못함!!!!
inline-block(짬뽕)
block기능과 inline기능을 둘다 사용가능하게 해줌!
'css' 카테고리의 다른 글
CSS (Selector) (0) | 2023.01.05 |
---|