추가 HTML 요소

이전 활동에서 배운 내용은 다음과 같습니다.

  • HTML 태그 및 요소의 기본사항
  • 웹페이지를 구성하는 방법
  • 시맨틱 HTML 및 권장사항

이 도움말에서는 계속해서 HTML 관련 지식을 쌓고 추가적인 HTML 요소를 알아봅니다.

텍스트 콘텐츠 요소

<p>To make text bold via CSS, use the <code>font-weight</code> property with the <code>bold</code> property value.</p>

이러한 요소는 텍스트 콘텐츠 생성을 지원하고 구조, 스타일, 의미를 더합니다. 다음 요소를 통합할 수 있는 여러 텍스트 콘텐츠가 있습니다.

인용구 지정 요소

<blockquote cite="https://www.goodreads.com/quotes">
    <p>Be the change that you wish to see in the world.</p>
</blockquote>

이 예에서는 <blockquote> 요소를 사용하여 마하트마 간디의 유명한 인용문을 보여주는 방법을 보여줍니다. 기억에 남는 내용과 의미를 제공하는 멋진 인용문이 많습니다. 좋아하는 인물과 인용문을 생각해 보세요.

인용구를 사용하거나 출처의 정보를 참조할 때 <blockquote> 요소를 사용합니다. <blockquote> 요소는 프레젠테이션에 고유한 들여쓰기와 정렬을 만들고 여는 태그와 닫는 태그를 모두 사용합니다. <blockquote>는 여러 줄의 텍스트를 덮는 긴 따옴표를 사용할 때 특히 유용합니다.

<blockquote> 요소 내에서 헤더, 단락, 목록과 같은 다양한 요소를 사용할 수도 있습니다.

<details> 요소

<details>
   <summary>Details</summary>
   Additional Information
</details>

웹페이지에는 사용자가 이용할 수 있는 FAQ 섹션과 추가 정보가 있는 경우가 많습니다. 제품 정보, 여행 일정 또는 모든 종류의 질문 및 답변 시나리오에 대해 일반적인 FAQ 섹션이 있습니다.

<details> 요소는 추가 정보를 보유하는 공개된 위젯을 사용하는 데 유용합니다. 이 요소에는 기본 제공 전환 기능이 포함되어 있으며 사용자가 전환 버튼을 열고 닫을 수 있습니다. 전환 버튼이 열리면 추가 정보 콘텐츠가 펼쳐지고 사용자가 읽을 수 있습니다. 전환 버튼이 닫히면 추가 정보 콘텐츠가 사용자에게 표시되지 않습니다. <details> 위젯 자체의 이름을 지정하려면 <summary> 요소를 사용합니다. 

<figure>
  <img
    src="https://upload.wikimedia.org/wikipedia/commons/2/2f/Google_2015_logo.svg"
     alt="Google logo">
  <figcaption>Google logo</figcaption>
</figure>

<figure> 요소가 작동하는 모습입니다. 여기에서 <figure>를 <figcaption> 요소와 함께 사용하여 시각적 환경을 개선할 수 있습니다.

웹 여기저기에서 이미지를 보고 다른 유용한 시각적 데이터를 항상 확인할 수 있죠. 시각적 요소는 방문자의 관심을 끌고 우수한 사용자 환경을 제공하는 데 도움이 됩니다. <figure> 요소는 이미지, 표, 차트 등의 라벨을 지정하는 방법입니다. 기본 콘텐츠와 관련하여 자체 포함된 콘텐츠를 만드는 방식으로 작동합니다.

<time> 요소

<p>The movie starts on Tuesday at <time datetime="2021-07-01T11:00:00">11:00</time>.</p>

<time> 요소는 의미와 시맨틱 의미를 모두 제공하므로 온라인으로 예약, 블로그 기사의 날짜와 시간 게시, 자료실 등의 활동을 통해 더 나은 기능을 제공할 수 있습니다. <time> 요소를 사용하는 웹사이트의 예로는 Google Calendar 사용, 플랫폼에 실시간으로 기사 게시, 도서관 웹사이트에서 온라인 기록 자료 읽기 등이 있습니다.

<time> 요소는 시간을 참조하며, 24시간 기준의 시간 또는 시간대와 위치에 맞게 조정할 수 있는 특정 날짜를 나타낼 수 있습니다. 이 요소에는 여는 태그와 닫는 태그인 <time> 및 </time>가 모두 필요합니다. 시스템이 읽을 수 있는 형식으로 날짜를 읽을 수 있도록 datetime 속성을 추가할 수 있습니다.

문서 메타데이터

<title>Sarah's Favorite Food Recipes</title>

