[HTML/CSS] <div> 상자 배치

* 본 포스팅은 필자가 개인적으로 학습한 내용 정리 및 리뷰를 위해 포스팅합니다.

---

html의 기본 각 태그를 나누는 상자 배치에 대해서 알아보자

---

▲ margin : 바깥 레이아웃 여백

padding : 안쪽 여백

border : content 테두리

 

 

● 상자가로 배치

 

 

<div>, <p>, <h> 태그 에는 display: block(가로행을 전부 차지함) 기본으로 가지고 있다.

일부 스타일은 자동은 부모→자식 상속(inherit)된다.

 

- display: block (한 행을 전부 차지)

- display: inline(항상 옆으로 채워지는 폭과 너비가 없는 요소)

- display: inline-block(내 크기만큼 차지)

 

 

 

 

html을 작성했을 때 기본적으로 display: block속성으로 인해

 

▲ 위의 그림처럼 한 줄씩 나오게 된다.

 

 

하지만 display: inline-block속성을 적용한다면

 

▲ 위의 그림처럼 가로로 붙어서 나오게 되는 것을 확인할 수 있다.

 

▲ 위 코드처럼 div를 서로 이어 붙여야만 가로로 정렬된다.

(right-menu의 div를 띄우는 순간 공백도 포함하기 때문에 띄우고 싶다면 부모 태그에 font-size: 0px에 적용해준다)

 

---

또 다른 방법으로는

 

 

▲ float: left 속성을 준다.

(float을 사용하면 요소를 띄우고 왼쪽 정렬하게 된다)

 

 

 

 

※  요소를 띄우는 성질을 가졌기 때문에 다음 요소가 가려질 수 있다.

해결방법!!

▲ clear: both 속성을 주면 된다.

---

또 또 다른 방법

 

 

▲ 가로로 붙일 요소의 부모 태그에 display: flex 속성을 준다.

 

 

위의 3가지 모두 동일하게 가로로 붙여서 배치가 가능하다!!

 

 

상자에 글씨를 적었는데 배치가 깨지는 경우

▲ 박스 안에 글을 적게 되었을 때 깨지게 되는 경우가 있다

글을 적게 되면 위의 빨간 선처럼 baseline이 존재하고

박스는 그 위에 있고 싶어 하는 성질을 갖기 때문에 baseline위로 배치된다.

 

 

▲ vertical-align: top 속성을 주면 해결된다.

(top : 요소의 맨 위를 줄에서 가장 큰 요소의 맨 위 위치에 맞춘다는 의미이다.)

 

 

 

 

 

 

 

 

 

결론

똑같은 배치 방법이라도 수십가지의 경우가 존재할 수 있다. 모든것을 내것으로 만들며 가장 편리한 방법을 사용하자!!

 

 

 

출처:https://blog.hubspot.com/website/css-margin-vs-padding

CSS Margin vs. Padding: What's the Difference?

참고:https://nossodia.tistory.com/56

CSS속성_vertical-align(버티컬얼라인)