블록 레벨 요소와 인라인요소

요소의 유형은 '블록 레벨 요소'와 '인라인 요소'로 나누어집니다.

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

블록 레벨 요소는 마크업을 할 때 줄이 바뀌는 특성을 가지고 있음.

  • 예제 1-1.html

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

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

    02. 인라인 요소(inline Elements)

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

  • 예제 1-2.html

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

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

    03. 블록 레벨 요소와 인라인 요소의 특성

    마크업을 할 때 블록 레벨 요소와 인라인 요소의 특성을 잘 알고 있어야만 문법적 오류를 방지할 수 있습니다.
    ※ 일반적인 문법적 특징 : 인라인 요소에는 일반적으로 블록 레벨 요소가 자식으로 올 수 업음.

  • 예제 1-3.html

    • <!DOCTYPE html>
    <html lang="ko">
    <head>
           <meta charset="UTF-8">
           <title>블록 레벨 요소와 인라인 요소</title>
    </head>
    <body>
         <span><h1>블록 레벨 요소</h1></span>
    </body>
    </html>

    [예제 1-3]을 보면 <spans>은 인라인 요소이고 <h1>은 블록 레벨 요소임.
    인라인 요소의 자식 요소로 블록 레벨 요소를 마크업 했기 때문에 문법 에러가 발생

    '블록 레벨 요소'와 '인라인 요소'의 특징 정리

    요소 유형 특징
    블록 레벨 요소 1. 블록 레벨 요소는 줄 바꿈이 일어남.
    2. 블록 레벨 요소는 텍스트(문자)와 인라인 요소를 자식 요소로 포함할 수 있음.
    3. 블록 레벨 요소 중에는 블록 레벨 요소를 자식 요소로 포함 할 수 있는 요소와 포함할 수 없는 요소가 있음.
    인라인 요소 1. 인라인 요소는 줄 바꿈이 일어나지 않음.
    2. 인라인 요소는 텍스트(문자)와 인라인 요소를 자식 요소로 포함할 수 있음.
    3. 인라인 요소는 블록 레벨 요소를 자식 요소로 포함할 수 없음.