div, span 태그
div와 span 태그는 HTML 태그를 감싸 웹페이지를 구조화합니다.
div (division)
- 웹 페이지의 여러 부분을 구분하거나 그룹화하는 데 사용됩니다.
- 블록 레벨 요소입니다. 즉,
div는 기본적으로 화면의 전체 너비를 차지하며, 새로운 줄에서 시작하고 종료합니다. - 활용 예시:
div 요소 예시
<div>
<p>div 요소 내부 단락</p>
</div>
span
-
텍스트나 인라인 요소 내부에서 일부분을 선택하거나 스타일을 적용하기 위해 사용됩니다.
-
인라인 레벨 요소입니다. 즉, 텍스트의 흐름에서 새 줄 없이 연속해서 나타나며, 필요한 만큼의 너비만 차지합니다.
-
활용 예시:
span 요소 예시<p>이것은 <span>span 요소</span> 안의 문장입니다.</p>
참고로 div와 span 자체에는 시각적 스타일이나 기능이 없습니다. 대신 CSS(스타일)나 JavaScript(동작)와 함께 사용해 특정 부분을 스타일링하거나 동작을 부여할 때 활용합니다.
예를 들어 아래와 같은 CSS를 사용해 span 요소 내 텍스트를 빨간색으로 바꿀 수 있습니다.
span 요소에 스타일 적용
span {
color: red;
}
코드의 별표로 강조된 부분을 따라 입력해 보세요.
다음 내용이 궁금하다면?
코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!