Front-End Study/HTML+CSS

박스 모델(Box Model)

NewBean 2022. 9. 25. 23:17

박스 모델(Box Model)

1. 박스 모델(Box Model)

 - 박스 형태의 콘텐츠

 - 박스 모델의 구조

    - 실제 콘텐츠 영역

    - 박스와 콘텐츠 사이의 여백인 패딩(padding)

    - 박스의 테두리(border) (border은 따로 정리)

    - 여러 박스 모델 사이의 여백인 마진(margin)

 

2. width, height 속성

 - 콘텐츠 영역의 크기

 - 너비(width), 높이(height)를 설정하여 콘텐츠 영역의 크기를 정함

 - <크기>, <백분율>, auto로 설정 가능