[HTML] HTML 태그 모음

1. 임베디드(Embedded) 요소

(1) <img>

 

(2) <video>

💬 예시

<!-- 방법1 : 4개의 소스 중에서 브라우저가 최적화되는 파일을 가져온다. -->
<video class="fullsize" poster="video/poster.jpg" controls autoplay muted>
  <!-- autoplay는 muted와 함꼐 지정해야된다. -->
  <source src="video/google-developer-stories.mp4" type="video/mp4" />
  <source src="video/google-developer-stories.mov" type="video/mov" />
  <source src="video/google-developer-stories.ogg" type="video/ogg" />
  <source src="video/google-developer-stories.webm" type="video/webm" />
  <track src="video/google-developer-stories-subtitles-en.vtt" kind="captions" srclang="en" label="English Caption" />
  <!-- 웹에서의 자막 : .vtt 확장자를 많이 사용 (vs 동영상에서는 msi) -->
  <!-- srclang: 자막언어, label할당한다는 뜻 -->
</video>

<!-- 방법2 : src를 직접 video에 넣을 수 있다. -->
<video class="fullsize" poster="video/poster.jpg" src="video/google-developer-stories.mp4" controls></video>

✏️ 결과

좌: autoplay로 재생중 / 우: autoplay 없이 controls만 있는 경우

(3) <audio> : 오디오 콘텐츠 요소

 

(4) <iframe> : 인라인 프레임 요소

💬 예시

<!-- title 사용O, aria-label 사용X -->
<iframe 
  width="560" 
  height="315" 
  src="https://www.youtube.com/embed/x2XX3cNW4K0?si=XPumnL8qCnDXO1Gi" 
  title="악동뮤지션 - give love"
  frameborder="0" 
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
  referrerpolicy="strict-origin-when-cross-origin" 
  allowfullscreen
>
</iframe>

<!-- title 사용X, aria-label 사용O -->
<iframe 
  width="560" 
  height="315" 
  src="https://www.youtube.com/embed/x2XX3cNW4K0?si=XPumnL8qCnDXO1Gi"
  aria-label="악동뮤지션 - give love"
  frameborder="0" 
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
  referrerpolicy="strict-origin-when-cross-origin" 
  allowfullscreen
>
</iframe>

<!-- 참고) allowfullscreen : 영상을 전체화면이 가능하도록 -->

(5) <map> : 이미지 맵(클릭 가능한 링크 영역) 요소

(6) <area> : 이미지의 핫스팟(hotspot) 영역 지정 요소

💬 예시

<!-- img의 #image-map과 map의 id을 동일시하여 연결 -->
<img src="images/sns.png" usemap="#image-map">

<map id="image-map">
  <!-- <map> 안에는 <area>태그 사용 -->
  <area target="_blank" alt="페이스북" title="페이스북" href="https://www.facebook.com/" coords="15,15,14" shape="circle">
  <area target="_blank" alt="인스타그램" title="인스타그램" href="https://www.instagram.com/" coords="65,15,14" shape="circle">
  <area target="_blank" alt="유튜브" title="유튜브" href="https://www.youtube.com/" coords="115,15,14" shape="circle">
  <!-- 
    <area>
    1) 하이퍼링크 요소인 href, target이 있다.
    2) title속성의 값은 이미지에 마우스 올렸을 때 툴팁 (ex) <img>의 alt="대체텍스트" )
    3) shape: 모양, coords: 영역표시
  -->
</map>

✏️ 결과

(7) : Scalable Vector Graphic

💬 예시

<img src="./images/netflix.svg" alt="" />
<!-- img 자원을 브라우저에게 요청-->
<!-- svg코드는 img뿐만 아니라 svg태그로 할 수 있다. -->
  
<svg
  aria-label="넷플릭스"
  width="210"
  height="57"
  viewBox="0 0 210 57"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
>
  <style>
    path {
      fill: #e50914;
    }

    @media (prefers-color-scheme: dark) {
      path {
        fill: #007500;
      }
    }
  </style>
  <path
    d="M198.768 27.1332L210 57C206.689 56.5245 203.38 55.9297 200.009 55.3954L193.682 38.8904L187.18 54.0313C183.988 53.497 180.853 53.3172 177.661 52.9022L189.072 26.777L178.725 0H188.304L194.097 14.961L200.306 0H210L198.768 27.1332ZM171.158 0H162.467V51.775C165.305 51.953 168.261 52.0706 171.158 52.4268V0ZM154.958 51.1802C147.036 50.6459 139.113 50.1722 131.015 49.9923V0H139.881V41.5617C144.967 41.681 150.051 42.096 154.958 42.3328V51.1802ZM121.554 20.2466V29.1527H109.436V49.3993H100.685V0H125.516V8.90608H109.436V20.2466H121.554ZM85.7857 8.90608V49.8748C82.8296 49.8748 79.8151 49.8748 76.9175 49.9923V8.90608H67.7533V0H95.0085V8.90608H85.7857ZM58.1758 29.6264C54.2746 29.6264 49.6623 29.6264 46.3516 29.8063V43.047C51.5544 42.689 56.7572 42.2741 62.0185 42.096V50.6459L37.4835 52.6066V0H62.0185V8.90608H46.3516V20.8984C49.7811 20.8984 55.0424 20.7203 58.1758 20.7203V29.6264ZM9.04547 24.64V55.7516C5.85358 56.1096 3.01457 56.5245 0 57V0H8.45497L19.983 32.36V0H28.8512V53.3172C25.7178 53.8532 22.5259 54.0313 19.1549 54.505L9.04547 24.64Z"
    fill="currentColor"
  />
</svg>
<!-- 이미지 자원을 요청X -->

✏️ 결과

prefers-color-scheme: light 의 경우

prefers-color-scheme: dark 의 경우

---

1. 테이블(table)

- 행과 열로 구성된 구조화된 데이터의 집합(표 형식의 데이터)이다.

- <table> : 테이블 요소

- <caption> : 테이블의 제목

- <col> : 테이블의 열 요소

- <tr> : 테이블의 행 요소

- <th> : 테이블의 제목 셀 요소

- <td> : 테이블의 내용(데이터) 셀 요소

- <thead> : 테이블의 헤더 행 블록

- <tbody> : 테이블의 바디 블록

- <tfoot> : 테이블의 푸터 블록

💬 예시

<table>
  <caption>성적표</caption>
  <thead>
    <tr>
      <th scope="col">&nbsp;</th>
      <th scope="col">A</th>
      <th scope="col">B</th>
      <th scope="col">C</th>
      <th scope="col">D</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">국어</th>
      <td>100</td>
      <td>80</td>
      <td>60</td>
      <td>70</td>
    </tr>
    <tr>
      <th scope="row">수학</th>
      <td>90</td>
      <td>50</td>
      <td>70</td>
      <td>90</td>
    </tr>
    <tr>
      <th scope="row">영어</th>
      <td>50</td>
      <td>70</td>
      <td>60</td>
      <td>70</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">합계</th>
      <td>240</td>
      <td>200</td>
      <td>190</td>
      <td>210</td>
    </tr>
  </tfoot>
</table>

✏️ 결과