01. 블록 레벨 요소(Block-level Elements)

블록 레벨 요소는 마크업을 할 때 줄이 바뀌는 특성을 가지고 있는데, 다음 예제를 보면서 설명하겠습니다

<!DOCTYPE html> 
<html lang="ko"> 
<head> 
        <meta charset="UTF-8" > 
        <title>블록 레벨 요소</title> 
</head> 
<body> 
        <h1>블록 레벨 요소</h1>
        <h2>블록 레벨 요소 성질</h2>
        <p>줄 바꿈이 생깁니다.</p>
</body>
</html>

결과 ex1-1.html

블록 레벨 요소

블록 레벨 요소 성질

줄 바꿈이 생깁니다.

[예제 ex1-1]에서 마크업 했던 <h1>,<h2>,<p> 요소들은 블록의 성질을 가지고 있어 화면상 줄 바꿈 현상이 일어나는 것을 볼 수 있습니다.

02. 인라인 요소(inline Element)

인라인 요소는 블록 레벨 요소와 달리 줄 바꿈 특성이 없습니다. 즉, 블록 레벨 요소처럼 행이 바뀌지 않고 한줄로 출력됩니다.

<!DOCTYPE html> 
<html lang="ko"> 
<head> 
    <meta charset="UTF-8" > 
    <title>인라인 요소</title> 
</head> 
<body> 
    <strong>인라인 요소</strong>
    <span>인라인 요소는 한 줄로 출력됩니다.</span>
</body>
</html>

결과 ex1-2.html

인라인 요소 인라인 요소는 한 줄로 출력 됩니다.

[예제 ex1-2] 에서 마크업 했던 <strong>,<span>요소들은 인라인 성질을 가지고 있어 행이 바뀌지 않고 한 줄로 출력 된 것을 볼 수 있습니다.