My Notes

박스 모델(Box Model)

• margin : 바깥 여백

margin: 0 0 0 0;	/* 상 우 하 좌 */
margin: 0 0 0;		/* 상 좌우 하 */
margin: 0 0;		/* 상하 좌우 */
margin: 0;		/* 상하좌우 */

• padding : 안쪽 여백

padding: 0 0 0 0;	/* 상 우 하 좌 */
padding: 0 0 0;		/* 상 좌우 하 */
padding: 0 0;		/* 상하 좌우 */
padding: 0;		/* 상하좌우 */

• boder : 박스 테두리
  • border-style 속성 : 박스 테두리의 모양
  • boder-width 속성 : 박스 테두리의 굵기 
  • border-color 속성 : 박스 테두리의 색상

border-style:	dotted;	/* 점 */
            	dashed;	/* 점선 */
		solid;	/* 실선 */
            	double;	/* 두 줄 */

boder-width:	thin;	/* 얇게 */
		medium;	/* 중간 */
		thick;	/* 두껍게 */

/* 테두리 방향별 지정 */
border-top-속성: 값;
border-right-속성: 값; 
border-bottom-속성: 값;
border-left-속성: 값;

/* 테두리 일괄 지정 */
border: style width color;

• border-radius 속성 : 모서리 둥글게 처리

p {
	font-family: "돋움";
	font-size: 12px;
	line-height: 20px;	/* 줄간격 */
}
div.rounded {
	background-color: #666;
	color: #fff;
	width: 250px;
	padding: 10px;
	border-radius: 10px;	/* 모서리 둥글게 */
}

• border-radius 속성을 이용하여 원 그리기

.circle1 {
	background-color: #C60;
	width: 200px;
	height: 200px;
	border-radius: 100px;  /* 최대값으로 지정 */
}
.circle2 {
	background-color: #fff;
	border: 3px #a72525 solid;
	width: 200px;
	height: 200px;
	border-radius: 100px;   /* 최대값으로 지정 */
}

• box-shadow 속성 : 그림자 효과

#shadowed {
	box-shadow: 5px 5px 10px #000;  /* x축 y축 블러 색상 */
}