추가 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> 요소입니다. 여기서 <figcaption> 요소와 함께 사용되는 <figure>를 사용하여 시각적 환경을 개선할 수 있음을 알 수 있습니다.

웹 전체에 이미지를 볼 수 있으며 기타 유용한 시각적 데이터는 항상 표시됩니다. 시각적 요소는 방문자의 관심을 끌고 훌륭한 사용자 환경을 제공하는 데 도움이 됩니다. <figure> 요소는 이미지, 표, 차트 등에 라벨을 지정하는 방법입니다. 기본 콘텐츠와 관련하여 독립적인 콘텐츠를 만드는 방식으로 작동합니다.

<time> 요소

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

<time> 요소는 의미와 의미론적 의미를 모두 제공하여 온라인에서 약속 예약, 블로그 기사의 날짜 및 시간 게시, 기록 보관 등의 활동을 통해 더 나은 기능을 제공합니다. <time> 요소를 사용하는 웹사이트의 예로는 Google 캘린더 사용, 플랫폼에 기사 게시, 도서관 웹사이트에서 온라인 기록 자료 읽기 등이 있습니다.

<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 내에 '위키백과'라는 제목의 위키백과 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 요소에 대한 이해도를 높였습니다. 계속해서 활동하세요.