▶ div 와 span
div 와 span 의 차이
① 줄 바꿈
div 는 자동으로 줄 바꿈을 해주지만 span은 연달아 나온다.
② 영역의 차이
div 태그는 박스 형태로 영이 설정 되어 지고 span 은 줄 단위로 영역이 설정 된다.
따라서. css style 을 적용 할때도 div는 스타일이 태그 다음의 text에 스타일이 입혀져 각각 따로 지정한 객체처럼 보인다. 하지만 span 은 줄 단위 영역이기 떄문에 앞선 text 에 영향을 받기 때문에 크기에 제약이 있다.
<h3> <영역 설정> </h3>
가나다 <div style = "width :200px; height :200px; background-color : green"> 자동으로 줄바꿈 라마바 </div>
abc <span style = "width :200px; height :200px; background-color : blue" > asdf </span>
div 는 block 속성이기 때문에 박스 형태로 영역 구간이 잡히면서 다음 컨텐츠 태그가 자동으로 개행이 되는 속성이다.
반대로 span 은 Inline 속성으로 줄을 바꾸지 않고 다른 요소와 함께 한 행에 위치하려는 성향을 가지고 있다.
'Front > html' 카테고리의 다른 글
[html] 웹 페이지의 기본 뼈대 - 다양한 Form 양식 (1) | 2023.03.22 |
---|---|
[html] 웹 페이지의 기본 뼈대 - 테이블 안에 사진 넣기 (0) | 2023.03.22 |
[html] 웹 페이지의 기본 뼈대 - 테이블 칸 병합 (0) | 2023.03.22 |
[html] 웹 페이지의 기본 뼈대 - Form (0) | 2023.03.21 |
[html] 웹 페이지의 기본 뼈대 - 테이블 (0) | 2023.03.20 |