BoxModel
박스모델 설정 변경하기
margin, padding
/*예시*/
<head>
<title>Step03_Margin</title>
<style>
/*방법1*/
#mg1{
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
}
/*
방법2
margin: top right bottom left;
*/
#mg2{
margin: 10px 10px 10px 10px;
}
/*
방법3
margin: px;
margin: top/right/bottom/left 가 모두 동일한 값일때
*/
#mg3{
margin: 10px;
}
/*방법1 예시*/
#mg4{
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
}
/*방법2 예시*/
#mg5{
margin: 10px 20px 30px 40px;
}
#mg6{
margin-top: 20px;
margin-right: 40px;
margin-bottom: 20px;
margin-left: 40px;
}
/*
방법 4
top과 bottom의 크기가 똑같고
right와 left의 크기가 똑같을때
margin: top/bottom right/left
*/
#mg7{
margin: 20px 40px;
}
/*
방법5
margin : top right/left bottom
*/
#mg7{
margin: 10px 20px 30px;
}
</style>
</head>
<body>
<button>버튼</button><br/>
<button id="mg1">버튼1</button><br/>
<button id="mg2">버튼2</button><br/>
<button id="mg3">버튼3</button><br/>
<button id="mg4">버튼3</button><br/>
<button id="mg5">버튼3</button>
</body>
border
<style>
.box{
border-width: 5px;/* 경계선의 폭 */
border-style: solid;/* 경계선 스타일 */
border-color: red;/* 경계선 색상 */
}
/* 한줄에 나열하기(순서 상관 없음)*/
.box2{
border: 5px solid blue;
}
.box3{
/* border-width: 10px; 를 풀어서 쓰면 */
border-top-width: 10px;
border-right-width: 10px;
border-bottom-width: 10px;
border-left-width: 10px;
/* border-style: dotted; */
border-top-style: dotted;
border-right-style: dotted;
border-bottom-style: dotted;
border-left-style: dotted;
/* border-color: red;*/
border-top-color: red;
border-right-color: red;
border-bottom-color: red;
border-left-color: red;
}
.box4{
border-width: 10px 20px 30px 10px;
border-style: dotted solid solid dotted;
border-color: red green green red;
}
</style>
margin
1. 위아래의 요소의 margin은 서로 겹쳐지며, 사이즈가 큰 것만 남는다.
'CSS' 카테고리의 다른 글
| 이미 만들어져 있는 css요소를 div에 적용해보기 (0) | 2019.11.19 |
|---|---|
| p 요소 변경하기 (0) | 2019.11.19 |
| 가상클래스 PseudoClass / 가상요소 PseudoElement (0) | 2019.11.19 |
| 속성(Properties)과 값(Value) (0) | 2019.11.19 |
| CSS 선언 / 선택자 (0) | 2019.10.29 |
