2. CSS 박스모델

1. Box Model

CSS에서 element(태그)가 박스 형태를 가지는 것을 박스모델이라고 부른다. 박스모델에는 아래의 그림과 같이 4가지 속성을 가진다.

 

• content : 글이나 이미지 등의 실제 내용
• padding : border 안쪽에 위치한 content의 내부 여백
• border : content와 padding을 감싸는 테두리, 테두리의 두께
• margin : border 바깥에 위치하는 content의 외부 여백

 

2. width / height 속성

content의 너비/ 높이를 지정할 수 있게 해주며 content부분만을 대상으로 한다.

<style>
	div {
      width:100px;
      height:100px;
    }
</style>

 

3. margin / padding 속성

content의 top, right, left, bottom 방향을 지정할 수 있다.

<style>
	div {
      margin-top: 10px;
      margin-right: 10px;
      margin-left: 10px;
      margin-bottom: 10px;
      
      padding-top: 10px;
      padding-right: 10px;
      padding-left: 10px;
      padding-bottom: 10px;
    }
</style>

 

※ margin 속성을 auto로 설정하면 해당 content를 화면의 중앙에 둘 수 있다.

<style>
	div {
	  width: 100px;    
      border: 2px solid blue;
      margin: 0 auto;
    }
</style>

 

 

4. border 속성

4.1 border-style

테두리 선의 스타일을 지정한다.

• border-style: dotted
• border-style: dashed
• border-style: solid
• border-style: double
• border-style: none

 

4.2 border-width

테두리의 두께를 지정한다.

• border-width: thin
• border-width: medium
• border-width: thick
• border-width: 10px

 

4.3 border- color

테두리의 색깔을 지정한다.

• border-color: red
• border-color: red orange yellow green(top, right, bottom, left 순서)