[HTML] block / inline / inline-block

block/ inline/ inline-block 

 

 

HTML의 모든 요소는 해당 요소가 웹 브라우저에 어떻게 보이는가를 결정짓는 display 속성을 가진다. 대부분의 HTML 요소는 블록/ 인라인 속성을 가진다.

 

 

1. 블록 (block) 
2. 인라인 (inline) 
3. 인라인 블록 (inline-block)

 

 

---

 

1. 블록 (block) 

 

• 한 줄에 한 개만 배치 (줄바꿈)
• 해당 라인의 모든 너비 차지 (기본 너비 값 = 100%)
• 크기 값 가질 수 있다.
• 상하좌우 마진 가짐
• 제목, 문단, 표를 포함해 전체적인 레이아웃을 만드는 태그들
• 자식으로 block, inline 요소 가질 수 있다.

 

 

💡  <p>, <pr>태그는 예외적으로 block 요소를 자식으로 가질 수 없다.

 

 

📌
h1~h6,
p,
ul, ol, li, dl, dt, dd, tr, td, th,
div, header, nav, main, section, article, aside, footer, figure, figcaption,
table, form,
details, address
blockquote, hr, pr

 

 

---

 

div 요소

 

• <div>요소는 다른 HTML 요소들을 하나로 묶는 데 자주 사용되는 대표적인 블록 요소이다.
• <div>요소는 주로 여러 요소들의 스타일을 한 번에 적용하기 위해 사용된다.

 

 

---

 

2. 인라인 (inline) 

 

• 한 줄에 여러 개 배치
• 컨텐츠의 크기 만큼만 차지 (기본 너비 값 = 컨텐츠의 너비 값)
• 크기 값을 가질 수 없다.
• 상하마진은 가질 수 없다.
• 서식 관련 태그들
• 자식으로 inline 요소를 가질 수 있지만 block 요소는 가질 수 없다.

 

 

💡 HTML 5부터 <a>태그는 예외적으로 block 요소를 자식으로 가질 수 있다.

 

 

📌
span
a
i
small, big, em, u, ins, s, del, b, strong, mark, sub,
br, q
label
map, cite, abbr, tim

 

---

 

span 요소

 

• <span>요소는 텍스트의 특정 부분을 묶는 데 자주 사용되는 인라인요소이다.
• <span>요소는 주로 텍스트의 특정 부분에 스타일을 따로 적용하기 위해 사용된다.

 

 

---

 

3. 인라인블록  (inline-block)

 

• 한 줄에 여러 개 배치
• 컨텐츠의 크기 만큼만 차지 (기본 너비 값= 컨텐츠의 너비 값)
• 크기 값을 가질 수 있다.
• 상하좌우 마진 가질 수 있다.
• 내부적으로는 block 요소 특징을 가지고, 외부적으로는 inline 요소 특징을 가진다.
• 이미지, 폰트아이콘, 폼요소

 

 

📌
button,
img, vedio, audio, iframe,
input, textarea, select,
대부분의 font icon 태그