[HTML] 영역 관련 태그; div태그와 span태그, iframe태그

TIL: 스스로 이해한 것을 바탕으로 정리하였기에 오류가 있을 수 있습니다. 틀린 부분은 댓글로 알려주시면 감사하겠습니다.

 

 

 

 

블럭요소와 인라인요소

 

모든 태그에는 영역이 있으며, 해당 태그가 영역을 한줄이 잡히느냐, 옆으로 잡히느냐에 따라 블럭요소와 인라인요소로 나뉜다.

 

블럭요소	한 줄 단위로 영역을 차지하는 요소 줄바꿈이 적용되어 이미 존재하는 태그의 다음줄에 영역이 잡힌다.	h태그, p, pre, ..., "div"
인라인요소	content 내용에 해당하는 부분만 영역을 차지하는 요소 줄바꿈이 적용되지 않아 옆으로 영역이 잡힌다	b, s, em, img, input, label, ..., "span"

 

 

 

 

div vs span (페이지 영역을 분할하는 태그들)

 

차이점1.  줄바꿈 적용

div 태그 : 블럭요소 (한 줄 단위로 영역을 차지)
span 태그 : 인라인요소 (content영역만을 차지)

 

 

차이점2. 영역 지정 방식

 

div 태그 : 전체 감싸는 사각형 박스로 영역을 지정

span 태그 : 문장단위로 영역을 지정한다.

 

 

 

 

* iframe 태그 

현재 관련된 문서 내에 빠르게 다른 웹페이지를 추가할 수 있는 태그

- width : 가로 / height : 세로 사이즈 지정

- src : 추가할 다른 웹페이지 주소

- frameborder : 테두리