[21.09.09] exam12 - 블록 레벨 요소(div, p, h1, ul)/인라인 레벨 요소(span)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1 style="background:orange">block-level elements</h1>
<div style="background:orange">block-level elements</div>
<p style="background:orange">block-level elements</p>
<em style="background:orange">inline-level elements</em>
<span style="background:orange">inline-level elements</span>
<span style="background:yellow">inline-level elements,
inline-level elements, inline-level elements, inline-level elements
inline-level elements, inline-level elements, inline-level elements
inline-level elements</span>
</body>
</html>
<!--
① 블록 레벨 요소(div, p, h1, ul)
- 블록 레벨 요소는 자신을 감싸는 상위의 요소가 허용한 가로 폭 전체 영역을 차지한다.
- 블록 레벨 요소는 너비나 높이를 지정할 수 있고, 줄 바꿈 속성을 가지고 있다.
② 인라인 레벨 요소(span)
- 인라인 레벨 요소는 흘러가는 요소이다.
- 인라인 레벨 요소는 너비나 높이를 지정할 수 없으며, 줄이 바뀌지 않는 형식(inline)으로 표현된다.
- 줄이 바뀌지 않지만, 내용이 많아서 그 상위 블록요소의 영역을 가득 채우게 되면 줄이 바뀐다.
-->
- em태그는 강조를 하면서 글씨가 기울여져있다.
- span은 입력된 글자만큼 크기를 잡아준다
