<!DOCTYPE html>
<html lang="en">
<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>
/*
- 블록 태그는 width, height을 조절할 수 있다
- 인라인 태그는 width, height을 조절할 수 없다
- 블록에서 적용되는 margin,padding은
인라인에서 적용되는 margin,padding과 약간 다르다.
- 인라인에서 margin-top/margin-bottom 적용 안됨
- 인라인에서 padding-top/padding-bottom은 컨텐츠를 기준으로 위로/아래로 여백을 주기 때문에 컨텐츠의 위치가 변하지 않음
- padding : 여백, 테두리 안의 여백
- padding-A
- A에 들어갈 수 있는 것: top, right, bottom, left
- padding : 위, 오른쪽, 아래, 왼쪽 순으로 여백을 설정 (12시기준 시계방향)
- margin : 여백, 테두리 밖의 여백
- margin-A
- A : top, right, bottom, left
- margin : 위, 오른쪽, 아래, 왼쪽 순으로 여백을 설정
- 두 요소의 margin이 겹치면(=요소 A밑에 요소B가 있고, 요소A의 margin-bottom이 있고
요소B에 margin-top이 있는 경우) margin의 새로겹침?이 일어나서 두 margin 중 큰 값으로
적용됨.
- background은 컨텐츠 + padding
- border : 테두리
- border-A-B
- A : top, right, bottom, left
- B : width(두께), style(선종류), color(색상)
*solid는 실선을 말함
- border-A : A방향의 width, style, color를 설정
- border-B : 위쪽, 오른쪽, 아래, 왼쪽 순으로 B를 설정
- border : 위쪽 테두리, 오른쪽 테두리, 아래쪽 테두리, 왼쪽 테두리를 설정
- 예시
- 모든 방향의 테두리, 스타일이 다 다른 경우
border : 1px solid black, 1px sold red, 1px solid bule, 1px solid green, ..
- 위 아래는 다르지만 좌우가 대칭인 경우
1px solid black,
1px solid red, (오른쪽값만쓰면돼)
1px solid blue
- 위 아래의 테두리가 같고, 좌우 테두리가 같은 경우
1px solid black, 1px solid red
- 모든 테두리가 같은 경우
border : 1x solid black
*/
.div-box{
background-color: yellow;
margin-top: 50px;
margin-bottom: 50px;
margin-left: 50px;
padding-top: 40px;
padding-left: 50px;
padding-bottom: 10px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: blue;
}
.span-box{
background-color: green;
color: white;
margin-top: 50px; /* margin-top은 적용이 안됨, left는 적용됨*/
margin-left: 50px;
padding-top: 20px;
padding-left: 50px;
margin-bottom: 50px; /* 적용안됨*/
padding-bottom: 5px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: red;
}
</style>
</head>
<body>
<div class="div-box">박스1</div>
<div class="div-box">박스1</div>
<span class="span-box">박스2</span>
<div class="div-box">박스1</div>
</body>
</html>