[HTML/CSS] 영역 관련 태그

블럭 요소

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

줄바꿈이 적용되어 이미 존재하는 요소의 다음 줄에 출력

ex) h태그, p, pre, ... div

 

인라인 요소

content 내용에 해당되는 부분만 영역을 차지하는 요소

줄바꿈이 적용되지 않아 옆으로 연이어져 출력

다음줄로 넘기고자 할 경우 <br>로 개행

ex) b, s, mark, input, img, label, ... span

 

div와 span 태그 비교

1. 줄바꿈 적용

div (블럭 요소)	한 줄 단위 영역 차지
span (인라인요소)	content 영역만 차지

<h3>div 태그 : 블럭요소(한 줄 단위 영역 차지)</h3>
<div id="div1">첫번째 영역</div>
<div id="div2">두번째 영역</div>
<div id="div3">세번째 영역</div>
<br>
<h3>span 태그 : 인라인 요소(content영역만 차지)</h3>
<span id="span1">첫번째 영역</span>
<span id="span2">두번째 영역</span>
<span id="span3">세번째 영역</span>

2. 영역 지정 방식

div	전체를 감싸는 사각형 박스로 영역 지정
span	문장 단위로 영역지정

<h3>div 태그</h3>
<div>
    이웃 헤일 너무나 봄이 이네들은 계절이 까닭입니다. 파란 하나에 계절이 말 있습니다. 남은 봄이 이름자 같이 그러나 속의 쉬이 마리아 이름자를 듯합니다. 어머님, 내린 토끼, 이름과, 이름을 책상을 듯합니다. 오는 사람들의 이름자 부끄러운 차 별 벌써 어머님, 듯합니다. 다하지 별 옥 이름을 그러나 까닭이요, 같이 무엇인지 봅니다.

    소녀들의 이름을 이국 당신은 묻힌 이제 듯합니다. 오는 추억과 별 아직 이름자 봅니다. 별에도 풀이 프랑시스 추억과 무성할 동경과 나는 버리었습니다. 어머니, 봄이 언덕 다하지 언덕 불러 오는 다 별 있습니다. 멀리 너무나 묻힌 거외다.
</div>

<h3>span 태그</h3>
<span>
    이웃 헤일 너무나 봄이 이네들은 계절이 까닭입니다. 파란 하나에 계절이 말 있습니다. 남은 봄이 이름자 같이 그러나 속의 쉬이 마리아 이름자를 듯합니다. 어머님, 내린 토끼, 이름과, 이름을 책상을 듯합니다. 오는 사람들의 이름자 부끄러운 차 별 벌써 어머님, 듯합니다. 다하지 별 옥 이름을 그러나 까닭이요, 같이 무엇인지 봅니다.

    소녀들의 이름을 이국 당신은 묻힌 이제 듯합니다. 오는 추억과 별 아직 이름자 봅니다. 별에도 풀이 프랑시스 추억과 무성할 동경과 나는 버리었습니다. 어머니, 봄이 언덕 다하지 언덕 불러 오는 다 별 있습니다. 멀리 너무나 묻힌 거외다.
</span>

<h3>cf. p 태그</h3>
<p>
    이웃 헤일 너무나 봄이 이네들은 계절이 까닭입니다. 파란 하나에 계절이 말 있습니다. 남은 봄이 이름자 같이 그러나 속의 쉬이 마리아 이름자를 듯합니다. 어머님, 내린 토끼, 이름과, 이름을 책상을 듯합니다. 오는 사람들의 이름자 부끄러운 차 별 벌써 어머님, 듯합니다. 다하지 별 옥 이름을 그러나 까닭이요, 같이 무엇인지 봅니다.

    소녀들의 이름을 이국 당신은 묻힌 이제 듯합니다. 오는 추억과 별 아직 이름자 봅니다. 별에도 풀이 프랑시스 추억과 무성할 동경과 나는 버리었습니다. 어머니, 봄이 언덕 다하지 언덕 불러 오는 다 별 있습니다. 멀리 너무나 묻힌 거외다.
</p>

<h3>cf. pre 태그</h3>
<pre>
    이웃 헤일 너무나 봄이 이네들은 계절이 까닭입니다. 파란 하나에 계절이 말 있습니다. 남은 봄이 이름자 같이 그러나 속의 쉬이 마리아 이름자를 듯합니다. 어머님, 내린 토끼, 이름과, 이름을 책상을 듯합니다. 오는 사람들의 이름자 부끄러운 차 별 벌써 어머님, 듯합니다. 다하지 별 옥 이름을 그러나 까닭이요, 같이 무엇인지 봅니다.

    소녀들의 이름을 이국 당신은 묻힌 이제 듯합니다. 오는 추억과 별 아직 이름자 봅니다. 별에도 풀이 프랑시스 추억과 무성할 동경과 나는 버리었습니다. 어머니, 봄이 언덕 다하지 언덕 불러 오는 다 별 있습니다. 멀리 너무나 묻힌 거외다.
</pre>

 

iframe 태그

특정 영역으로 외부 화면을 끌어오는 태그

<h3>iframe 태그</h3>
<p>
<iframe width="640" height="360" src="https://www.youtube.com/embed/RefmbPSaHM0?list=RDRefmbPSaHM0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>