[CSS] 배치 _ BLOCK type의 수평 정렬 ( h1~h6, p, div)

 

CSS Box Model 

BLOCK type의 수평정렬

block은 항상 margin이 꽉 차있기 때문에 margin을 통해서 수평정렬을 진행한다. 

 

Q. 문제 1 (BLOCK의 수평정렬 _ h1~h6, p, div )

파란색 박스를 가운데로 옮겨보세요. 

---

 

이렇게 생각하면 안된다. NONO 답이 안나옴. 

정렬의 주체 (파란색 상자)를 어떻게 할지 생각하는게 아니라

남는 영역 (margin)을 어떻게 할지 생각해야한다.

 

---

---

이제 CSS 배치에서는 생각하는 관점을 바꿔야한다. 

만약 파란색 상자가 <div></div>로 감싸진 block box라고 해보자. 

그러면 이 <div> block box를 옮기려면, 오른쪽에 남는 margin 영역을 컨트롤 해야한다. 

CSS에서 배치라는 건, 영역을 나누는 싸움이다. 

 

 

오른쪽에 있는 margin 영역을 좌, 우로 나눠줘야한다.

그래야 파란색 상자가 가운데로 갈 수 있는 것 

 

margin 오른쪽에 있는 걸 좌, 우로 나눠줘야 파란색이 오른쪽으로 갈 수 있다. 

오른쪽 정렬을 하고 싶으면, 끌고 온다고 생각하면 안되고, 오른쪽 마진에 꽉찬 거를 반으로 나눈다고 생각해야한다. 

옮기려고 하는 요소에 초점을 맞추지 말고, 걔를 둘러싸는 요소를 어떻게 컨트롤 할까를 생각하기

---

 

 

Q. 문제 2 (BLOCK의 수평정렬 _ h1~h6, p, div )

오른쪽 파란색 박스를 왼쪽으로 옮겨보세요. 

그러면 이제 왼쪽에 있는 영역 자체를 오른쪽으로 옮겨준다고 생각을 해야한다. 

 

그래야 이렇게 왼쪽으로 상자가 옮겨지게 된다. 

우리가 옮기려고 하는 요소에 초점을 맞추지 말고, 걔를 둘러싸는 요소를 어떻게 컨트롤 할까를 생각해야한다. 

 

 

* 참고 

inline type의 수평정렬

https://bayleaf07.tistory.com/185 (a, img, span)