div, span 태그

div와 span 태그는 HTML 태그를 감싸 웹페이지를 구조화합니다.

웹 페이지의 여러 부분을 구분하거나 그룹화하는 데 사용됩니다.

블록 레벨 요소로 기본적으로 화면의 전체 너비를 차지하며, 새로운 줄에서 시작하고 종료합니다.

복사
<div>
  <p>div 요소 내부 단락</p>
</div>

텍스트나 인라인 요소 내부에서 일부분을 선택하거나 스타일을 적용하기 위해 사용됩니다.

인라인 레벨 요소로 텍스트의 흐름에서 새 줄 없이 연속해서 나타나며, 필요한 만큼의 너비만 차지합니다.

복사
<p>이것은 <span>span 요소</span> 안의 문장입니다.</p>

참고로 div와 span 자체에는 시각적 스타일이나 기능이 없습니다.

대신 CSS(스타일)나 JavaScript(동작)와 함께 사용해 특정 부분을 스타일링하거나 동작을 부여할 때 활용합니다.

예를 들어 아래와 같은 CSS를 사용해 span 요소 내 텍스트를 빨간색으로 바꿀 수 있습니다.

복사
span {
  color: red;
}

코드의 별표로 강조된 부분을 따라 입력해 보세요.