제10강_HTML 공간 분활

HTML 블록 및 인라인 요소

모든 HTML 요소에는 요소 유형에 따라 기본 표시 값이 있습니다.
표시 값에는 block과 inline의 두 가지가 있습니다.

---

블록 (block) 수준 요소

블록 수준 요소는 항상 새 줄에서 시작하고 브라우저는 자동으로 요소 앞뒤에 약간의 공백(여백)을 추가합니다.

• 블록 수준 요소는 항상 사용 가능한 전체 너비를 차지합니다(가능한 한 왼쪽과 오른쪽으로 늘어남).
• 일반적으로 사용되는 두 가지 블록 요소는 <p> 및 <div>입니다.
• <p>요소는 HTML 문서의 단락을 정의합니다 .
• <div>HTML 문서에서 구분 또는 섹션을 정의합니다.

<div> Tag

블록(block) 형태의 속성을 가진 가장 대표적인 Tag로서

• 다른 HTML Tag들을 하나로 묶는 데 자주 사용합니다
• 하나로 묶인 다른 HTML Tag에 CSS 스타일을 한번에 적용하는데 자주 사용합니다

<div style="border:1px solid black;">
  <h1 style="text-align:center">HTML5 & CSS3</h1>
  <p>HTML5와 CSS3를 공부하자</p>
</div>

• <div>~</div> : 다른 HTML Tag들을 하나로 묶어주었습니다. 
• Tag 안에 style 속성을 주었습니다.
  • border 속성 : 두께가 1px인 검은색 실선 테두리를 그려줍니다.
  • text-align 속성 : 텍스트를 중앙 정렬 합니다.

---

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

• 인라인 요소는 새 줄에서 시작하지 않습니다.
• 인라인 요소는 필요한 만큼만 너비를 차지합니다.
• 이것은 단락 내부의 <span> 요소 입니다.
• 참고: 인라인 요소는 블록 수준 요소를 포함할 수 없습니다!

<span> Tag

인라인(inline) 형태의 속성을 가진 가장 대표적인 Tag로서

• 텍스트의 특정부분을 강조하는데 자주 사용합니다.
• 텍스트의 특정부분에 CSS 스타일을 적용하기 위해 자주 사용합니다.

<p> 우리는 <span style="color:red">HTML5 & CSS3</span>를 공부하고 있습니다.</p>

• <span>~</span> : 텍스트에서 강조할 특정부분을 <span> Tag로 감싸주었습니다.
• Tag 안에 style 속성을 주었습니다.
  • color 속성 : 텍스트의 색깔을 빨간색으로 지정합니다.

---

인라인(inline) 형태의 대표적인 Tags

<span>      <a>     <q>     <b>     <em>     <small>     <strong>     <sup>     <sub>     <input>     <img>     <br>    <big>     <select>     <i>     <button>     <code>     <textarea>     <map>     <mark>     <script>

---

HTML iframe

• inline frame의 약자로, 웹 페이지안에 또 다른 웹페이지를 삽입하는 것을 의미합니다.

<iframe src="url" title="description"></iframe>

• src : source의 약자, 삽입하려는 웹페이지의 주소를 입력
• title : 웹 브라우저에게 해당 iframe이 어떤 iframe인지를 알린다. 이 속성은 필수사항은 아니지만 권장

Iframe - 높이 및 너비 설정

• height및 width속성을 사용하여 iframe의 크기를 지정합니다 .
• 높이와 너비는 기본적으로 픽셀로 지정됩니다.

<iframe src="http://aipick.kr" height="200" width="300" title="Iframe Example"></iframe>

Iframe - 테두리 제거

• 기본적으로 iframe에는 테두리가 있습니다.
• 테두리를 제거하려면 속성을 추가하고 styleCSS border속성을 사용하세요.

<iframe src="demo_iframe.htm" style="border:none;" title="Iframe Example"></iframe>

<iframe src="http://aipick.kr" height="200" width="300" title="Iframe Example" frameborder=0 scrolling="no"></iframe>

Iframe - Target for a Link

• iframe은 링크의 대상 프레임으로 사용할 수 있습니다.
• <iframe> Tag는 name 속성으로 이름을 frame으로 지정해 준다.
• <a> Tag를 클릭했을때 해당 웹 페이지를 <iframe>에서 열 수 있도록 target 속성을 이용하여 iframe의 이름을 지정해준다.

<iframe src="http://aipick.kr" name="iframe_a" title="Iframe Example"></iframe>

<p><a href="https://ko.wikipedia.org/wiki/HTML" target="iframe_a">위키피디아</a></p>

속성

Attribute	Value	Description
allow		Specifies a feature policy for the <iframe>
allowfullscreen	true false	Set to true if the <iframe> can activate fullscreen mode by calling the requestFullscreen() method
allowpaymentrequest	true false	Set to true if a cross-origin <iframe> should be allowed to invoke the Payment Request API
height	pixels	Specifies the height of an <iframe>. Default height is 150 pixels
loading	eager lazy	Specifies whether a browser should load an iframe immediately or to defer loading of iframes until some conditions are met
name	text	Specifies the name of an <iframe>
referrerpolicy	no-referrer no-referrer-when-downgrade origin origin-when-cross-origin same-origin strict-origin-when-cross-origin unsafe-url	Specifies which referrer information to send when fetching the iframe
sandbox	allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation	Enables an extra set of restrictions for the content in an <iframe>
src	URL	Specifies the address of the document to embed in the <iframe>
srcdoc	HTML_code	Specifies the HTML content of the page to show in the <iframe>
width	pixels	Specifies the width of an <iframe>. Default width is 300 pixels