← 레벨 1 – 빌더

수업 2/12 ⏱ 25 분

제목, 단락 및 목록

페이지를 실제 콘텐츠로 채우고 명확하게 구성하는 방법을 알아보세요.

보여줄게: 콘텐츠에는 자체 태그가 있어.

HTML에는 모든 종류의 콘텐츠에 대한 전용 태그가 있어. 가장 많이 사용하게 될 기능은 다음과 같어.

<h1>Main heading – only once per page</h1>
<h2>A chapter heading</h2>
<h3>A smaller heading inside a chapter</h3>

<p>An ordinary paragraph of text.</p>
<p>Another paragraph. Every paragraph gets its own <p> tag.</p>

<p>You can <strong>make words bold</strong> or <em>italic</em>.</p>

제목은 다음에서 시작돼.<h1>(가장 큰) 아래로<h6>(가장 작은). 노트북처럼 작동해.<h1>표지에 있는 제목이고,<h2>는 챕터이고,<h3>s는 하위 장야.

목록

<!-- A bulleted list (ul = unordered list) -->
<ul>
  <li>first thing</li>
  <li>second thing</li>
</ul>

<!-- A numbered list (ol = ordered list) -->
<ol>
  <li>step one</li>
  <li>step two</li>
</ol>

모든 목록 항목은<li>이며 모두 다음 중 하나에 포함되어 있어.<ul>(글머리 기호) 또는<ol>(숫자).

💡
그 이상해 보이는 라인**주석**은 귀하만을 위한 메모이며 브라우저는 이를 무시해. 프로그래머는 코드에 이런 메시지를 남깁니다.

네 차례 💪

홈페이지를 콘텐츠로 채워보세요. 다음이 있어야 해.

  1. 하나<h1>(너는 이미 이것을 가지고 있어),
  2. 최소 2개의 챕터<h2>제목과 텍스트 단락,
  3. 적어도 하나의 목록(<ul>또는<ol>),
  4. 뭔가 대담한 것을 사용하여<strong>.

프로젝트를 위한 아이디어와 솔루션:

🏫 학교 웹사이트 – 아이디어 및 솔루션장은 *우리 학교 소개*, *현재 일어나고 있는 일*, 클럽 목록 등으로 구성될 수 있어.
<h1>Riverside Elementary School</h1>
<p>Welcome to our school's website.</p>

<h2>About Our School</h2>
<p>Our school has stood in Riverside for <strong>120 years</strong>. We have
350 students, a big gym, and a brand-new computer lab.</p>

<h2>Clubs</h2>
<ul>
  <li>floorball</li>
  <li>ceramics</li>
  <li>coding</li>
  <li>choir</li>
</ul>

<h2>Coming Up</h2>
<ol>
  <li>outdoor school (June)</li>
  <li>sports day</li>
  <li>winter fair</li>
</ol>
🙋 개인 웹사이트 - 아이디어 및 솔루션챕터는 *내가 좋아하는 것*, *내가 할 수 있는 것*, 좋아하는 게임이나 책 목록일 수 있어.
<h1>Hi, I'm Jake</h1>
<p>I'm 10 years old and this is my website.</p>

<h2>What I Like</h2>
<p>More than anything, I love <strong>soccer</strong> – I play for the youth team.
At home I build worlds in Minecraft and I'm learning to code.</p>

<h2>My Top Games</h2>
<ol>
  <li>Minecraft</li>
  <li>Mario Kart</li>
  <li>Rocket League</li>
</ol>

<h2>What I Can Do</h2>
<ul>
  <li>juggle a soccer ball</li>
  <li>make pancakes</li>
  <li>build a website (right now!)</li>
</ul>
🌍 여행 일지 – 아이디어 및 솔루션챕터는 *마지막 여행*, *우리가 향하는 곳*, 방문한 국가 목록일 수 있어.
<h1>Where We've Been 🌍</h1>
<p>A journal of our trips and adventures.</p>

<h2>Last Trip: The Mountains</h2>
<p>Over the summer we hiked <strong>the whole ridge</strong>. Three days of
walking, one wrong turn, and a hundred wild berries.</p>

<h2>Countries I've Visited</h2>
<ul>
  <li>United States</li>
  <li>Canada</li>
  <li>Mexico</li>
  <li>Italy</li>
</ul>

<h2>Next Year's Plan</h2>
<ol>
  <li>camping by the lake</li>
  <li>mountains out west</li>
  <li>the beach in Greece</li>
</ol>
⚽ 클럽 웹사이트 – 아이디어 및 솔루션챕터는 *클럽 정보*, *최근 결과*, 목록 형태의 명단일 수 있어.
<h1>Riverside Eagles FC</h1>
<p>The official website of our soccer club.</p>

<h2>About the Club</h2>
<p>We play in the district youth league. We train
<strong>Tuesdays and Thursdays at 5:00 PM</strong> on the field behind the school.</p>

<h2>Recent Results</h2>
<ol>
  <li>Eagles – Hawks 3 : 1</li>
  <li>Falcons – Eagles 2 : 2</li>
  <li>Eagles – Wildcats 4 : 0</li>
</ol>

<h2>Roster</h2>
<ul>
  <li>Jake – goalkeeper</li>
  <li>Matt – defense</li>
  <li>Owen – midfield</li>
  <li>Tom – forward</li>
</ul>
**직접 확인해:** 페이지에는 큰 제목, 작은 장 제목, 단락, 글머리 기호 또는 번호가 매겨진 목록이 하나 이상 있어. 실제(아직 옷을 입지 않은 경우) 웹사이트처럼 보야.

이번 수업에서 배울 점