#3. HTML 공간 분할 요소:: iframe과 HTML 레이아웃(layout)

# HTML의 모든 요소는 해당 요소가 Web browser에 어떻게 보이는가를 결정짓는 display 속성을 갖습니다.
# 오늘은 ifame과 HTML의 레이아웃(layout)을 알아보겠습니다.
# tag 목록을 볼 수 있는 페이지로 이동합니다.

# 비전공자가 이해한 HTML

---

1. iframe 요소

1) iframe 요소

iframe이란 inline frame의 약자입니다.
iframe요소를 이용하면 해당 웹 페이지 안에 어떠한 제한 없이 또 다른 하나의 웹페이지를 삽입할 수 있습니다.

문법: <iframe src="삽입할페이지주소"></iframe>

iframe 요소는 frame 요소와는 달리 종료 태그가 존재합니다.
또한, iframe 요소는 명시된 크기로 삽입되는 창의 크기가 고정되어 있습니다.

<iframe src="/css/intro" style="width:100%; height:300px">
</iframe>

 

2) iframe 요소의 테두리 변경

iframe 요소는 기본적으로 검정색 테두리(border)를 갖고 있습니다.
이러한 테두리의 스타일은 style 속성에서 border 속성을 이용하면 변경할 수 있습니다.

<iframe src="/css/intro" style="width:100%; height:150px; border: 3px dashed maroon">
</iframe>

테두리를 표현하고 싶지 않으면 style 속성에서 border 속성값을 none으로 설정하면 됩니다.

<iframe src="/css/intro" style="width:100%; height:150px; border:none">
</iframe>

 

3) iframe 요소의 페이지 변경하기

<a>태그를 이용하면 iframe 요소의 최초 페이지를 중간에 변경할 수 있습니다.
<a>태그의 target 속성과 iframe 요소의 name 속성을 연결하면, <a>태그를 통해 iframe요소의 홈페이지를 변경할 수 있습니다.

<iframe src="/css/intro" name="frame_target" style="width:100%; height:400px; border:3px dashed maroon">
</iframe>
<p>
  <a href="/php/intro" target="frame_target">다른 링크로 Click</a>
</p>

 

---

2. HTML 레이아웃(Layout)

레이아웃(Layout)이란 특정 공간에 여러 구성 요소를 보기 좋게 효과적으로 배치하는 작업
웹 페이지의 레이아웃은 웹 사이트의 외관을 결정짓는 매우 중요한 요소

HTML에서는 다음과 같은 방법으로 레이아웃을 작성할 수 있음

1. div 요소를 이용한 레이아웃
2. HTML5 레이아웃
3. table 요소를 이용한 레이아웃

1) div 요소를 이용한 레이아웃

div 요소는 CSS 스타일을 손쉽게 적용할 수 있으므로, 레이아웃을 작성하는데 자주 사용합니다.

<div id="header" style="border: 3px dashed maroon"><h2>Header 영역</h2></div>
<br>
<div id="nav" style="border: 3px dashed red"><h2>Nav 영역</h2></div>

 

2) HTML5 레이아웃

HTML5에서는 웹페이지의 레이아웃만을 위한 별도의 새로운 요소들을 제공합니다.
이러한 요소들을 의미(semantic)요소라고 합니다.

의미 요소	설명
<header>	HTML 문서나 섹션(section) 부분에 대한 헤더(header)를 정의함
<nav>	HTML 문서의 탐색 링크를 정의함
<section>	HTML 문서에서 섹션(section) 부분을 정의함
<article>	HTML 문서에서 독립적인 하나의 글(ariticle) 부분을 정의함
<aside>	HTML 문서에서 페이지 부분 이외의 콘텐츠(content)를 정의함
<footer>	HTML 문서나 섹션(section) 부분에 대한 푸터(footer)를 정의함

<header><h2>Header 영역</h2></header>
<nav><h2>Nav 영역</h2></nav>
<section><p>Section 영역</p></section>
<footer><h2>Footer 영역</h2></footer>

 

3) table 요소를 이용한 레이아웃

table 요소를 이용해 레이아웃을 작성하는 방법은 오래전에 사용하던 방식으로, 현재는 거의 사용하지 않습니다.
table 요소는 레이아웃을 만들기 위해 설계된 요소가 아니기 때문에, 테이블로 작성된 레이아웃은 수정이 매우 어렵습니다.

<table width="100%" style="text-align:center; border:none">
    <tr>
        <td colspan="2" style="background-color:lightgrey"><h2>Header 영역</h2></td>
    </tr>
    <tr>
        <td style="background-color:#339999; color:white; width:20%"><h2>Nav 영역</h2></td>
        <td style="height:200px; text-align:left"><p>Section 영역</p></td>
    </tr>
    <tr>
        <td colspan="2" style="background-color:#FFCC00"><h2>Footer 영역</h2></td>
    </tr>
</table>

 

 

해당 글은 TCP School에 있는 글을 토대로 공부한 내용입니다.