05 _HTML (영역관련태그)

영역관련태그 - div / span / iframe

div 태그와 span 태그 차이점

 

1) 줄바꿈 적용

div - 블럭요소로 한줄 단위로 영역 차지 (이미 존재하는 태그 다음줄에 영역이 잡힘)

<div style=" background-color: blue;"> 첫번째 영역</div>

<div style="background-color: orange;"> 두번째 영역</div>

<div style="background-color: aqua;"> 세번째 영역</div>

span - 인라인 요소로 content 영역만 차지

<span style="background-color: green;"> 첫번째 영역</span>

<span style="background-color: blue;"> 두번째 영역</span>

<span style="background-color: chocolate;"> 세번째 영역</span>

 

 

 

2) 영역지정 방식

하나의 태그에 문장 입력시 

 

iframe - 웹 문서 안에 다른 웹 페이지를 추가하는 태그 (인라인 요소)

이미지 및 영상도 첨부 가능하다

<iframe src="04_이미지및멀티미디어관련태그.html" width="600" height="800"></iframe>

 

<iframe width="560" height="315" src="https://www.youtube.com/embed/exQQfuhnRxA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>