div와 span을 필요한 곳에 사용하기

이번 단계에서 배울 내용

<div>는 여러 요소를 하나의 블록으로 묶을 때 사용하고, <span>은 문장 안의 짧은 부분만 따로 구분할 때 사용합니다. 두 요소 자체에는 특별한 의미가 없으므로 더 알맞은 시맨틱 요소가 없을 때 사용합니다.

class는 같은 역할을 하는 요소를 묶어 이름을 붙이는 속성입니다. class="summary"처럼 작성합니다.

예시

아래 코드는 사용 방법을 보여 주는 예시입니다. 문제의 정답과는 다른 내용입니다.

<div class="profile">
  <p>이름: <span class="name">민수</span></p>
  <p>등급: 초급</p>
</div>

해야 할 일

두 개의 요약 문단을 summary 클래스를 가진 하나의 <div>로 묶으세요. 첫 번째 문단의 3개 부분만 count 클래스를 가진 <span>으로 감쌉니다.

완성 조건

• class="summary"가 지정된 <div>를 한 개 만듭니다.
• 요약 <div>의 바로 안쪽에 두 개의 <p> 문단을 둡니다.
• 3개를 class="count"가 지정된 <span>으로 한 번 감쌉니다.
• count 영역 안의 글은 3개로 유지합니다.
• 페이지 제목은 <h1>부터 시작합니다.

작업 방법

1. 에디터에서 index.html을 엽니다.
2. TODO 주석이 있는 부분을 중심으로 코드를 수정합니다.
3. 미리보기에서 결과를 확인한 뒤 제출합니다.

별도의 입력값은 없습니다.

에디터에 준비된 index.html을 열고, 문제에서 안내하는 HTML 요소와 속성을 추가하거나 수정하세요. 브라우저 미리보기로 작성한 결과를 확인할 수 있습니다.

별도의 출력값은 없습니다.

수정한 index.html이 브라우저에서 정상적으로 열리고, 아래의 완성 조건을 모두 만족하면 됩니다.

도움말: <div>는 두 문단의 바깥에, <span>은 첫 번째 문단의 글자 중 3개 주위에 둡니다.