Hi

속성 값 설명 content-box width 속성 값을 콘텐츠 영역 너비 값으로 사용 (기본값) border-box width 속성 값을 테두리까지 포함한 박스 모델 전체 너비 값으로 사용 box-sizing = "content-box" box-sizing = "border-box"

콘텐츠 영역과 테두리 사이 여백 설정하기 padding : 테두리 안쪽의 여백 padding-top: | | autopadding-right: | | autopadding-bottom: | | autopadding-left: | | autopadding: | | auto

요소 주변 여백 설정하기 마진(margin) : 현재 요소 주변의 여백 margin-top: | | automargin-right: | | automargin-bottom: | | automargin-left: | | automargin: | | auto

선택한 요소에 그림자 효과 내기 box-shadow : none | [, ]*; = inset 수평거리와 수직거리는 필수, 다른건 옵션. 속성 값 설명 양수 값: 요소의 오른쪽, 음수 값: 요소의 왼쪽 에 그림자 만듬 양수 값: 요소의 아래쪽, 음수 값: 요소의 위쪽 에 그림자 만듬 기본 값 0 : 진한 그림자. 값이 커질수록 부드러운 그림자 양수 값: 모든 방향으로 퍼져 나감(박스보다 크게 표시) , 음수 값: 모든 방향으로 축소되어 보임. inset 안쪽 그림자로 그림 출처 - Doit! html5 + css3 웹표준의 정석

박스 모서리 둥글게 만들기 border-top-left-radius: | border-top-right-radius: | border-bottom-right-radius: | border-bottom-left-radius: | border-radius: | div { width: 300px; /* 너비 */ height: 200px; /* 높이 */ margin : 20px; /* 영역간 마진 */ display: inline-block; /* 가로로 배치 */ } .round { border:2px solid red; /* 2px짜리 빨강 실선 */ border-radius:20px; /* 모서리 20px 만큼 라운딩 */ } 타원 형태로 둥글게 만들기 border-top-left-radius: bor..

테두리 스타일과 두께, 색상 등의 속성들을 묶어 표현할 수 있다. border-top: | | border-right: | | border-bottom: | | border-left: | | border: | | 박스 모델 박스 모델은 실제 콘텐츠 영역, 박스와 콘텐츠 영역 사이의 여백인 패딩(padding), 박스의 테두리(border), 그리고 여러 박스 모델 간의 여백인 마진(margin) 등의 요소로 구성되어 있습니다.