레벨요소 - 블록, 인라인

 

공간을 차지하는 레벨요소 유형으로 'block'와 'inline'이 있다

 

블록 레벨 요소

Ex: <h1>, <div>, <p> 등

태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 것.

 

인라인 레벨 요소

Ex: <span>, <img>, <strong> 등

태그를 사용해 요소를 삽입했을 콘텐츠만큼만 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있는 것.

 

예제

 

<style>
#test1 * {
border:1px solid blue;
}
</style>

<div id="test1">
<p>1	
“서울집값 4년전 수준 간다, 영끌족 몰린 중저가 하락폭 더 클 것”
8시간전	</p>
<p>2	
[단독] 김만배, 수사 받던 남욱에게 “이재명이 넌 빠지라 했다”
6시간전	</p>
<p>3	
[단독] 밀항 준비설 돌던 김봉현...‘대포폰 추적’까지 막은 법원
6시간전	</p>
<p>
<span >
1	
“서울집값 4년전 수준 간다, 영끌족 몰린 중저가 하락폭 더 클 것”
8시간전
</span>
<span >2	
[단독] 김만배, 수사 받던 남욱에게 “이재명이 넌 빠지라 했다”
6시간전
</span>
<span >3	
[단독] 밀항 준비설 돌던 김봉현...‘대포폰 추적’까지 막은 법원
6시간전
</span>
<span >4
클레오파트라 무덤 가는 길? 이집트서 1.5 ㎞ 지하 터널 발견
3시간전
<span >5	
김건희-오드리 헵번 비교에...민주당 중진도 “스토커짓 그만” 쓴소리
1시간전
</span>
</p>
<p>4
클레오파트라 무덤 가는 길? 이집트서 1.5 ㎞ 지하 터널 발견
3시간전	</p>
<p>5	
김건희-오드리 헵번 비교에...민주당 중진도 “스토커짓 그만” 쓴소리
1시간전	</p>
</div>

1 “서울집값 4년전 수준 간다, 영끌족 몰린 중저가 하락폭 더 클 것” 8시간전

2 [단독] 김만배, 수사 받던 남욱에게 “이재명이 넌 빠지라 했다” 6시간전

3 [단독] 밀항 준비설 돌던 김봉현...‘대포폰 추적’까지 막은 법원 6시간전

1 “서울집값 4년전 수준 간다, 영끌족 몰린 중저가 하락폭 더 클 것” 8시간전 2 [단독] 김만배, 수사 받던 남욱에게 “이재명이 넌 빠지라 했다” 6시간전 3 [단독] 밀항 준비설 돌던 김봉현...‘대포폰 추적’까지 막은 법원 6시간전 4 클레오파트라 무덤 가는 길? 이집트서 1.5 ㎞ 지하 터널 발견 3시간전 5 김건희-오드리 헵번 비교에...민주당 중진도 “스토커짓 그만” 쓴소리 1시간전

4 클레오파트라 무덤 가는 길? 이집트서 1.5 ㎞ 지하 터널 발견 3시간전

5 김건희-오드리 헵번 비교에...민주당 중진도 “스토커짓 그만” 쓴소리 1시간전