웹사이트 URL을 입력할 때마다 브라우저 표시줄이나 웹페이지 탭에서 <title> 이름을 읽을 수 있습니다. 웹페이지에 지정된 제목 이름입니다. 이 요소는 중요한 요소로, 검색엔진에서 검색 결과에 관련 웹페이지 목록을 표시하는 데 사용됩니다. 제목의 길이는 짧거나 설명이 많거나 길고 설명이 많을 수 있습니다.

시나리오: 생각하고 있는 웹페이지가 있는데 특정 웹사이트 URL을 기억하지 못하는 경우입니다. 검색엔진에 키워드를 입력합니다. 검색 엔진은 사용자가 찾는 웹페이지를 추적하는 데 도움을 주며 검색결과에 표시되는 <title> 이름을 볼 수 있습니다.

삽입된 콘텐츠 요소

텍스트 콘텐츠 외에도 사용할 수 있는 다양한 추가 콘텐츠 요소가 있습니다.

<iframe> 요소

<iframe src="https://www.wikipedia.org/" title="Wikipedia"></iframe>

온라인에서 상품 쇼핑을 마친 후 PayPal 또는 Apple Pay와 같은 결제 옵션을 클릭하면 일반적으로 이러한 기능이 <iframe>를 사용하여 웹페이지에 추가됩니다. 온라인에서 지도를 보면서 지역 업체를 검색하는 것도 또 다른 일반적인 경험입니다. 웹페이지에서 이러한 유형의 사용자 환경은 iframe을 사용하여 추가할 수 있습니다. 위 예에서 보면 iframe 내에 'Wikipedia'라는 제목의 Wikipedia URL이 있습니다.

<iframe> 요소를 사용하면 다른 소스의 콘텐츠를 삽입하고 웹페이지 내에 프레임을 삽입할 수 있습니다. 직사각형 모양의 프레임을 만들고 브라우저에 콘텐츠를 표시합니다. 프레임을 사용하면 <iframe> 요소 내에 창 모양의 레이아웃을 표시할 수 있습니다. 웹 페이지에 콘텐츠를 추가하여 사용자 환경을 개선할 수 있는 효과적인 방법입니다.

양식 요소

<progress max="100" value="30"> 30% </progress>

긴 동영상 또는 강의를 시청하거나 광범위한 지원서를 작성할 때 시각적 진행률 표시줄이 진행 상황을 추적하는 데 도움이 될 수 있습니다. <progress> 요소는 이러한 유형의 시나리오에서 유용합니다.

이 요소는 배경 색상이 있는 시각적 바로 표시됩니다. 시각적 막대는 크기와 배경 색상이 다양할 수 있습니다. 진행률 표시줄을 통해 선택적으로 max 및 value 속성을 사용할 수 있습니다. max 속성은 부동 소수점 숫자를 설정하고 value 속성은 작업의 진행 정도를 기록합니다.

스크립트 작성

<canvas id="canvas"></canvas>

실시간으로 그래픽과 애니메이션을 그리려면 <canvas> 요소를 사용합니다. <canvas> 요소를 HTML 웹페이지에 배치하여 캔버스를 만듭니다. 이 요소에는 그래픽을 그리고 만드는 기능을 위한 JavaScript 코드가 필요합니다.

표 콘텐츠 요소

<table>
    <thead>
        <tr>
            <th colspan="2">Grocery List</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Broccoli</td>
            <td>Quantity: 2</td>
        </tr>
    </tbody>
</table>

<table> 요소

<table> 요소는 테이블을 만듭니다. 이는 행과 열이 있는 추가 요소를 추가하기 위한 시작점입니다. 표는 웹페이지에 자주 표시되므로 정보를 정리하고 표시하는 데 유용합니다. <table> 요소를 사용하는 한 가지 사용 사례는 스프레드시트에서 찾을 수 있는 정보의 종류와 같은 표 형식 정보를 사용자에게 표시하는 것입니다.

<th> 요소

<th> 요소는 셀 그룹의 헤더입니다.

<tr> 요소

<tr> 요소는 표 내의 셀 행을 정의합니다. 여기에서 특정 셀 데이터를 추가할 수 있습니다.

<td> 요소

<td> 요소는 셀을 만들어 필요한 내용을 추가합니다.

결론

이 도움말에서는 추가적인 HTML 요소를 알아보고 코딩 기술을 익혔습니다. 콘텐츠, 인라인 텍스트, 삽입된 콘텐츠, 표 요소에 관해 자세히 알아봤습니다. 이제 추가 HTML 요소를 이해했습니다. 계속해서 활동하세요.