15. HTML 레이아웃

1. HTML 레이아웃

inline, block 성질을 배웠으니 margin의 값을 하나 더 확인해 보려고 합니다.

div {
  background-color: yellow;
  margin-bottom: 20px;
}
.test1 {
  width: 150px;
}

설명과 같이 block 요소일 때 width 값을 주면 더이상 늘어나지 않게됩니다.

 

이 때 margin에 auto로 설정하면 가로 중앙에 오게 할 수 있습니다.

.center {
  margin: 20px auto;
}

1개 값이 있을 때는 사방 모두 같은 margin을 준다는 의미였고,

4개 값이 있을 때는 위/오/아래/왼 순서로 margin을 준다는 의미였습니다.

 

이렇게 2개의 값만 있을 때의 의미는 첫 번째는 위, 아래의 margin이고

두 번째는 왼, 오른쪽에 주는 margin이라는 뜻입니다.

위의 css를 풀어쓰면 아래와 같습니다.

.center {
  margin-top: 20px;
  margin-right: auto;
  margin-bottom: 20px;
  margin-left: auto;
}