박스 모델 ( BOX MODEL )

모든 웹사이트들은 기본적으로 박스모델로 이루어져있다.

박스 모델은 이렇게 content 부터~ margin 까지 구성되어 있따.

1. content : 보통은 내용이 들어가는 부분, content 의 가로와 세로는 width, height로 나타낼수 있다.

2. Padding : content와 border사이의 공간, 내부여백
   밑에 부분과 같이 top,bottom,left,right 각각 부여 할수 있고, 축약형으로 top과 bottom을 한번에 left와 right를 한번에 나타낼수도 있다.

{
padding-top: 50px;
padding-bottom : 30px;
padding-left : 20px;
padding-right : 100px;
padding : 50px 120px;
padding : 100px;
}

3. Boreder : 요소의 테두리를 나타낸다.축약형으로 Border의 두께, 색깔, 패턴을 명시해 줘야한다. Border radius는 테두리 가장자리 4귀퉁이를 라운드 줄 수있다.

{
border : 1px black solid
border-radius : 5px;

}

4. margin : 요소(content~border)에서 요소 사이의 간격

{
marign-top: 50px;
marign-bottom : 30px;
marign-left : 20px;
marign-right : 100px;
marign : 50px 120px;
marign : 100px;
}