Box vs Item
html문서를 구성하는 태그들을 보며 구조를 파악할 때 Box와 Item개념을 알고 있는 것이 중요하다.
Item으로 분류되는 태그들은 '사용자에게 보여지는 태그'를 말하고,
Box로 분류되는 태그들은 '(사용자에게 보여지진 않지만) Item들을 sectioning하는 태그'를 말한다.
⬜ Box에 해당하는 태그 예)
- <header/>
- <nav/>
- <footer/>
- <main />
- <aside/>
- <section/>
- <article/>
- <span/>
- <form/>
- <ul/>, <ol/>
- <div/>
🎁 Item에 해당하는 태그 예)
- <a/>
- <button/>
- <input/>
- <label/>
- <img/>
- <video/>
- <audio/>
- <map/>
- <canvas/>
- <table/>Item -> Block vs Inline
Item으로 분류되는 태그들은 "줄바꿈"여부에 따라서 Block레벨과 Inline레벨로 구분할 수 있다.
| Block레벨 | Inline 레벨 |
|---|---|
 |  |
| Block레벨인 태그는 화면에 표시될 때 공간이 있더라도 한 라인에 하나의 아이템만 배치 | Inline레벨인 태그는 화면에 표시될 때 공간이 허용되면 해당 태그 옆으로 다른 태그의 배치가 가능 |
| ex) div | ex) span , label, input |
참고
😎