[HTML]블럭요소와 인라인요소, div/ span / iframe

블럭요소 (block level elememt)

- 한 줄 단위로 영역을 차지하는 요소

 - 사이드에 다른 요소들이 붙을 수 없음 (ex: textarea, p, pre, h1~h6, div)

- 요소 사용 후 자동 개행적용

인라인 요소 (in-line element)

- content영역의 내용만큼한 영역을 차지하는 요소

- 요소 사용 후 자동개행 없음

- br태그로 개행하여야함 (input, Label, mark, s, img, ..."span")

 

 

div태그와 span태그의 차이

div태그: 블럭요소로 영역을 지정할 수 있는 태그 (한 줄 차지)

span태그: 인라인요소로 영역을 지정가능한 태그 (content영역 크기만큼만 차지)

 

** 영역이 더 큰 블럭요소인 <div> , <p> 태그는 인라인 요소인 <span>태그 포함 가능

 반대의 경우는 불가!

(단, <p>태그는 문자정보를 입력하는 단락으로 구성되며, <p>태그 하위에는 다른 블럭요소 포함이 불가하다

<p>태그 하위에는 인라인 요소만 올 수 있음)

 

반면 더 영역이 큰 블록 요소인 <div>와 <p> 태그는

인라인 요소인 <span> 태그를 포함할 수 있다

 <!-- . + tab : div자동완성 -->
    <div class="" id="div1">첫번째영역</div> 
    <div class="" id="div2">두번째영역</div>
    <div class="" id="div3">세번째영역</div>
    <!-- div는 블럭요소이므로 자동개행하여 출력 -->
    
    <!-- span#span2 + tab ==> 자동으로 id속성 생성
        span#span3(세번쨰영역) +tab 
    -->
    <h3>span태그: 인라인요소로 영역을 지정가능한 태그
        (content영역 크기만큼만 차지)</h3>
    <span id = "span1">첫번째영역</span>
    <span id="span2">두번째영역</span>
    <span id="span3">세번째영역</span>
    
    <hr>

    <h2>div와 span의 영역지정방식</h2>
    <h3>div태그: 전체를 감싸는 사각형 박스로 영역지정</h3>
    <div class="" id="div4">우리 그들의 속에서 아니한 투명하되 사막이다. 
        안고, 그와 가슴에 유소년에게서 듣는다. 
        같으며, 같은 앞이 가치를 얼마나 남는 새 천하를 약동하다. 
        길지 품에 커다란 어디 목숨이 미인을 끝에 자신과 이상 이것이다. 
        인생을 긴지라 실현에 품었기 뜨고, 이상이 바이며, 가치를 약동하다. 
        소리다.이것은 하였으며, 많이 풀이 능히 무한한 피가 것이다. 
        위하여 그림자는 인생을 이상의 심장의 위하여서. 
        자신과 끝까지 그들을 풀밭에 석가는 아니한 그러므로 사막이다. 
        이상의 무한한 얼음 이것이다. 풀이 새 그들은 예가 아니더면, 
        고동을 철환하였는가?
    </div>
    <hr>
    <h3>span태그</h3>
    <span>
        우리 그들의 속에서 아니한 투명하되 사막이다. 
        안고, 그와 가슴에 유소년에게서 듣는다. 
        같으며, 같은 앞이 가치를 얼마나 남는 새 천하를 약동하다. 
        길지 품에 커다란 어디 목숨이 미인을 끝에 자신과 이상 이것이다. 
        인생을 긴지라 실현에 품었기 뜨고, 이상이 바이며, 가치를 약동하다. 
        소리다.이것은 하였으며, 많이 풀이 능히 무한한 피가 것이다. 
        위하여 그림자는 인생을 이상의 심장의 위하여서. 
        자신과 끝까지 그들을 풀밭에 석가는 아니한 그러므로 사막이다. 
        이상의 무한한 얼음 이것이다. 풀이 새 그들은 예가 아니더면, 
        고동을 철환하였는가?

    </span>

 

ifram태그

현재 HTML문서에 다른 웹 페이지를 포함시키는 태그

     <iframe src="3_표관련태그.html" width="700" height="700" frameborder="0"></iframe>

 

 

 

Reference

https://inpa.tistory.com/m/entry/HTML-%F0%9F%93%9A-p-div-span-%ED%83%9C%EA%B7%B8-%EC%A0%95%EB%A6%AC