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
'웹 관련 > HTML & CSS' 카테고리의 다른 글
[CSS] placeholder 주의할 점(feat.placeholder가 안먹힐 때) (0) | 2022.06.22 |
---|---|
[CSS] 부모 상속 무효화 :not() selector (0) | 2022.05.22 |
[CSS] padding,margin 속성값 & padding 적용 차이 (0) | 2022.05.22 |
[HTML] 시맨틱(Semantic) 태그 (0) | 2022.04.24 |
[HTML] 표(table) : <table> 태그와 구성요소들 (0) | 2022.04.24 |