style 영역 (# == id)

  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;}
  

---

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

block 형식

공간을 수직 분할

-> 수직으로 되어있는 화면을 가로로 잘라서 여러 행을 만드는 것

• 크기를 지정하는 width, height 속성을 사용 할 수 있음. (O)
  ex) p/pre(문단 나누기), h1~h6(제목 영역 나누기),
  hr(수평선 넣어서 화면 나누기), div(영역 나누기)

inline 형식

공간을 수평 분할

-> 수평으로 되어있는 화면으 ㄹ세로로 잘라서 여러 열(컬럼)을 만드든 것

• 크기를 지정하는 width, height 속성을 사용할 수 없음. (X)
  ex) string/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 형식 태그는 한 줄 내에서 일정한 칸(열)을 차지하기 때문에
뒤에 오는 내용은 줄이 바뀌지 않고 옆에 붙는다.

# : id를 의미
<span id="span1">첫 번째 영역</span>
<span id="span2">두 번째 영역</span>
<span id="span3">세 번째 영역</span>

---

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

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

---

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

block : 크기 지정 가능 (O)
inline : 크기 지정 불가능(X)

div 태그

span 태그
TEST

---

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

<iframe width="800px" height="1000px" src="04_표관련태그.html"></iframe>
홈페이지 내부에 홈페이지 뜨는 것


유튜브 영상 불러오는 소스 ?autoplay=1&mute=1" 

?autoplay=1 자동실행
&mute=1 음소거

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