Lumpy Space Princess - Adventure Time

HTML

인라인 레벨 요소와 블록 레벨 요소의 설명과 차이점에 대해 알아보자

jongyung 2023. 2. 17. 11:06

“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”

- Frederick Philips Brooks
Mythical Man-Month 저자
728x90

블록 레벨 요소(Block-level Element)

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

 

블록 요소는 하나의 박스라고 생각하면 됩니다. 

 

블록 레벨 요소의 태그들: 

 

  • 제목 <h1>~<h6>: 
    1. HTML 문서에서 제목 (heading)을 정의할 때 사용하는 태그.

    2. 텍스트와 인라인 요소를 포함할 수 있지만 블록 레벨 요소는 포함할 수 없다.

    3. 스크린 리터(음석낭독프로그램)에서는 제목의 수준으로 바로 이동할 수 있기 때문에 번호순으로 정의하는 것이 좋다. 
  • 문단 <p>:

    1. HTML 문서에서 단락 (paragraph)을 정의할 때 사용하는 태그.

    2. 텍스트와 인라인 요소를 포함할 수 있지만 블록 레벨 요소는 포함할 수 없다.

    3. 텍스트의 행을 바꾸려면 <br>태그를 사용한다.

 

인라인 요소(Inline Element)

인라인 요소는 마크업을 할 때 줄 바꿈이 일어나지 않고, 가로로 정렬이 됩니다.

 

인라인 요소는 텍스트라고 생각하면 됩니다. 

 

인라인 레벨 요소의 태그들:

 

  • 링크<a>:

    1. 다른 HTML 문서의 이동(외부링크)이나 동일한 HTML 문서 내에서 이동(내부링크), 이메일 주소에 링크를 지정할 수 있다.

    2. href 속성은 링크릐 목적지를 지정할 수 있다.

    3. 이전 버전에서는 블록 레벨 요소를 포함할 수 없었지만,  HTML5에서는 블록 레벨 요소도 포함할 수 있게 되었다. 

        다만, <input>,<button>, 다른 link(<a>)등의 요소들은 포함할 수 없다.

    4. <a>태그 속성 중 target 속성은 링크된 HTML 문서를 어떤 방식으로 브라우저에 보여줄 것인 가에 대한 속성이다.
        target 속성 값에는 _self, _blank, _parent, _top 이 있는데 이 중 _blank를 가장 많이 사용한다.
        _blank는 링크된 웹 문서를 브라우저에서 새 탭(창)으로 보여준다.

 

  • 이미지<img>:

    1. HTML 문서에 이미지를 삽입할 때 사용하는 태그

    2. <img> 태그의 필수 속성인 src 속성은 불러올 이미지의 경로를 지정한다.
         경로는 <a> 태그에서 설명한 절대 경로와 상대 경로의 개념이 똑같이 적용된다. 

    3. <img> 태그는 인라인 요소이며 종료 태그</img>가 없는 빈 요소이다.
        <img> 태그에서 잊지 말아야 하는 것은 alt 속성을 필수적으로 정의해 주어야 한다는 것이다.
       
    그 이유는 두 가지이다.

    3-1. 스크린 리더에서 <img> 태그로 접근했을 때 alt 속성의 텍스트를 음성으로 읽어줌으로써 이미지에 대한 정보를 전달할 수 있다.

    3-2. 외부적인 환경으로 이미지를 불러올 수 없는 상황이 발생했을 때 이미지 대신 alt 속성의 텍스트가 출력되어 이미지의 내용을 전달할 수 있다.

  • <em>:
    강조하고 싶은 텍스트를 정의하기 위한 태그, 기울임체로 표시된다.
  • <strong>:
    중요한 텍스트를 정의하기 위한 태그이며 굵은체로 표시된다.
  • <mark>:
    주의 깊게 텍스트 부분을 강조하기 위한 태그이며 노란색으로 표시된다.
  • <b>:
    의미를 가지고 있지 않으며 단순히 텍스트를 굵은체로 표시한다.
  • <small>:
    주의 사항, 법적 제한, 저작권 등을 정의하기 위한 태그이며 작은 글씨로 표시된다.
  • <sub>: 
    아래첨자 텍스트를 정의하기 위한 태그.
  • <sup>:
    위첨자 텍스트를 정의하기 위한 태그.

블록 레벨 요소와 인라인 요소의 차이점

1. 블록 레벨 요소는 줄 바꿈이 일어나지만, 인라인 레벨 요소는 줄 바꿈이 일어나지 않습니다.

 

2. 블록 레벨 요소는 문자와 인라인 요소를 자식 요소로 포함할 수 있지만, 인라인 요소는 문자와 인라인 요소를 자식 요소로 포함할 수 없습니다.

 

3. 블록 레벨 요소 중에는 블록 레벨 요소를 자식 요소로 포함할 수 있는 요소와 없는 요소가 있지만, 인라인 레벨 요소는 블록 레벨 요소를 자식 요소로 포함할 수 없습니다.

 

이미지 출처

 

이미지 출처