html
의 요소는 크게 블록 요소( block element )와 인라인 요소( inline element )로 구분된다.
조금 헷갈리는 개념이지만 css
를 잘 적용하기 위해서는 꼭! 알아야 하기에 정리해보았다
사용 가능한 최대 가로 너비를 사용함 ( 기본 너비값은 100%
)
전체를 차지하기 때문에 각 요소들이 수직으로 쌓임 ( 한 줄에 한개만 배치 )
크기값 가질 수 있음 ( 가로 너비 & 세로 길이 지정 가능 )
상하좌우 마진 & 패딩을 가질 수 있음
레이아웃을 작업하는 요소로 적합
( ↘ 각 요소에 적용한 값 )
width: 150px;
height: 30px;
padding: 10px;
margin: 10px;
💡 그런데 잘 보면 각 요소 사이의 간격이 똑같다!
마진을 10px씩 적용했으니 각 요소 사이는 20px이 되어야 하는거 아닌가??
👨🏽🏫 이건 마진 상쇄 (margin-collapsing) 때문이다.
margin-bottom
과 margin-top
이 겹치게 되면 상쇄가 일어나 하나의 값만 적용된다.
각 요소 사이에 20px의 간격을 주고 싶다면 margin-bottom: 20px;
이나 margin-top: 20px;
적용하면 해결!
< 주요 블록 요소들 >
div
p
ul
ol
li
h1~h6
form
header
nav
footer
section
article
aside
table
th
td
figure
figcaption
caption
blockquote
사용 가능한 필요한 만큼의 영역을 사용함 ( 컨텐츠 너비 만큼 )
요소들이 수평으로 쌓임 ( 한 줄에 여러개 배치 )
크기값 가질 수 없음 ( 사이즈 지정 불가능 )
상하 마진 적용 불가능
( 좌우 마진은 가능 / 상하좌우 패딩도 가능 )
텍스트를 작업하는 요소로 적합
( ↘ 각 요소에 적용한 값 )
width: 150px;
height: 30px;
padding: 10px;
margin: 10px;
👉 가로, 세로 크기와 상하 마진은 적용되지 않고,
패딩과 좌우 마진값만 적용되었다.
( ↘ 각 요소에 적용한 값 )
width: 180px;
height: 80px;
padding: 10px;
margin: 10px;
👉 두 블록 요소 모두 가로, 세로 크기와 패딩, 마진이 적용되었다. ( 단, 마진 상쇄가 생김 )
👉 인라인 요소는 크기값이 적용되지 않았고 패딩은 상하좌우 모두, 마진은 좌우에만 적용되었다.
🔎 인라인 요소에 사이즈를 지정하려면??
display: block;
또는 display: inline-block
을 통해 블록 요소로 바꾸면 된다. ( 반대의 경우도 마찬가지 ! )
주요 인라인 요소들
span
a
em
b
strong
video
audio
등
크기값 가질 수 있음 ( 가로 너비 & 세로 길이 지정 가능 )
상하좌우 마진 & 패딩을 가질 수 있음
사용 가능한 필요한 만큼의 영역을 사용함 ( 컨텐츠 너비 만큼 )
요소들이 수평으로 쌓임 ( 한 줄에 여러개 배치 )
( width / height / margin-top / margin-bottom 적용 가능 )
👉 인라인 요소와 같이 수평으로 배치가 가능하지만
사이즈를 조절할 수 있고, 상하좌우 마진을 가질 수 있다.
주요 인라인 블록 요소들
img
input
button
💁♂️ 각 요소들을 가운데 정렬하는 방법은?
margin: auto;
text-align: center;
좋은 정보 감사합니다.