block 레벨과 inline

 block 레벨 요소

 

HTML태그는 블록 레벨 요소와 인라인 요소로 나눌 수 있습니다. 블록 레벨 요소는 부모 요소의 전체 공간을 차지하여 블록을 만듭니다. 따라서, 블록 레벨 요소는 언제나 새로운 줄에서 시작합니다. 블록 레벨 요소는 또다른 블록 레벨 요소와 인라인 요소를 포함할 수 있습니다. 이러한 특징으로 인해 인라인 요소보다 큰 구조를 생성할 수 있습니다.  

 

 

 

 

 block 레벨 

요소 리스트

 

<div>
문서의 분할

<footer>
페이지나 구역의 푸터

<form>
입력 폼

<h1> ~ <h6>
제목

<header>
페이지나 구역의 헤더

<hr>
구분선

<ul><li><ol>
목록

<nav>
탐색 링크를 포함

<p>
문단

<section>
웹페이지의 구역

<table>
표

<address> 
연락처 정보

<article>
단락 콘텐츠

<aside>
부가 콘텐츠

<blockquote>
긴 인용구

<details>
상세 정보 위젯

<dialog>
대화상자

 

 

 

  inline 요소

 

인라인 요소는 콘텐츠의 흐름을 끊지 않고, 요소가 필요한 공간만 차지합니다. 인라인 요소는 새로운 줄을 만들지 않습니다. 인라인 요소 안에 는 데이터와 다른 인라인 요소만 포함할 수 있으며, 블록레벨 요소를 넣을 수 없습니다.

 

 

 

 

  

inline 

요소 리스트

 

<a>
href 특성을 통해 다른 페이지나 같은 페이지의 위치로 연결할 수 있는 앵커 요소

<br>
텍스트 안에 캐리지 리턴 생성

<button>
버튼

<i>
기울임꼴로 표시하여, 주위와 구분

<img>
이미지

<input>
입력 요소

<select>
옵션 메뉴를 제공하는 컨트롤

<strong>
중대하거나 긴급한 콘텐츠

<template>
나중에 js코드를 이용해 콘텐츠를 삽입

<textarea>
멀티라인 일반 텍스트 편집 컨트롤

 

 

 

 

 

 정리

 

시각적으로 분류해본 다면,

무언가를 담는 박스역할을 하는 태그들

header, footer, nav, aside, main, section, article, div, form,,,



어딘가에 담겨있어 사용자들 눈에 보이는 태그들

a, button, input, label, img, video, audio, map, canvas, table , p, ul, li, ol, span,,,

 

 

 

 

 자료 출처

 

[블록 레벨 요소] - developer.mozilla.org/ko/docs/Web/HTML/Block-level_elements

[인라인 요소] - developer.mozilla.org/ko/docs/Web/HTML/Inline_elements