HTML Block & Inline | elements 의 특성

• 모든 HTML의 요소에는 default 된 기본 디스플레이 값이 있는데,
• 그 표시값은 Block 과 Inline 두 가지로 나뉜다.

 

---

• 항상 새줄에서 시작하고, 브라우저는 자동으로 요소 앞 뒤로 약간의 공백(여백)을 추가한다.
• Block 요소에 사용 되는 줄은, 전체 너비를 차지한다.
• 일반적으로 사용되는 두 가지 Block 요소는 <p> 와 <div> 이다.

- <p> : 문서의 단락을 정의

- <div> : 문서의 구분 또는 섹션을 정의

​

• div 요소는 다른 HTML 요소의 컨테이너로 종종 사용된다.
• div 요소는 필수속성은 없지만, Style, class, id는 공통이다.
• div 요소를 CSS와 함께 사용하면, content 블록 스타일을 지정할 수 있다.

​

** Block-level elements **

<address> <article> <aside> <blockquote> <canvas> <dd> <div> <dl>

<dt> <fieldset> <figcaption> <figure> <footer> <form> <h1> <h6>

<header> <hr> <li> <main> <nav> <noscript> <ol> <p> <pre>

<section> <table> <tfoot> <ul> <video>

​

---

 

<Inline 요소>

​

• Inline 요소는 새줄에서 시작하지 않는다.
• Inline 요소는 필요한 만큼만 너비를 차지한다.
• Inline 요소는 block-레벨의 요소를 포함한 형태를 띌 수 없다.

​

• <span> 요소는 text의 일부 또는 문서의 일부를 markup 하는데 사용되는 인라인 컨테이너다.
• span 요소에는 필수 속성이 없지만, style, class 및 ID는 공통이다.
• CSS와 함께 사용하면, span 요소를 사용해 텍스트 부분의 스타일을 지정할 수 있다.

​

​

** Inline elements **

<a> <abbr> <acronym> <b> <bdo> <big> <br> <button> <cite>

<code> <dfn> <em> <i> <img> <input> <kbd> <label> <map>

<object> <output> <q> <samp> <script> <select> <small> <span>

<strong> <sub> <sup> <textarea> <time> <tt> <var>

---

 

 

​