뼈대 세우는 과정, 웹사이트 만들 때 영역 나누는 태그

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

block 형식

• 공간을 수직 분할
• 크기를 지정하는 width, height 속성을 사용할 수 있음

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

inline 형식

• 공간을 수평 분할
• 크기를 지정하는 width, height 속성을 사용할 수 없음

ex) strong/b 태그, em/i 태그, mark 태그, span 태그

block(div) / inline(span) 차이점

1. 줄바꿈(개행)

div 태그

block 형식의 태그는 한 줄을 모두 차지하기 때문에 뒤에 오는 내용은 다음 줄에 작성됨.

<div>첫번째 영역</div>
<div>두번째 영역</div>
<div>세번째 영역</div>

span 태그

inline 형식 태그는 한 줄 내에서 일정한 칸을 차지하기 때문에 뒤에 오는 내용은 줄이 바뀌지 않고 옆에 붙음.

<span>첫번째 영역</span>
<span>첫번째 영역</span>
<span>첫번째 영역</span>

2. 영역 지정 방식

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

<div style="background-color: chartreuse;">
	동해물과 백두산이 마르고 닳도록 <br>
	하느님이 보우하사 우리나라 만세 <br>
	무궁화 삼천리 화려강산 <br>
	대한 사람 대한으로 길이 보전하세 <br>
	<br>
	남산 위에 저 소나무 철갑을 두른 듯 <br>
	바람서리 불변함은 우리 기상일세 <br>
	무궁화 삼천리 화려강산 <br>
	대한 사람 대한으로 길이 보전하세
</div>

<span style="background-color: darkgrey;">
	동해물과 백두산이 마르고 닳도록 <br>
	하느님이 보우하사 우리나라 만세 <br>
	무궁화 삼천리 화려강산 <br>
	대한 사람 대한으로 길이 보전하세 <br>
	<br>
	남산 위에 저 소나무 철갑을 두른 듯 <br>
	바람서리 불변함은 우리 기상일세 <br>
	무궁화 삼천리 화려강산 <br>
	대한 사람 대한으로 길이 보전하세
</span>

3. 크기 지정(width/ height)

• block : 크기 지정 가능 (높이, 너비 지정해서 옆이 비어보여도 옆으로 붙지 않고 아래로 쌓임)
• inline : 크기 지정 불가능 (크기 지정 불가능, 텍스트 크기만큼만 차지)

div 태그 (block)

<div style="width: 200px; height: 200px;">Test</div>
<div style="width: 200px; height: 200px;">Test</div>

span 태그 (inline)

<span style="width: 200px; height: 200px;">Test</span>

iframe 태그

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

<iframe src="05_표연습문제.html" width="800px" height="1000px"></iframe>

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