본문으로 건너뛰기
실습하기

div, span 태그

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


div (division)

  • 웹 페이지의 여러 부분을 구분하거나 그룹화하는 데 사용됩니다.
  • 블록 레벨 요소입니다. 즉, div는 기본적으로 화면의 전체 너비를 차지하며, 새로운 줄에서 시작하고 종료합니다.
  • 활용 예시:
    div 요소 예시
    <div>
    <p>div 요소 내부 단락</p>
    </div>

span

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

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

  • 활용 예시:

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

참고로 divspan 자체에는 시각적 스타일이나 기능이 없습니다. 대신 CSS(스타일)나 JavaScript(동작)와 함께 사용해 특정 부분을 스타일링하거나 동작을 부여할 때 활용합니다.

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

span 요소에 스타일 적용
span {
color: red;
}

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

다음 내용이 궁금하다면?

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!