* 본 포스팅은 필자가 개인적으로 학습한 내용 정리 및 리뷰를 위해 포스팅합니다.
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
참고:https://nossodia.tistory.com/56
'HTML \ CSS' 카테고리의 다른 글
[HTML/CSS] Selector (0) | 2022.09.02 |
---|---|
[HTML/CSS] 기본기 다지기 (0) | 2022.09.01 |
[HTML/CSS] 코드 작성 Tip (0) | 2022.08.31 |
댓글