Box Model (박스모델)

box model의 형태

HTML의 모든 요소는 상자 형태를 가진다.

원의 형태로 보여도 개발자 도구로 확인하면 상자 형태임을 알 수 있다.

 

 

<구성요소>

content(내용) : 실제로 정보를 담고 있는 부분 

padding(패딩) : border의 안쪽 여백

border : 경계선, 컨텐츠를 감싸는 테두리

margin : border 밖 여백, 요소와 요소 사이의 간격

 

 

box model과 관련된 프로퍼티

width/height : 컨텐츠 박스의 가로/세로 길이

border : 굵기 / 스타일 / 색상 순으로 작성, 위에만 주기, 아래만 주기와 같이 개별적으로 적용가능

border-radius : 테두리를 둥글게 만듦, border-top-left-radius와 같이 특정 모서리만 적용할 수도 있음

 

 

*속기형 : value는 시계방향으로 적용 - top→right→bottom→left 순   ex)padding : 10px 20px 30px 40px