[HTML] <div>와 <span> (feat.block & inline element 구분)

 

1)div - 블록요소

HTML 문서에서 특정 영역(division)이나 구획(section)을 정의할 때 사용

<div> 요소는 여러 HTML 요소들을 하나로 묶어주어 CSS로 스타일을 변경하거나 자바스크립트로 특정 작업을 수행하기 위한 일종의 **컨테이너(container)**로 자주 사용

CSS와 함께 웹 페이지의 레이아웃(layout)을 설정하는데도 종종 사용

 

2)span - 인라인요소

HTML 문서에서 인라인 요소(inline-element)들을 하나로 묶을 때 사용

자체만으로는 어떠한 의미도 가지지 않지만, class나 id와 같은 전역 속성과 함께 사용하여 스타일링을 위해 요소들을 그룹화하거나 lang 속성과 같은 속성값을 공유하는 데 유용하게 사용

<span class="word">span 요소</span>

<style>
    .word { background-color: orange; font-style: italic; }
</style>

 

문장(문단) 부분은 p,pre를 많이쓰는 거고 영역부분은 div,span

영역 안에 문단이 문단 안에 영역이 들어가기도 한다

 

※ 블록 요소와 인라인 요소의 차이

블록요소는 한 줄의 영역을 차지하고, 인라인요소는 작성한 내용만큼의 영역차지

• 인라인 요소 : height 적용x
• 인라인 요소 : width 적용x
• 인라인 요소 : text-align 적용x
• 블록 요소 : vertical-align 적용o