HTML 05_영역관련 태그

블럭요소 :  한줄 단위로 영역을 차지하는 요소 
                  줄바꿈이 적용되어 이미 존재하는 태그의 다음줄에 영역이 잡힘 (p, pre, div)

인라인요소 : content(내용)영역에 해당하는 부분만 영역을 차지하는 요소 
                    줄바꿈이 적용되지 않아 옆으로 영역이 잡힘( 다음줄로 넘어가려면 <br>) (b,mark,s,img, "span")

---

div 태그와 span태그의 차이점  1: 줄바꿈 적용

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

<div style="background-color: red">첫번째 영역</div>
<div style="background-color: green">두번째 영역</div>
<div style="background-color: yellow">세번째 영역</div>

첫번째 영역

두번째 영역

세번째 영역

-span: 인라인 요소로 content영역만 차지(줄바꿈이 발생되지 않고 옆으로 배치)

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

첫번째 영역 두번째 영역 세번째 영역

---

 

div 태그와 span태그의 차이점  2: 영역지정방식

-div :  전체 사각형 박스로 영역을 지정

 <div style="background-color: skyblue;">
        공자는 광야에서 수 가슴이 꽃이 붙<br>
        잡아 실현에 듣는다. 자신과 군영<br>
        과 위하여서, 그러므로 이것이다.<br>
        이상 이것이야말로 용기가 영락<br>
        어디 웅대한 가는 청춘의 뿐이다. <br>
        대고, 만물은 심장은 능히 그들의<br>
        있는 가슴이 청춘의 같이, 그리하였<br>
        는가? 오직 영원히 굳세게 관현악<br>
        이며, 심장의 그들은 어디 있는 것<br>
        이다.보라, 듣는다. 
    </div>

공자는 광야에서 수 가슴이 꽃이 붙
잡아 실현에 듣는다. 자신과 군영
과 위하여서, 그러므로 이것이다.
이상 이것이야말로 용기가 영락
어디 웅대한 가는 청춘의 뿐이다.
대고, 만물은 심장은 능히 그들의
있는 가슴이 청춘의 같이, 그리하였
는가? 오직 영원히 굳세게 관현악
이며, 심장의 그들은 어디 있는 것
이다.보라, 듣는다.

-span : 각 문장 단위로 영역을 지정

<span style="background-color: pink;">
        공자는 광야에서 수 가슴이 꽃이 붙<br>
        잡아 실현에 듣는다. 자신과 군영<br>
        과 위하여서, 그러므로 이것이다.<br>
        이상 이것이야말로 용기가 영락<br>
        어디 웅대한 가는 청춘의 뿐이다. <br>
        대고, 만물은 심장은 능히 그들의<br>
        있는 가슴이 청춘의 같이, 그리하였<br>
        는가? 오직 영원히 굳세게 관현악<br>
        이며, 심장의 그들은 어디 있는 것<br>
        이다.보라, 듣는다. 
    </span>

공자는 광야에서 수 가슴이 꽃이 붙
잡아 실현에 듣는다. 자신과 군영
과 위하여서, 그러므로 이것이다.
이상 이것이야말로 용기가 영락
어디 웅대한 가는 청춘의 뿐이다.
대고, 만물은 심장은 능히 그들의
있는 가슴이 청춘의 같이, 그리하였
는가? 오직 영원히 굳세게 관현악
이며, 심장의 그들은 어디 있는 것
이다.보라, 듣는다.

 

 

 

---

<iframe>

웹문서 안에 다른 웹페이지를 추가하는 태그 

 <iframe width="780" height="400" src="https://www.youtube.com/embed/1micoPInUKs" title="월드컵 응원하는 붉은앙마 밤비" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>