728x90
반응형
** 영상으로 보고 싶은 분은 아래 영상을 클릭해주세요.
https://www.youtube.com/watch?v=a930mdh1jGs
https://www.youtube.com/watch?v=Gx6HsqJJwe0
1. 속성정리
| 속성값 | 설명 | |
| padding | 테두리기준 | 테두리 안쪽의 여백 |
| 관계기준 | 부모요소가 자손요소와의 간격을 조절하기 위해 여백 처리 | |
| 배경색기준 (배경이미지포함) |
배경색이나 배경이미지가 적용됨 | |
| margin | 테두리기준 | 테두리 바깥쪽 여백 |
| 관계기준 | 동위선택자요소들간의 간격을 조절하기 위해 여백 처리 | |
| 배경색기준 (배경이미지포함) |
배경색이나 배경이미지가 적용되지 않음 | |
| 여백속성 기록법 (margin도 동일) |
padding: 20px; | 좌우상하 모두 여백이 20px처리 |
| padding: 20px 50px; | 앞상하 뒷좌우, 상하가 20px, 좌우가 50px적용 | |
| padding: 20px 50px 30px; | 상이 20px, 좌우가 50px, 하가 30px 적용 | |
| padding: 20px 40px 60px 80px; | 상을 기준으로 시계방향 상-20px, 우-40px, 하-60px, 좌-80px |
|
| 특정위치 지정 (margin도 동일) |
padding-top: 20px; | 위쪽 여백을 20px처리 |
| padding-right: 20px; | 오른쪽 여백을 20px처리 | |
| padding-bottom: 20px; | 아래쪽 여백을 20px처리 | |
| padding-left: 20px; | 왼쪽 여백을 20px처리 | |
2. 여백의 차이1 : 테두리와 배경색 관계
1) 코드 뷰
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS3 - display속성</title>
<style>
*{ padding: 0; margin: 0; }
div{
width: 100px; height: 100px; border: 5px solid black;
background-color: orange;
}
.box01{ margin: 20px; }
.box02{ padding: 20px; }
</style>
</head>
<body>
<div class="box01">박스1</div>
<div class="box02">박스2</div>
</body>
</html>
2) 코드 완성뷰
3. 여백의 차이2 : 관계차이
1) 코드 뷰
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS3 - display속성</title>
<style>
*{ padding: 0; margin: 0; }
ul{
width: 300px; background-color: orange;
padding-top: 20px; padding-bottom: 20px;
}
li{ margin-bottom: 20px; }
</style>
</head>
<body>
<ul>
<li>리스트태그</li>
<li>리스트태그</li>
<li>리스트태그</li>
<li>리스트태그</li>
</ul>
</body>
</html>
2) 코드 완성뷰
4. 여백의 기록법
1) 코드 뷰
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS3 - display속성</title>
<style>
*{ padding: 0; margin: 0; }
div{
width: 100px; height: 100px; margin-bottom: 20px;
background-color: orange;
}
p{ width: 100%; height: 100%; background-color: aqua; }
.box01{ padding: 20px; }
.box02{ padding: 20px 50px; }
.box03{ padding: 20px 40px 10px; }
.box04{ padding: 20px 40px 60px 10px; }
.box05{ padding-top: 20px; }
</style>
</head>
<body>
<div class="box01"><p>좌우상하 여백 동일</p></div>
<div class="box02"><p>앞상하 뒷좌우</p></div>
<div class="box03"><p>상 좌우 하</p></div>
<div class="box04"><p>상 우 하 좌</p></div>
<div class="box05"><p>상만 지정</p></div>
</body>
</html>
2) 코드 완성뷰
5. box-sizing: padding과 border의 수치를 width와 height영역 안으로 설정할지 밖으로 설정하지 정하는 속성
| 속성값 | 설명 |
| content-box | padding과 border를 width와 height의 바깥쪽으로 처리하여 영역이 넓어짐(기본값) |
| border-box | padding과 border를 width와 height의 안쪽으로 처리하여 영역이 달라지지 않음 |
1) 코드 뷰
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS3 - display속성</title>
<style>
*{ padding: 0; margin: 0; }
div{
width: 100px; height: 100px;
background-color: orange; margin-bottom: 20px;
}
.box02{
padding: 20px; border: 5px solid black;
box-sizing: content-box;
}
.box03{
padding: 20px; border: 5px solid black;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box01">박스1</div>
<div class="box02">content-box</div>
<div class="box03">border-box</div>
</body>
</html>
2) 코드 완성뷰
6. 블록요소를 부모영역의 가운데 오기 : margin의 auto처리
- 특히, body태그의 자손인 경우 모니터마다 해상도가 다르게 때문에 좌우 여백을 auto로 처리
1) 코드 뷰
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS3 - display속성</title>
<style>
*{ padding: 0; margin: 0; }
div{
width: 300px; height: 200px;
background-color: orange;
margin: 0 auto;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
2) 코드 완성뷰
728x90
반응형
'웹언어 > CSS3' 카테고리의 다른 글
| [CSS3강좌] 13강 위치속성(position) (0) | 2020.05.06 |
|---|---|
| [CSS3강좌] 12강 float와 clear속성 (0) | 2020.04.29 |
| [CSS3강좌] 10강 요소(Element)와 display속성 (0) | 2020.04.28 |
| [CSS3강좌] 9강 CSS 영역(width/height/overflow)속성 (0) | 2020.04.27 |
| [CSS3강좌] 8강 CSS border(테두리)속성 (0) | 2020.04.27 |
