박스 모델로 내가 원하는 영역에 데이터 넣기
박스 여러개로 빈 공간을 꾸민다고 생각하고 <p>태그를 활용해볼게요.
박스와 박스 사이의 간격 → 마진
박스의 두께 → 테두리
박스 크기 → 패딩
박스 물건 → 내용(콘텐츠)
마진
마진 값 설정하기
.p1{
margin: 30px;
}
vs
.p2{
margin-top: 30px;
}
값이 어떻게 다를까?
p1의 경우 전체 부분에 30px씩 마진이 들어가고, p2의 경우 top에만 30px이 들어간다.
.p1{
margin: 30px 50px 20px 10px;
}
시계방향으로 돌아가면서 값이 주어진다. 즉, margin-top=30px; margin-left=50px; margin-bottom=20px; margin-right = 10px; 값 사이의 공백으로 다른 값인 것을 표시해준다.