[HTML] 04_영역 관련 태그

영역을 나누는 형식(성질)

block 형식

• 공간을 수직 분할 => 수직으로 되어있는 화면을 가로로 잘라서 여러 행을 만드는 것
• 크기를 지정하는 width, height 속성을 사용 할 수 있음OOO

  ex ) p/pre(문단 나누기), h1~h6(제목 영역 나누기),
  hr(수평선 넣어서 화면 나누기) , div(영역 나누기)

inline 형식

• 공간을 수평 분할 => 수평으로 되어있는 화면을 세로로 잘라서 여러 열(컬럼)을 만드는 것
• 크기를 지정하는 width, height 속성을 사용 할 수 없음XXX

  ex) strong/b (글자를 굵게), em/i (글자 기울이기),
  mark(형관펜), span(한 줄을 나누는 용도)

block(div) / inline(span) 차이점 1 : 줄바꿈(개행)

<div> : block 형식의 태그는 한 줄을 모두 차지하기 때문에
		뒤에 오는 내용은 다음 줄에 작성이 된다
        
 <!-- # : id를 의미  -->
 <div id="div1">첫 번째 영역</div>
 <div id="div2">두 번째 영역</div>
 <div id="div3">세 번째 영역</div>
 
 <span> : inline 형식 태그는 한 줄 내에서 일정한 칸(열)을 차지하기 때문에
 		  뒤에 오는 내용은 줄이 바뀌지 않고 옆에 붙는다
          
<span id="span1">첫 번째 영역</span>
<span id="span2">두 번째 영역</span>
<span id="span3">세 번째 영역</span>

아이디 별로 색과 테두리를 주었을 때 화면에 보이는 모습

• div
  
• span
  

block(div) / inline(span) 차이점 2 : 영역 지정 방식

block : 사각형 박스 형태로 영역을 지정
inline : 내부에 작성된 내용(Content) 단위로 영역을 지정

애국가에 div와 span 태그를 사용 했을 때

• div
  
• span
  

block(div) / inline(span) 차이점 3 : 크기 지정(width/height)

block : 크기 지정 가능
inline : 크기 지정 불가능

iframe 태그

: 웹 문서 내부에 다른 웹문서를 추가하는 태그(inline형식 이지만 크기지정 가능)

 다른 웹 문서를 추가 할 때
 <iframe width="800px" height="1000px" src="04_표관련태그.html"></iframe>
 
 영상 추가 할 때
  <iframe 
        width="560" 
        height="315" 
        src="https://www.youtube.com/embed/vrhIxBWSJ04?autoplay=1" 
        title="YouTube video player" 
        frameborder="0" 
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
        allowfullscreen>
        </iframe>