[HTML+CSS] 박스 속성

박스 속성은 web page layout을 구성하는데 있어서 매우 중요한 요소 입니다. 

 

박스 속성

 

 

1. width 속성과 height 속성

 

width속성 height 속성은 글자를 감싸는 영역의 크기를 지정하는 속성이다. 

 

 

ex) 

See the Pen by yeojinho (@yeojinho) on CodePen.

 

2. margin 속성과 padding 속성

 

★ 개인적으로 아직도 슬때마다 헷갈리는 속성이기도 한부분이다

 

margin 속성은 마진의 너비를 지정하는 속성, padding은 패딩의 너비 속성. 이라고 보시면 될 것 같습니다. 

 

ex)

See the Pen by yeojinho (@yeojinho) on CodePen.

 

또한 margin의 중요한 속성으로는  "각각의 너비를 별도로 지정 할 수 있다는 것 입니다.  "

 

 

margin: [margin-top] [margin-right][margin-bottom][margin-left]

 

 

 

See the Pen by yeojinho (@yeojinho) on CodePen.

 

 

3 .box - sizing 속성

 

width 속성 그리고 height 속성은 글자를 감싸는 영역의 크기를 지정하는 스타일 속성이며 box-sizing속성은 이런한 것을 변경할 수 있는 속성임.