제19강.  HTML 요소유형

 

 

동영상 강좌보기

모든 HTML요소는 요소 유형에 따라 기본 표시 값을 갖습니다. 대부분의 요소에 대한 기본 표시값은 블록 또는 인라인입니다.

 

블록 수준 요소

블록수준 요소는 항상 전체너비(100%)를 사용하고 새 줄에서 시작합니다.

<div>안녕하세요?</div>
<div>반갑습니다.</div>
Markup

HTML 블록수준(Block level) 요소:

 <address>

 <article>

 <aside>

 <blockquote>

 <canvas>

 <dd>

 <div>

 <dl>

 <dt>

 <fieldset>

 <figcaption>

 <figure>

 <footer>

 <form>

 <h1>-<h6>

 <header>

 <hr>

 <li>

 <main>

 <nav>

 <noscript>

 <ol>

 <output>

 <p>

 <pre>

 <section>

 <table>

 <tfoot>

 <ul>

 <video>

 

인라인(inline) 요소

인라인 요소는 새 줄에서 시작하지 않고 필요한만큼만 너비를 차지합니다.

다음은 블록수준 <p>안에 인라인 요소인 <span>이 있습니다.

<p>단락안에 
<span>같은 라인에</span>
<span>인라인요소</span>있습니다.
</p>
Markup

HTML 인라인(inline) 요소 : 

 <a>

 <abbr>

 <acronym>

 <b>

 <bdo>

 <big>

 <br>

 <button>

 <cite>

 <code>

 <dfn>

 <em>

 <i>

 <img>

 <input>

 <kbd>

 <label>

 <map>

 <object>

 <q>

 <samp>

 <script>

 <select>

 <small>

 <span>

 <strong>

 <sub>

 <sup>

 <textarea>

 <time>

 <tt>

 <var>

 

 

 

 

<div>요소

<div>요소는 종종 다른 HTML요소의 컨테이너로사용됩니다.

<div>요소에는 필수 속성이 없지만 스타일과 클래스는 공통입니다.

CSS와 함께 사용하면 <div>요소를 사용하여 콘텐츠 블록을 스타일 지정할 수 있습니다.

<div style="background-color:black;color:white;padding:20px;">
  <h2>서울</h2>
  <p>서울특별시(서울特別市, Seoul)는 대한민국의 수도이자 최대 도시이다.</p>
</div>
Markup

<span>요소

<span>요소는 종종 일부 텍스트의 컨테이너로 사용됩니다.

<span>요소에는 필수 속성이 없지만 스타일과 클래스는 공통입니다.

CSS와 함께 사용하면 <span>요소를 사용하여 텍스트의 일부분을 스타일 지정할 수 있습니다.

<h1>My <span style="color:red">중요한</span> 표제</h1>
Markup