margin는 설정한 요소 주변에 있는 요소 사이의 간격을 조절하고자 할 경우에 사용
margin-top , margin-bottom , margin-left , margin-right 등이 있음
margin-top , margin-bottom , margin-left , margin-right 등이 있음
티스토리 뷰
1. 개념
margin - 주변 여백 설정2. 태그
marginhtml5 코드
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<! DOCTYPE html>
<html lang = "kr" >
<head>
<meta charset = "utf-8" >
<title> 키보드와 하루 </title>
</head>
<style>
div
{
width : 100px ;
height : 100px ;
border : 1px solid #000 ;
}
</style>
<body>
1
<div style =' margin-top : 30px ' ></div>
2
<div style =' margin : 30px 50px ' ></div>
3
<div style =' margin : 10px 50px 20px 100px ' ></div>
4
<div style =' margin : 30px ' ></div>
5
<div style =' margin-top : 50px ' ></div>
</body>
</html>
|
결과 화면
코드 설명
1
margin-top: : 30px ;
margin-top은 위에서 간격 조절을 하는 속성입니다.
여기서 30px로 위에서의 간격을 주고 있습니다.
여기서 30px로 위에서의 간격을 주고 있습니다.
2
<margin : 30px 50px ;
margin 이라는 속성을 이용해 좌,우,상,하 모든 여백을 한번에 설정하는 것도 가능합니다.
지금 보시면 30px 50px를 주게 되면 위 , 아래는 30px , 왼쪽 , 오른쪽은 50px로 여백을 주게 됩니다. 그런데 여기서 보시면 여백이 겹치게 되는 부분이 있습니다.
2번 div에서는 아래의 여백이 30px 이고 , 3번의 div경우는 위의 여백이 10px로 설정되었습니다.
이러한 경우에 30px + 10px = 40px 로 나올 것 같지만 실제로는 30px로 나왔습니다.
이 경우를 중첩이라고 하는데 이렇게 margin이 중첩이 될 경우에는 큰 여백의 값만 반영이 됩니다.
지금 보시면 30px 50px를 주게 되면 위 , 아래는 30px , 왼쪽 , 오른쪽은 50px로 여백을 주게 됩니다. 그런데 여기서 보시면 여백이 겹치게 되는 부분이 있습니다.
2번 div에서는 아래의 여백이 30px 이고 , 3번의 div경우는 위의 여백이 10px로 설정되었습니다.
이러한 경우에 30px + 10px = 40px 로 나올 것 같지만 실제로는 30px로 나왔습니다.
이 경우를 중첩이라고 하는데 이렇게 margin이 중첩이 될 경우에는 큰 여백의 값만 반영이 됩니다.
3
margin : 10px 50px 20px 100px ;
margin로 값을 4개를 입력하게 되면 위를 기준으로 시계방향으로 여백을 주게 됩니다.
즉 , 위 → 오른쪽 → 아래 → 왼쪽으로 해당하는 값만큼 여백을 주게 되는 것입니다.
그래서 위는 10px , 오른쪽은 50px , 아래는 20px , 왼쪽은 100px의 여백이 생기게 됩니다.
그런데 2번에서 설명했던 것처럼 마진 중첩이 생기는 영역에는 큰 값이 반영되게 됩니다.
위에서와 같이 그래서 지금 3번의 div는 위 , 아래는 다른 요소와 겹칠 때 값이 작아서 반영이 되지 않게 됩니다.
즉 , 위 → 오른쪽 → 아래 → 왼쪽으로 해당하는 값만큼 여백을 주게 되는 것입니다.
그래서 위는 10px , 오른쪽은 50px , 아래는 20px , 왼쪽은 100px의 여백이 생기게 됩니다.
그런데 2번에서 설명했던 것처럼 마진 중첩이 생기는 영역에는 큰 값이 반영되게 됩니다.
위에서와 같이 그래서 지금 3번의 div는 위 , 아래는 다른 요소와 겹칠 때 값이 작아서 반영이 되지 않게 됩니다.
4
margin : 30px ;
margin을 30px로 주게 되면 상 , 하 , 좌 , 우 모든 30px의 여백이 생기게 됩니다. 하지만 아래 여백은 5번과 겹치게 되면서 값이 작아 5번이 반영되게 됩니다.
5
margin-top : 50px ;
여기서는 위 여백을 50px를 주게 되었는데 4번에서 아래의 여백 20px와 겹치게 됩니다.
하지만 50px의 값이 크기 때문에 현재 50px의 여백이 반영해 주고 있음을 알 수 있습니다.
하지만 50px의 값이 크기 때문에 현재 50px의 여백이 반영해 주고 있음을 알 수 있습니다.
'[개발]프로그래밍 > css3' 카테고리의 다른 글
| [css3] box-sizing - 박스 너비 기준 (0) | 2021.05.06 |
|---|---|
| [css3] padding - 내용과 테두리 사이의 여백 설정 (0) | 2021.05.04 |
| [css3] border-shadow - 그림자 효과 내기 (0) | 2021.04.30 |
| [css3] border-radius - 모서리 둥글게 만드는 속성 (0) | 2021.04.29 |
| [css3] border - 테두리 스타일 묶어 지정 (0) | 2021.04.28 |
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday