목차
HTML Tutorial - HTML Block & Inline Elements
- description : HTML Tutorial - HTML Block & Inline Elements
- author : 오션
- email : shlim@repia.com
- lastupdate : 2021-05-11
Source of the article
HTML Block and Inline Elements
모든 HTML 요소에는 요소 유형에 따라 기본 표시 값이 있습니다.
표시 값에는 block과 inline 두 가지가 있습니다.
Block-level Elements
블록-레벨 요소(A block-level element)는 항상 새 줄에서 시작합니다.
블록-레벨 요소는 항상 사용 가능한 전체 너비를 차지합니다(가능한 한 왼쪽과 오른쪽으로 확장).
블록 레벨 요소는 위쪽 및 아래쪽 margin을 가지지만, 인라인 요소는 가지고 있지 않습니다.
<div> 요소는 블록-레벨 요소입니다.
Example
<!DOCTYPE html> <html> <body> <div style="border: 1px solid black">Hello World</div> <p>The Div element is a block element, and will always start on a new line and take up the full width available (stretches out to the left and right as far as it can).</p> </body> </html>
HTML에서 블록-레벨 요소들은 다음과 같습니다.
<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 Elements
inline 요소는 새 줄에서 시작하지 않습니다.
inline 요소는 필요한 만큼만 너비를 차지합니다.
이것은 단락 내부의 <span> 요소입니다.
Example
<!DOCTYPE html> <html> <body> <p>This is an inline span <span style="border: 1px solid crimson"> Hello World!</span> element inside a paragraph.</p> <p>Ths SPAN element is an inline element, and will not start on a new line and only takes up as much width as necessary.</p> </body> </html>
HTML에서 inline 요소들은 다음과 같습니다.
<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>
Note: inline 요소는 블록-레벨 요소를 포함할 수 없습니다.
The <div> Element
<div> 요소는 종종 다른 HTML 요소를 위한 컨테이너로 사용됩니다
<div> 요소에는 필수 속성(attribute)이 없지만 style, class 및 id는 공통입니다.
CSS와 함께 사용하면, <div> 요소를 사용하여 콘텐츠 블록의 스타일을 지정할 수 있습니다.
Example
<div style="background-color: black;color: white;padding: 20px;"> <h2>London</h2> <p> London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million injabitants. </p> <p> Standing on the River Thames, London had been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium. </p> </div>
The <span> Element
<span> 요소는 텍스트의 일부 또는 문서의 일부를 마크업 하는 데 사용되는 인라인 컨테이너입니다.
<span> 요소에는 필수 속성이 없지만 style, class 및 id는 공통입니다.
CSS와 함께 사용하면 <span> 요소를 사용하여 텍스트 부분의 스타일을 지정할 수 있습니다.
Example
<h1>The span element</h1> <p> My Mother has <span style="color:blue ; font-weight:bold">blue</span> eyes and my father has <span style="color:darkolivegreen; font-weight: bolder;">dark green</span> eyes. </p>
Chapter Summary
- 두 가지 표시 값이 있습니다 : block 및 inline
- 블록 레벨 요소는 항상 새 줄에서 시작하여 사용 가능한 전체 너비를 차지합니다.
- 인라인 요소는 새 줄에서 시작하지 않으며 필요한 만큼만 너비를 차지합니다.
<div>요소는 블록 레벨이며, 다른 HTML 요소를 위한 컨테이너로 자주 사용됩니다.<span>요소는 텍스트의 일부 또는 문서의 일부를 마크업하는 데 사용되는 inline 컨테이너입니다.
HTML Tags
| Tag | Description |
|---|---|
| <div> | 문서에서 블록 레벨의 섹션을 정의합니다. |
| <span> | 문서에서 인라인 섹션을 정의합니다. |
사용할 수 있는 모든 HTML 태그 전체 목록을 참고하려면, HTML Element Reference를 방문하세요.
