•
블럭 요소 : 한 줄 단위로 영역을 차지하는 요소
줄바꿈이 적용되어 이미 존재하는 요소의 다음줄에 영역
(h태그, p, pre, ..., "div")
•
인라인 요소 : content 내용에 해당하는 부분만 영역을 차지하는 요소
줄바꿈이 적용되지 않아 옆으로 연이어져서 출력
다음줄로 넘기고자 할 때는 br로 개행해야됨
(b, s, mark, input, img, label, ...., "span")
•
div태그 : 블럭요소 (한 줄 단위 영역 차지)
•
span태그 : 인라인요소 (content영역만을 차지)
•
div태그와 span태그의 차이2 : 영역 지정 방식
•
div태그 : 전체 감싸는 사각형 박스로 영역을 지정
•
span 태그 : 문장단위로 영역을 지정
•
iframe 태그
현재 이 문서내에 다른 웹페이지를 추가하는 태그
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>영역 관련 태그</title>
<style>
div, span{border:1px solid black;}
#div1, #span1{background-color:rosybrown;}
#div2, #span2{background-color: sandybrown;}
#div3, #span3{background-color: seagreen;}
</style>
</head>
<body>
<h1>영역 관련 태그</h1>
<h2>div태그와 span태그의 차이1 : 줄바꿈 적용</h2>
<h3>>div태그 : 블럭요소 (한 줄 단위 영역 차지)</h3>
<div id="div1">첫번째 영역</div>
<div id="div2">두번째 영역</div>
<div id="div3">세번째 영역</div>
<h3> span태그 : 인라인요소 (content영역만을 차지)</h3>
<span id="span1">첫번째 영역</span>
<span id="span2">두번째 영역</span>
<span id="span3">세번째 영역</span>
<h2>div태그와 span태그의 차이2 : 영역 지정 방식</h2>
<h3>> div태그 : 전체 감싸는 사각형 박스로 영역을 지정</h3>
<div>
트고, 곳으로 인생에 길지 것은 힘있다. 바로 인생에 인생을 유소년에게서 천하를 인간의 품고 피에 칼이다. 옷을 품었기 투명하되 것은 없으면 피에 영원히 이상 아니다. 남는 목숨을 생생하며, 보는 돋고, 그들의 있을 피고 반짝이는 사막이다. 우는 길을 온갖 인생을 못할 곧 풍부하게 과실이 보이는 것이다. 거친 인간이 실현에 살 말이다. 얼마나 이상, 인생의 그들은 가는 봄날의 웅대한 평화스러운 고행을 있으랴? 내는 노년에게서 없는 불러 심장은 보라. 미묘한 하였으며, 품으며, 봄바람이다. 품에 같은 같지 웅대한 열락의 있으랴? 꾸며 피에 새 속잎나고, 꽃이 청춘 돋고, 기쁘며, 지혜는 것이다.
뼈 원대하고, 생의 거선의 불어 듣는다. 위하여 되는 실로 속에 사막이다. 열매를 우리 영락과 끓는 방황하여도, 황금시대를 보배를 심장의 소담스러운 것이다. 곧 어디 싹이 못할 내려온 방황하여도, 같은 일월과 우리 피다. 밝은 이상 보이는 그들은 것이다. 장식하는 소리다.이것은 산야에 따뜻한 청춘의 많이 것이다. 가는 그들은 수 위하여 그들의 따뜻한 인생에 풍부하게 그들의 위하여서. 힘차게 붙잡아 꾸며 없는 그러므로 사랑의 것이다. 이상 너의 곳이 가장 가슴이 쓸쓸한 이상은 그러므로 아니다. 심장의 품고 힘차게 찾아 너의 칼이다. 품었기 많이 찾아다녀도, 피다.
</div>
<h3>> span 태그 : 문장단위로 영역을 지정</h3>
<span>
트고, 곳으로 인생에 길지 것은 힘있다. 바로 인생에 인생을 유소년에게서 천하를 인간의 품고 피에 칼이다. 옷을 품었기 투명하되 것은 없으면 피에 영원히 이상 아니다. 남는 목숨을 생생하며, 보는 돋고, 그들의 있을 피고 반짝이는 사막이다. 우는 길을 온갖 인생을 못할 곧 풍부하게 과실이 보이는 것이다. 거친 인간이 실현에 살 말이다. 얼마나 이상, 인생의 그들은 가는 봄날의 웅대한 평화스러운 고행을 있으랴? 내는 노년에게서 없는 불러 심장은 보라. 미묘한 하였으며, 품으며, 봄바람이다. 품에 같은 같지 웅대한 열락의 있으랴? 꾸며 피에 새 속잎나고, 꽃이 청춘 돋고, 기쁘며, 지혜는 것이다.
뼈 원대하고, 생의 거선의 불어 듣는다. 위하여 되는 실로 속에 사막이다. 열매를 우리 영락과 끓는 방황하여도, 황금시대를 보배를 심장의 소담스러운 것이다. 곧 어디 싹이 못할 내려온 방황하여도, 같은 일월과 우리 피다. 밝은 이상 보이는 그들은 것이다. 장식하는 소리다.이것은 산야에 따뜻한 청춘의 많이 것이다. 가는 그들은 수 위하여 그들의 따뜻한 인생에 풍부하게 그들의 위하여서. 힘차게 붙잡아 꾸며 없는 그러므로 사랑의 것이다. 이상 너의 곳이 가장 가슴이 쓸쓸한 이상은 그러므로 아니다. 심장의 품고 힘차게 찾아 너의 칼이다. 품었기 많이 찾아다녀도, 피다.
</span>
<hr>
<iframe src="3_표관련태그.html" width="600" height="800" frameborder="0"></iframe>
<br><br>
<iframe width="300" height="200" src="https://www.youtube.com/embed/8ZbpfoRja9A" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</body>
</html>
HTML
복사
