KH 정보교육원/HTML CLASS
6_영역 관련 태그
bameh
2020. 4. 27. 14:58
<!doctype html>
<html lang="ko">
<head>
<meta charset="uft-8">
<title>6. 영역 관련 태그</title>
-- 내부 style sheet --
<style>
div{
border: 1px solid black;
}
#div1{
background-color: red;
}
#div2{
background-color: yellow;
}
#div3{
background-color: green;
}
span{
border: 1px solid black;
}
#span1{
background-color: red;
}
#span2{
background-color: yellow;
}
#span3{
background-color: green;
}
</style>
</head>
＊영역을 구분하는 태그
<p>: 문단 영역을 지정하는 태그(block 형식)
<pre>: 입력한대로 문단 영역을 지정하는 태그(block 형식)
추가적으로 <div>, <span> 태그를 배워보자
<h1>영역 관련 태그</h1>
<h2>div 태그와 span 태그의 차이 1: 줄바꿈</h2>
<h3>div 태그</h3>
<p>div 태그 영역은 이미 존재하는 태그 다음 줄에 영역이 설정됨.
(block 형식: 공간을 수직으로 분할)</p>
<div id="div1">
첫 번째 영역
</div>
<div id="div2">
두 번째 영역<br>
첫 번째 영역 다음 줄에<br>
영역이 설정됨.(block 형식이기 때문에)
</div>
<div id="div3">
세 번째 영역<br>
두 번째 영역 다음 줄에<br>
영역이 설정됨.
</div>
<hr>
<h3>span 태그</h3>
<p>span 태그 영역은 줄 바꿈이 일어나지 않고
옆으로 영역이 설정된다.<br>(inline형식: 공간을 수평으로 분할한다.)
</p>
<span id="span1">첫 번째 영역</span>
<span id="span2">두 번째 영역</span>
<span id="span3">세 번째 영역</span>
<hr>
<h2>div 태그와 span 태그의 차이 2: 영역 지정 방식</h2>
<b>div 영역: 사각형 박스로 영역을 지정</b>
-- html 태그 내에 스타일 지정(Inline style) --
<div style="background: yellow">
동해물과 백두산이 마르고 닳도록<br>
하느님이 보우하사 우리나라 만세.<br>
무궁화 삼천리 화려강산<br>
대한 사람, 대한으로 길이 보전하세.<br>
</div><br>
<b>span 영역: 문장 단위로 영역을 지정</b><br>
<span style="background: cyan">
동해물과 백두산이 마르고 닳도록<br>
하느님이 보우하사 우리나라 만세.<br>
무궁화 삼천리 화려강산<br>
대한 사람, 대한으로 길이 보전하세.<br>
</span>
<hr>
＊iframe
웹 문서 안에 다른 웹 페이지를 추가하는 태그
<h3>ifame: inline 형식</h3>
<iframe width="1200px" height="800px" src="https://www.iei.or.kr/"></iframe>
<iframe width="600px" height="800px" src="file:///F:/03_WebFront_%EC%88%98%EC%97%85%ED%8C%8C%EC%9D%BC/01_HTML5/5_%ED%91%9C%20%EC%8B%A4%EC%8A%B5%EB%AC%B8%EC%A0%9C.html"></iframe>
<iframe width="800" height="450" src="https://www.youtube.com/embed/tYHltovQV9A" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</html>