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

블록 레벨 요소 : 언제나 새로운 줄에서 시작하고 , 좌우 양쪾으로 최대한 늘어나 가능한 모든 너비를 차지한다

 

예를 들자면 

 

CSS

 

p{ background-color: black;}

 

HTML

 

<p> 이 문단은 블록 레벨 요소를 나타내는 말 입니다 </p>

 

이라는 코드를 쳤을때 

 

결과문: 이 문단은 블록 레벨 요소를 나태내는 말 입니다   

 

이처럼 문단의 처음과 끝을 채우는 요소라고 생각 하면 된다

 

블록 레벨 요소의 들어간 태그 

 

<address>연락처 정보.

<article>단락 콘텐츠.

<aside>부가 콘텐츠.

<blockquote>긴("블록") 인용구.

<details>상세 정보 위젯

.<dialog>대화상자

.<dd>설명 목록의 정의 설명

.<div>문서의 분할.

<dl>설명 목록.

<dt>설명 목록의 정의.

<fieldset>필드 집합의 라벨.

<figcaption>그림 설명

.<figure>미디어 콘텐츠 그룹과 설명.

(<figcaption>을 참고하세요)

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

<form>입력 폼.

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>1~6단계 제목

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

.<hgroup>헤더 정보 그룹

.<hr>수평선(구분선)

.<li>목록의 항목

.<main>문서에서 하나 뿐인 중심 콘텐츠

.<nav>탐색 링크를 포함.

<ol>정렬된 목록

.<p>문단.

<pre>미리 서식 적용한 글

.<section>웹 페이지의 구역.

<table>표.

<ul>정렬되지 않은 목록.

 

 

로 구성된다 

 

정리: 인라인 요소 와 블럭 레벨 요소의 차이점은  

 

인라인 요소 : 인라인 요소는 모든 문단에서 아무 곳이나 넣을 수 있다는 장점이 있지만 어떠한 카테고리나 더 큰 구조를 생성하기에 어렵다

 

블럭 요소 : 인라인 요소 과 비교하였을때 블럭 요소는 아무 문단에 넣을 수는 없지만 그 문단 전체에 넣을 수 있거나 또는 

새로운 줄바꿈 /  문단의 끝과 끝을 차지할 수 있는 또한 더 큰 구조를 생성하기에 적합하다