728x90
반응형
iframe(inline frame) 요소
하나의 웹페이지 안에 어떠한 제한도 없이 또 다른 하나의 웹 페이지를 삽입할 수 있습니다.
iframe 요소는 명시된 크기로 삽입되는 창의 크기에 고정됩니다.
style 의 border 속성을 이용하여 테두리의 색상 및 굵기 등을 변경할 수 있고, <a> 태그를 이용하여 iframe 에 표시되어 있는 페이지를 변경할 수 있습니다.
<h1>iframe 샘플</h1>
<iframe src="https://jeusyhk.tistory.com/" name="frame_target" style="width:70%; height:500px; border: 3px dashed maroon"></iframe>
<p>
<a href="https://jeusyhk.tistory.com/entry/CSS-CSS-%EA%B8%B0%EC%B4%88" target="frame_target">페이지를 바꿔보자!!</a>
</p>
코드 결과!!
레이아웃(Layout)
레이아웃이란 특정 공간에 여러 구성 요소를 보기 좋게 효과적으로 배치하는 작업을 의미하며 웹 사이트의 외관을 결정짓는 매우 중요한 요소입니다.
1. HTML5 레이아웃
HTML5 에서는 웹페이지의 레이아웃만을 위한 별도의 새로운 요소들을 제공하고, 의미(semantic) 요소라 부릅니다.
각 요소에 대한 설명은 다음과 같습니다.
| 의미 요소 | 설명 |
| <header> | HTML 문서나 섹션(section) 부분에 대한 헤더(header) 를 정의 |
| <nav> | HTML 문서의 탐색 링크를 정의 |
| <section> | HTML 문서에서 섹션 부분을 정의 |
| <article> | HTML 문서에서 독립적인 하나의 글(article) 부분을 정의 |
| <aside> | HTML 문서에서 페이지 부분 이외의 콘텐츠(content) 를 정의 |
| <footer> | HTML 문서나 섹션 부분에 대한 푸터(footer) 를 정의 |
2. div 요소를 이용한 레이아웃
div 요소는 CSS 스타일을 손쉽게 적용할 수 있으므로, 레이아웃을 작성하는데 많이 사용되는 방법입니다.
<head> 태그 영역에 <style> 를 미리 정의해서 div 에 적용할 수 있습니다.
<style>
#header {
background-color:red;
color:white;
height:100px;
}
#nav {
background-color:orange;
width:200px;
height:300px;
float:left;
}
#section {
background-color:yellow;
width:700px;
float:left;
padding:5px;
}
#footer {
background-color:green;
color:white;
height:100px;
clear:both;
}
#header, #nav, #section, #footer { text-align:center; }
#header, #footer { line-height:100px; }
#nav, #section { line-height:250px; }
</style>
미리 정의한 스타일을 <div> 태그에 적용합니다.
<div id="header">
<h2>HEADER</h2>
</div>
<div id="nav">
<h2>NAV</h2>
</div>
<div id="section">
<h2>SECTION</h2>
</div>
<div id="footer">
<h2>FOOTER</h2>
</div>
코드 결과 !!
테이블 요소를 이용하여 레이아웃을 작성하는 방법도 있지만 너무 옛날에 사용하던 구식 방식이고 유지보수 및 수정이 어려워 지금은 사용하지 않으므로 "아~ 이런것도 있구나" 정도만 알고 넘어가겠습니다.
요기까지 임미다.
728x90
'개발 > HTML' 카테고리의 다른 글
| HTML5 와 제이쿼리 (1) | 2022.11.15 |
|---|---|
| [HTML5] Form, Input 요소의 속성(작성중) (0) | 2022.09.07 |
| [HTML] Input 요소의 속성 (0) | 2022.09.07 |
| [HTML] 입력 양식 (0) | 2022.09.07 |
| [HTML] 블록과 인라인 (0) | 2022.09.05 |
| [HTML] 텍스트 요소 - 엔티티 (0) | 2022.09.05 |
| [HTML] 텍스트 요소 - 서식 (1) | 2022.09.05 |
| [HTML] HTML 기본 구조 (0) | 2022.06.16 |
