div {
width: 200px;
border: 15px solid green;
padding: 20px;
margin: 20px;
}margin과 padding의 위치 속성
box-sizing의 속성
| 속성 | 내용 |
| content-box |
width와 height 속성이 content 영역만 포함 (border, padding, margin 제외) |
| 전체 너비 : width + 2 x （margin 속성 + border 속성 + padding 속성） 전체 높이 : height + 2 x （margin 속성 + border 속성 + padding 속성） |
|
| border-box |
width와 height 속성이 content,border,padding포함 (margin 제외) |
| 전체 너비 : width + 2 x margin 전체 높이 : height + 2 x margin |
border-width 속성
- 테두리의 너비를 지정하는 스타일 속성
Playit
www.w3schools.com
border-style 속성
- 테두리의 형태를 지정하는 속성
Playit
www.w3schools.com
border-radius 속성
- 테두리를 원형으로 지정하는 속성
- 각각의 모서리(top-left, top-right, bottom-right. bottom-left 순서) 의 크기 단위를 지정하여 적용 가능
기타 관련 사항 참고 사이트
CSS Backgrounds and Borders Module Level 3
Abstract This draft contains the features of CSS relating to borders and backgrounds. The main extensions compared to level 2 are borders consisting of images, boxes with multiple backgrounds, boxes with rounded corners and boxes with shadows. CSS is a la
www.w3.org
CSS Backgrounds and Borders Module Level 3
