블록 레벨 요소와 인라인 레벨 요소 테그 정리

 

블록 레벨 요소

블록 레벨 요소는 새로운 줄을 차지하며, 위아래로 배치되는 요소입니다. 페이지의 구조를 잡는 데 주로 사용됩니다.

• 주요 블록 레벨 요소:
  • <div>: 가장 일반적인 블록 레벨 요소로, 다른 요소들을 그룹화하는 데 사용됩니다.
  • <p>: 단락을 나타내는 요소입니다.
  • <h1>, <h2>, <h3>, <h4>, <h5>, <h6>: 제목을 나타내는 요소입니다.
  • <ul>: 불요식 목록을 나타내는 요소입니다.
  • <ol>: 번호 매김 목록을 나타내는 요소입니다.
  • <li>: 목록 항목을 나타내는 요소입니다.
  • <form>: 폼을 나타내는 요소입니다.
  • <header>: 페이지의 헤더 부분을 나타냅니다.
  • <footer>: 페이지의 푸터 부분을 나타냅니다.
  • <section>: 페이지의 특정 섹션을 나타냅니다.
  • <article>: 독립적인 콘텐츠를 나타냅니다.
  • <aside>: 본문과 관련된 추가적인 정보를 나타냅니다.
  • <nav>: 네비게이션 메뉴를 나타냅니다.

인라인 레벨 요소

인라인 레벨 요소는 주변 텍스트와 같은 줄에 배치되는 요소입니다. 텍스트에 강조나 링크 등을 추가할 때 사용됩니다.

• 주요 인라인 레벨 요소:
  • <span>: 특정 텍스트에 스타일을 적용할 때 사용됩니다.
  • <a>: 하이퍼링크를 생성합니다.
  • <strong>: 텍스트를 강조합니다.
  • <em>: 텍스트를 기울여 표시합니다.
  • <img>: 이미지를 삽입합니다.
  • <input>: 사용자 입력을 받는 폼 요소입니다.
  • <button>: 버튼을 생성합니다.
  • <label>: 폼 요소에 대한 설명을 제공합니다.

요약

구분블록 레벨 요소인라인 레벨 요소

특징	새로운 줄을 차지	주변 텍스트와 같은 줄에 배치
용도	페이지 구조	텍스트 강조, 링크 등
예시	<div>, <p>, <h1>	<span>, <a>, <strong>

Sheets로 내보내기

주의:

• display 속성: CSS의 display 속성을 사용하여 요소의 레벨을 변경할 수 있습니다. 예를 들어, display: inline을 사용하면 블록 레벨 요소를 인라인 레벨 요소처럼 만들 수 있습니다.
• HTML5: HTML5에서는 새로운 의미 체계를 가진 블록 레벨 요소들이 추가되었습니다. (<header>, <footer>, <section>, <article>, <aside>, <nav>)
• 인라인-블록 요소: display: inline-block 속성을 사용하여 인라인과 블록의 특징을 모두 가진 요소를 만들 수 있습니다.