[HTML/CSS 기초 강의] ⑰ <span><div>비교

오늘은 <span><div>태그를 비교 해보려고 한다. 

 

 

 

1. <span>&<div> 비교

	<div>	<span>
공통점	HTML 문서 구조를 나타내지 않고 사용자의 필요에 따라 문서 요소를 묶거나 구별
차이점	태그로 묶인 덩어리는 블럭레벨 요소 앞뒤 줄 바꿈도 되고 너비/높이 조정가능 <div> 태그 사용하여 인라인 요소를 블록레벨 요소로 바꾼 것과 비슷한 결과를 얻을 수 있음	태그로 묶인 덩어리는 인라인레벨 요소 줄 바꿈이 되지 않고 주변 텍스트에 연결되어 표시 너비/높이를 정할 수 없음

2. <span>&<div> 적용전 파일

① 메모장이나 VS Code 실행

②  코드 입력-블록 레벨 요소 <h1>과 인라인 요소 <a>에 각각 파란 테두리 표시

 

 

③ [파일 > 다른 이름으로 저장]

④ 파일 저장 위치 선택 /파일 이름 'div&span.html'로 입력/파일 형식은 모든 파일, 인코딩은 UTF-8 선택 후 [저장]

⑤ 저장한 파일을 더블 클릭

⑥ 웹 브라우저에서 문서 확인-제목은 크고 굵은 글씨로 되어 있고 제목, 본문, 단락은 모두 줄 바꿈/링크는 줄 바꿈이 되지 않는 인라인 요소인 것 확인!!

 

3. <span>&<div> 적용 파일

① 만들어놓은 div&span.html 파일에 마우스 놓고 연결 프로그램으로 메모장 선택

② 코드를 추가입력

블록 레벨 요소인 <h1> 복사하여 하나는 블록 레벨 요소인 <div> 태그로 감싸고, 하나는 인라인 요소인 <span> 태그로 감싸기

인라인 요소인 <a>를 블록레벨 요소인 <div> 태그로 감싸기

그런 후 <div>, <span> 영역을 빨간색 점선으로 테두리를 나타내도록 한 것입니다.

 

 

 

 

③ [파일] > [저장]

④ 저장한 파일을 더블클릭

⑤ 브라우저에서 제목과 링크 박스 테두리 확인

 

 

첫 번째 제목을 감싼 빨강 실선- <h1>은 블록 레벨 요소이므로 브라우저 너비를 꽉 채우고 있음

첫 번째 제목은 블럭레벨 요소인 <div> 태그로 감쌌으므로 마찬가지로 창을 꽉 채우는 초록 점선 박스로 감싸여 있음

​

두 번째 제목은 인라인 요소인 <span> 태그로 감쌌으므로 초록 점선이 '본문입니다.'에 이어져 있는 것을 확인

초록 점선이 링크를 감싼 빨강 테두리는 <a>가 인라인 요소이므로 링크 내용만큼만 표시

이를 감싼 <div> 태그는 블록 레벨 요소 이므로 초록 점선 박스가 브라우저 너비를 꽉 채우고 있는 것을 알 수 있음

​

결론- <div>나 <span> 태그를 쓰면 display와 달리 <h1>, <a> 자체가 블록 레벨/인라인 요소로 바뀌지는 않음

감싼 내부의 속성은 유지한 채 이를 포함하는 새로운 영역 재 설정하는 것이 중요 point!

 

 

 

믿음을 가진 1명은 흥미만 있는 99명과 맞먹는다

-존 스튜어트 밀-