[HTML 004] 블록과 인라인

 

 

html의 모든 요소는 해당 요소가 웹 브라우저에 어떻게 보이는가를 결정하는 display 속성을 가진다.

display 속성의 값으로 inline과 block, 그리고 두 가지의 장점을 합친 inline-block이 있다. 

 

 

inline 

 

 

✔ html 태그의 내용 만큼만 차지

✔ 태그를 연달아 썼을 때 한 줄에 나타남

✔ width, height로 크기 조절을 할 수 없음

✔ 좌우 margin, padding만 적용 가능 (상하는 불가능)

 

📌인라인 태그 종류

<a>, <span>, <strong>, <video>, <audio>

 

 

block 

 

 

✔ 해당 라인의 모든 너비를 차지

✔ 태그 요소마다 줄을 바꿈 

✔ width, height, 상하좌우 margin, padding이 모두 가능 -> 레이아웃을 작업하는 요소로 적합

✔ 내용과 별개로 자신의 영역을 가짐

 

📌블록 태그 종류

<h1>, <p>, <div>, <ul>, <ol>, <form>, <header>, <nav>, <footer>, <section>, <article>, <aside>, <table>

 

 

inline-block 

✔ inline과 block의 특징을 모두 포함

✔ 줄을 바꾸지 않음

✔ width, height 가능

✔ 상하좌우 margin, padding 가능

 

📌인라인 블록 태그 종류

<img>, <input>, <button>

 

 

---

 

⛔Inline과 Block 속성 태그 표기 시 주의할 점!!

 

Block은 Inline을 포괄하는 더 큰 개념이기 때문에

Inline 속성을 가진 태그 안에 block 속성을 가진 태그를 넣지 않습니다!