div 사용법
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>블록</title>
</head>
<body>
<!-- <h1>display 속성값 : 블록</h1> <div style="border: 3px solid blue;"> div 요소는
display 속성값이 block인 요소입니다. </div> <p style="border: 3px solid red;"> p 요소는
display 속성값이 block인 요소입니다. </p> -->
<div style="background-color: lightgray; color: green; text-align: center;">
<h1>div 요소를 이용한 스타일 적용</h1>
<p>이렇게 div 요소로 한번에 스타일을 적용할 수 있습니다.</p>
.........
</div>
</body>
</html>
iframe 사용법
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML iframe</title>
</head>
<body>
<h1>iframe 태그를 이용한 웹페이지 삽입</h1>
<iframe src="https://www.daum.net" frameborder="0" style="width:100% ; height:500px; border: 3px dashed maroon;"></iframe>
</body>
</html>dashed maroon: 동적으로 추가한 웹페이지에 점선 테두리 변경
원격지원사이트라는 버튼을 클릭해서 iframe에서 값을 변경하고 싶다?
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML iframe</title>
</head>
<body>
<h1>iframe 태그를 이용한 웹페이지 삽입</h1>
<iframe src="https://www.daum.net" name="frame_target" style="width:100% ; height:500px; border: 3px dashed maroon;"></iframe>
<p><a href="http://822.co.kr" target="frame_target">원격지원사이트</a></p>
</body>
</html>
원격지원사이트를 클릭할 경우 iframe 안에서 변경함
iframe 태그에 name = "frame_target"를 했고 a태그에 target = "frame_taget"를 했기 때문이다.
그냥 레이아웃에서 css 적용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>레이아웃</title>
<style>
#header {
background-color: lightgray;
height: 100px;
}
#nav {
background-color: #339999;
color: white;
width: 200px;
height: 300px;
float: left;
}
#section {
width: 200px;
text-align: center;
float: left;
padding: 10px;
}
#footer {
background-color: #FFCC00;
height: 100px;
clear: both;
}
#header, #nav, #section,#footer {text-align: center;}
#header, #footer {line-height: 100px;}
#nav, #section{line-height: 240px;}
</style>
</head>
<body>
<h1>div 요소를 이용한 레이아웃</h1>
<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>
</body>
</html>
레이아웃 시맨틱
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 레이아웃</title>
<style>
header {
background-color: lightgray;
height: 100px;
}
nav {
background-color: #339999;
color: white;
width: 200px;
height: 300px;
float: left;
}
section {
width: 200px;
text-align: center;
float: left;
padding: 10px;
}
footer {
background-color: #FFCC00;
height: 100px;
clear: both;
}
header, nav, section,footer {text-align: center;}
header, footer {line-height: 100px;}
nav, section{line-height: 240px;}
</style>
</head>
<body>
<h1>HTML 시멘틱을 이용한 레이아웃</h1>
<header id="header">
<h2>header 영역</h2>
</header>
<nav id="nav">
<h2>nav 영역</h2>
</nav>
<section id="section">
<h2>section 영역</h2>
</section>
<footer id="footer">
<h2>footer 영역</h2>
</footer>
</body>
</html>
결과는 똑같음 , 방법의 차이임