문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
====== HTML Tutorial - HTML Block & Inline Elements ======
<WRAP left notice 80%>
  * description : HTML Tutorial - HTML Block & Inline Elements
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-05-11
</WRAP>
<WRAP clear></WRAP>
\\
=====Source of the article===== 
[[https://www.w3schools.com/html/html_blocks.asp|HTML Block and Inline Elements]]\\
\\
모든 %%HTML%% 요소에는 요소 유형에 따라 기본 표시 값이 있습니다.\\
\\
표시 값에는 %%block%%과 %%inline%% 두 가지가 있습니다.\\

=====Block-level Elements=====
블록-레벨 요소(A block-level element)는 항상 새 줄에서 시작합니다.\\
\\
블록-레벨 요소는 항상 사용 가능한 전체 너비를 차지합니다(가능한 한 왼쪽과 오른쪽으로 확장).\\
\\
블록 레벨 요소는 위쪽 및 아래쪽 margin을 가지지만, 인라인 요소는 가지고 있지 않습니다.\\
\\
%%<div>%% 요소는 블록-레벨 요소입니다.\\

====Example====
<code html>
<!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>
</code>
\\
%%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====
<code html>
<!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>
</code>
\\
%%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====
<code html>
  <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>
</code>

=====The <span> Element=====
''%%<span>%%'' 요소는 텍스트의 일부 또는 문서의 일부를 마크업 하는 데 사용되는 인라인 컨테이너입니다.\\
\\
''%%<span>%%'' 요소에는 필수 속성이 없지만 ''style'', ''class'' 및 ''id''는 공통입니다.\\
\\
%%CSS%%와 함께 사용하면 ''%%<span>%%'' 요소를 사용하여 텍스트 부분의 스타일을 지정할 수 있습니다.\\

====Example====
<code html>
  <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>
</code>

=====Chapter Summary=====
  * 두 가지 표시 값이 있습니다 : block 및 inline
  * 블록 레벨 요소는 항상 새 줄에서 시작하여 사용 가능한 전체 너비를 차지합니다.
  * 인라인 요소는 새 줄에서 시작하지 않으며 필요한 만큼만 너비를 차지합니다.
  * ''%%<div>%%'' 요소는 블록 레벨이며, 다른 %%HTML%% 요소를 위한 컨테이너로 자주 사용됩니다.
  * ''%%<span>%%'' 요소는 텍스트의 일부 또는 문서의 일부를 마크업하는 데 사용되는 inline 컨테이너입니다.

=====HTML Tags=====
^ Tag         ^ Description                             ^
| %%<div>%%   | 문서에서 블록 레벨의 섹션을 정의합니다.  |
| %%<span>%%  | 문서에서 인라인 섹션을 정의합니다.       |
\\
사용할 수 있는 모든 %%HTML%% 태그 전체 목록을 참고하려면, [[https://www.w3schools.com/tags/default.asp|HTML Element Reference]]를 방문하세요.\\




{{tag>오션 HTML Block and Inline Elements}}
문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

문서 도구
