2022.12.26.basic.

block 태그

1. 항상 새로운 줄에 태그가 생성.
2. 좌우 너비가 100%라서 한 줄을 독차지.
3. 오른쪽에 공간이 남아있더라도 새로운 태그는 다음 줄에 생성.
4. 높이값을 가진다.

<header>, <section>, <footer>, <article>, <nav>, <div>, <form>, <ul>, <ol>, <p>, <h1>, <h2>, <h3>, <address>, <blockquote>, <canvas>, <fieldset>, <figcaption>, <figure>, <hr>, <main>, <noscript>, <pre> , <table>, <tfoot>, <video>

inline 태그

1. 좌우 공간을 필요한 만큼만 차지한다.
2. 이전 이후 태그 사이에 공간이 있다면 그 공간에 배치된다.
3. 다른 태그와 같은 줄에 배치될 수 있다.
4. 최소 높이값만을 가진다. (컨텐츠에 따라) 따라서 높이값을 따로 지정해도 먹히지 않는다.
   ❗️인라인 속성에서는 마진 상하가 먹히지 않는다! 좌우는 먹힌다.

<a>, <span>, <button>, <input>, <img>, <video>, <audio>, <script>, <textarea>, <strong>, <br>, <abbr>, <acronym>, <b>, <bdo>, <big>, <cite>, <code>, <dfn>, <em>, <i>, <kbd>, <label>, <map>, <object>, <output>, <q>, <samp>, <select>, <small>, <strong>, <sub>, <sup>, <textarea>, <time>, <tt>, <var>

inline-block 태그

block 속성과 lnline 속성을 모두 가지고 있는 형태.
❗️ 따라서 block 요소처럼 높이값을 지정하면 먹히고, inline 요소처럼 옆으로 붙는다.