HTML BLOCK & INLINE

블록(BLOCK) 요소

블록 요소는 항상 새 줄에서 시작

블록 수준 요소는 항상 사용 가능한 전체 너비를 차지합니다(가능한 한 왼쪽과 오른쪽으로 늘어남)

블록 수준 요소에는 위쪽 여백과 아래쪽 여백이 있지만 인라인 요소에는 없음

 

<div> <address> <article> <aside> <blockquote> <canvas> <dd> <dl> <dt> <fieldset> <figcaption> <figure> <footer> <form> <h1~6> <header> <hr> <li> <main> <nav> <noscript> <ol> <p> <pre> <section> <table> <tfoot> <ul> <video>

 

※ <noscript>: 브라우저가 사용자에게 표시 할 수있는 대체 콘텐츠를 정의

인라인(INLINE) 요소

인라인 요소는 새 줄에서 시작하지 않음

인라인 요소는 필요한 만큼만 너비를 차지

 

<a> <abbr> <b> <bdo> <br> <button> <cite> <code> <dfn> <em> <i> <img> <input> <kbd> <label> <map>  <oupput> <q> <samp> <script> <select> <small> <span> <strong> <sub> <sup> <textarea> <time>  <var>

 

※ <abbr title="fullname">: 약어를 정의

※ <bdo dir="ltr or rtl">: 텍스트 양방향 재정의

※ <cite>: 특정 단어 기울이면서 강조(미술 작품, 책, 노래 등)

※ <dfn>: 콘텐츠 내에서 정의를 하기 위해 사용, 기울임으로 표시됨

※ <kbd>: 키보드 입력을 정의

<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy text (Windows).</p>

<p>Press <kbd>Cmd</kbd> + <kbd>C</kbd> to copy text (Mac OS).</p>

※ <map>: 클릭 가능한 영역이 있는 이미지 맵 정의

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>

※ <output>: 계산 결과

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
  <input type="range" id="a" value="50">
  +<input type="number" id="b" value="25">
  =<output name="x" for="a b"></output>
</form>

※ <q>: 짧은 인용문 정의

<p>WWF's goal is to:
<q>Build a future where people live in harmony with nature.</q>
We hope they succeed.</p>

※ <samp>: 컴퓨터 프로그램의 예제 출력을 정의하기 위해 사용됨

<p>Message from my computer:</p>
<p><samp>File not found.<br>Press F1 to continue</samp></p>

※ <small>: 글자를 작게 출력

<p>This is some normal text.</p>
<p><small>This is some smaller text.</small></p>

※ <time datetime="2021-10-03 00:00">: 특정 시간(날짜) 정의

<p>Open from <time>10:00</time> to <time>21:00</time> every weekday.</p>

<p>I have a date on <time datetime="2008-02-14 20:00">Valentines day</time>.</p>

 

※ <var>: 수학식 정의

<p>The area of a triangle is: 1/2 x <var>b</var> x <var>h</var>, where <var>b</var> is the base, and <var>h</var> is the vertical height.</p>