2.2 HTML 그룹짓기

웹 페이지를 제작하다보면 관련 있는 요소로 그룹을 묶어야 하는 경우가 많습니다. 예를 들어, 네이버 메인 페이지는 검색 영역, 로그인 영역, 본문 배너 영역, 사이드 배너 영역 등등 나누어져있다.

이때 div, span 태그를 사용하고 이런 태그를 공간 분할 태그라고 한다.

div 태그

div 태그는 블록요소와 인라인요소를 그룹으로 묶을 때 사용한다.

형식

💡 <div></div>

<div class = "movie">
	<p>책 소개</p>
	<p>책을 소개하는 페이지 입니다.</p>
</div>
<div class = "tv">
	<p>tv 메뉴 소개</p>
	<p>tv 메뉴를 소개하는 페이지 입니다.</p>
</div>

• div 태그를 활용해 관련 요소를 그룹으로 묶는다.
• HTML 문서 구조가 이해하기 쉽고 깔끔해진다.
• 참고로 class 속성은 CSS를 적용하기 위한 식별자로 해당 클래스 부분만 디자인을 적용 할 수 있다.

span 태그

형식

span 태그는 인라인요소를 그룹으로 묶을 때 사용한다.

💡 <span> </span>

<div class = "movie">
	<p>책 소개</p>
	<p>이 책의 <span>중요한 </span> 장면은 바로 여기입니다.</p>
</div>

위 코드에서 "중요한"이라는 단어만 디자인을 다르게 적용하고 싶다면 어떻게 해야할까요?

따로 적용하기 위해서는 하이라이트 단어부분의 공간을 분리해야한다.

텍스트는 인라인 요소이므로 span 태그로 그룹을 지을 수 있다.