07. HTML 인라인 요소와 블럭 요소

○ inline 요소

<a> <b> <br> <button> <cite> <em> <i> <img> <input> <label> <script>
<select> <small> <span> <strong> <sub> <sup> <textarea>

• 자체적인 크기와 여백이 없다. : 내용부의 크기가 요소의 크기를 결정한다.
  • 높이, 너비, 외부/내부 여백 설정이 불가능하다.
  • 내용부의 가로, 세로 정렬 설정이 불가능하다.
• 줄바꿈을 강제하지 않는다.
• 보통은 다른 데이터와 인라인 요소만 포함한다. (block 레벨 요소는 포함이 불가능하다)

○ block level 요소

<article> <aside> <blockquote> <div> <footer> <form> <h1>~<h6>
<header> <hr> <li> <nav> <ol> <p> <section> <ul>

• 자체적인 크기와 여백을 가진다.
• 줄바꿈을 강제한다. : 컨텐츠와 상관없이 부모 요소의 너비 전체를 독점한다.
• 일반적으로 인라인 요소와 block 레벨 요소를 포함 가능하다.

○ inline-block 요소

inline 요소와 block 요소의 특징이 혼합되어 있다.

• 자체적인 크기와 여백을 가진다. (block 레벨 요소의 특징)
• 줄바꿈을 강제하지 않는다. (inline 요소의 특징)