※ 스타일 시트 속성
1. 박스 속성
2. 글자 속성
3. 위치 속성
4. 배경 속성
★박스속성: width, height, margin, padding, border
★CSS3에서 추가된 박스 속성: max-width, min-width, max-height, min-height, border-radius, box-shadow, box-sizing
★박스 유형 변경 속성: display:inline/inline-block/block/none/flex
★박스 모델(박스 레이아웃)에서 중요한 것은 박스의 width 속성이다. 박스의 너비는 박스의 width + 박스의 가로 padding 값 + 박스의 border 값이다. 박스의 너비 값에 박스의 padding 값과 박스의 border 값을 포함시킬려면 box-sizing:border-box를 적용하면 된다.★
★display:inline-block과 float:left의 차이점
1. 박스와 박스 사이에 여백을 발생시키는 부분
display:inline-block은 여백을 발생시킨다.
float:left는 여백을 발생시키지 않는다.
2. 박스의 위 아래 마진(박스 바깥쪽 여백) 적용 부분
display:inline-block은 적용이 안된다.
float:left는 적용이 잘된다.
3. 박스의 부유(위로 뜬다) 여부
display:inline-block은 부유 안한다.
float:left는 부유한다.
★width 속성은 박스의 너비값을 지정한다.(단위: px(고정:데스크탑), %(가변:모바일), vw(가변)) width의 기본값은 블록형 박스는 100%, 인라인형 박스는 0이다.
max-width 속성으로 고정 크기를 지정하면 지정한 크기보다 더 커지지 않는다.(ex. width:75%; max-width:1400px; > 브라우저의 75%에 해당하는 너비값이 1400px를 초과하더라도 1400px보다 커지지 않는다.)
★height 속성은 박스의 높이값을 지정한다.(단위: px(고정:데스크탑, 모바일), vh(가변: 100vh)) height의 기본값은 0이다.
★margin 속성: 박스의 바깥쪽 여백을 지정한다.
margin:50px - 위, 오른쪽, 아래, 왼쪽의 여백을 50px로 지정
margin:50px 30px - 위/아래 여백은 50px, 좌/우 여백은 30px로 지정
margin:50px 30px 40px - 위의 여백은 50px, 좌/우 여백은 30px, 아래쪽 여백은 40px로 지정
margin:50px 30px 40px 20px - 위의 여백은 50px, 오른쪽 여백은 30px, 아래쪽 여백은 40px, 왼쪽 여백은 20px로 지정
★속성 값이 양수와 음수가 있다.
margin-top:50px; - 양수이면 박스가 아래로 이동, 음수이면 박스가 위로 올라간다.
margin-right:30px; - 양수이면 박스가 왼쪽으로 이동, 음수이면 박스가 오른쪽으로 이동한다.
margin-bottom:40px; - 양수이면 박스가 위로 이동, 음수이면 박스가 아래로 이동한다.
margin-left:20px; - 양수이면 박스가 오른쪽으로 이동, 음수이면 박스가 왼쪽으로 이동한다.
★padding 속성: 박스의 안쪽 여백을 지정한다.
- 박스가 저장한 콘텐츠가 이동한다.
★border 속성: 첫번째 값 테두리 두께(px), 두번째 값 테두리 스타일(dotted/dashed/solid), 세번째 값 테두리 색상
★border-radius: 박스의 모서리를 둥글게 처리한다.
border-radius:10px; - 박스의 모든 모서리에 적용한다.(O)
border-radius:20px 10px; - 왼쪽상단/오른쪽하단, 오른쪽상단/왼쪽하단(가끔사용)
border-radius:20px 15px 10px 5px; - 왼쪽상단, 오른쪽상단,오른쪽하단, 왼쪽하단(X)
★box-shadow 속성: 박스에 그림자 효과를 적용한다.
box-shadow:키워드 값1 값2 값3 값4;
값1: 오른쪽 그림자 크기
값2: 아래쪽 그림자 크기
값3: 번짐 크기
값4: 그림자 색상
키워드: inset(박스 내부 그림자 효과를 지정)
외부 그림자 효과:값1과 값2를 0으로 처리
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>박스 속성</title>
<style>
* {margin:0; padding:0; box-sizing:border-box;}
.box1 {
width:300px; height:300px; padding:100px;
background:orange;
}
.box2 {height:300px; background:seagreen;}
.box2 div {
float:left; /*박스를 좌에서 우로 배치, 박스가 부유*/
width:20%; height:200px; margin-left:5%; margin-top:50px;
background:sandybrown;
}
.clear {clear:both;} /*박스가 부유하면 아래에 있는 박스들이 위로 올라오는 현상이 발생하므로 clear:both로 벽을 형성하여 올라오지 못하도록 막는다.*/
.left {
float:left; /* 박스를 좌에서 우로 배치*/
width:50%; height:300px;
background:orange;
}
.right {
float:right; /* 박스를 우에서 좌로 배치*/
width:50%; height:300px;
background:brown;
}
.box3 { /*flex container*/
display:flex;
justify-content:space-between; /*flex item의 수평정렬*/
align-items:center; /*flex item의 수직 정렬*/
height:200px; background:olive;
}
.box3 div { /*flex item*/
width:20%; height:150px;
background:violet;
}
.ma-1, .ma-2 { /*박스의 공통스타일시트 적용*/
width:250px; height:250px;
background:rgba(165,20,135,0.3); border:5px dotted #06F;
}
.ma-2 {margin-top:-100px;} /*매우 중요*/
</style>
</head>
<body>
<h3>box-sizing:border-box</h3>
<div class="box1">box01</div>
<h3>float:left</h3>
<div class="box2">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="clear"></div>
<div class="left"></div>
<div class="right"></div>
<div class="clear"></div>
<h3>flex box</h3>
<div class="box3"><!-- 플랙스 컨테이너(flex container) -->
<div></div><!-- 플랙스 아이템(flex item) -->
<div></div>
<div></div>
<div></div>
</div>
<h3>margin</h3>
<div class="ma-1"></div>
<div class="ma-2"></div>
</body>
</html>
결과
