[230314] table | video | audio | iframe | SVG | form

오늘의 꿀팁

💡 신입 때 가장 중요한 것은 시간 내에 해내는 것!

💡 면접 때 질문 타임에 회사에 관심을 가진다면 생각해볼 수 있는 질문 말하기
ex) 회사 비즈니스 모델 문제점 어떻게 해결하고 있는지?

💡 포폴에 애니메이션 효과 사용해서 섬세한 개발자로 어필할 수 있다

📝 table

테이블(표)을 생성한다
<table>은 테이블 데이터의 컨테이너 요소

caption

테이블의 제목이나 설명
<table>의 첫번째 자식으로 사용해야 한다
표의 목적에 대한 명확하고 상세한 설명을 포함하는 <caption> 요소를 제공하여 사용자가 표 콘텐츠를 확인할지, 넘어갈지 결정할 때 도움을 줄 수 있다
caption-side: top;, caption-side: bottom;으로 위치를 설정 할 수 있다

thead, tbody, tfoot

테이블의 머리글, 본문, 바닥글
구역을 나누는 요소로 사용한다
필수 요소는 아니지만 JS로 <table>을 컨트롤 할 때, 예를 들어 <tbody>를 컨트롤 할 때 <thead>가 없으면 문제가 되기 때문에 써줘야 한다

• <thead>: 테이블 행 블록(row block) 내에 제목 열 그룹(column headers)으로 구성할 경우 사용
• <tbody>: 행 블록 내에 테이블 데이터로 구성할 때 사용
• <tfoot>: 행 블록 내에 열 요약(column summaries)로 구성할 때 사용

tr, th, td

• tr: table row
• th: table header
• td: table data

colgroup

테이블 열 그룹을 만들고 싶을 때 사용한다

col

테이블 열을 하나 이상 묶을 때 사용한다
<colgroup> 요소 내부에 포함한다
선택적으로 사용하며 필수 요소는 아니다
CSS와 함께 col에 스타일을 지정할 수 있다

<table>
    <caption>Superheros and sidekicks</caption>
    <colgroup>
        <col>
        <col span="2" class="batman">
        <col span="2" class="flash">
    </colgroup>
    <tr>
        <td>&nbsp;</td>
        <th scope="col">Batman</th>
        <th scope="col">Robin</th>
        <th scope="col">The Flash</th>
        <th scope="col">Kid Flash</th>
    </tr>
    <tr>
        <th scope="row">Skill</th>
        <td>Smarts</td>
        <td>Dex, acrobat</td>
        <td>Super speed</td>
        <td>Super speed</td>
    </tr>
</table>

속성값

scope

행(row) 또는 열(col), 행그룹(rowgroup), 열그룹(colgroup)의 속성값으로 셀의 범위를 지정한다
<th> 태그에 사용한다
간단한 표의 경우 범위를 자동으로 유추할 수 있기 때문에 불필요하다

colspan, rowspan

셀병합 속성

• colspan: 열 병합
• rowspan: 행 병합

표 접근성 높이기

scope, id-headers로 셀의 내용과 셀의 관계를 지정할 수 있다
제목과 셀 내용을 함께 읽어주기 때문에 데이터의 관계를 좀 더 쉽게 파악 할 수 있다

scope

제목 셀이 명확한 단순한 표의 경우에 적용하여 표 구조를 나타낸다

id - headers

셀이 병합된 표이거나 내용이 많아 복잡한 경우, 제목 셀이 2줄 이상이 되어 복잡한 경우 id-headers로 명확하게 연결하는 것이 좋다

💡 값이 없거나 빈 셀의 경우  (공백)을 삽입하거나 ‘없음’과 같은 텍스트를 삽입한 후 CSS를 사용하여 숨김처리 한다면 접근성을 높일 수 있다

📝 video

• autoplay: 동영상 자동 재생
• controls: 재생, 정지 등 조작 메뉴 노출
• loop: 동영상 반복 재생
• poster: 동영상 재생 전에 보여 줄 이미지
• preload: 페이지를 열 때 무엇을 로드할지 결정
  • none : 비디오 파일을 미리 로딩 X. 서버가 최소한의 트래픽을 유지하며 페이지 로딩이 좀 더 빨라진다
  • metadata : 비디오 파일을 미리 로딩하지 않지만 파일의 메타데이터(예를 들어서 영상의 길이)를 미리 가져오도록 한다
  • auto : 비디오 파일을 미리 로딩하여 사용자가 바로 영상을 볼 수 있도록 준비한다
• src: 동영상 주소
• type: 동영상 타입
• <track> : <video> 혹은 <audio> 요소의 자식으로 자막과 같은 시간 기반 텍스트 데이터(텍스트 트랙)를 보여주고자 할 때 사용한다
  • kind : subtitles(자막), captions(설명) 등의 텍스트 트랙의 종류를 지정
  • srclang : 텍스트 트랙의 언어를 지정
  • label : 텍스트 트랙의 제목을 지정

<video src="batman.mp4" width="450" height="300" controls autoplay loop></video>

📝 audio

<audio> 태그가 공식적으로 지원하는 표준 오디오 파일 : MP3 WAV Ogg

• src : 파일의 경로 명시
• controls : 기본적인 동작을 조절하는 패널 명시
• autoplay: 자동 재생 여부 명시
• loop : 반복 재생 여부 명시
• preload: 파일의 내용을 모두 불러올지 여부 명시

<audio src="폴더/파일명" controls autoplay loop></audio>

💡 <video> 혹은 <audio> 요소의 자식으로 <source> 요소와 <track> 요소를 사용하여 좀 더 사용자 친화적인 비디오/오디오를 구현하거나 크로스브라우징을 위해 여러 포맷의 파일을 지원할 수 있다.

<video controls poster="batman.jpeg" preload="auto" width="450" height="300">
	<source src="batman.mp4" type="video/mp4">
	<source src="batman.ogv" type="video/ogg">
	<source src="batman.webm" type="video/webm">
	<track kind="subtitles" src="foo.en.vtt" srclang="ko" label="batman">
</video>

<audio controls>
    <source src="flow.ogg" type="audio/ogg">
    <source src="flow.mp3" type="audio/mpeg">
</audio>

📝 iframe

inline frame
현재 웹페이지에 다른 HTML 페이지를 포함시켜 중첩하는 기능을 제공한다

• src: 삽입될 문서의 주소
• width: 너비 지정(px,%)
• height: 높이 지정(px,%)
  width: 100%;를 준 경우 CSS에서 aspect-ratio로 설정할 수 있음
• frameborder: 테두리 표시 여부(0: 테두리 있음, 1: 테두리 없음)
• scrolling: 스크롤바 표시 유무(yes,no,auto)
• longdesc: 내용을 설명하는 페이지
• marginwidth: left(좌), right(우), 여백공간(margin)
• align: 정렬(top, middle, bottom, left, right)
• allow : iframe에서 허용할 기능들 지정
• allowfullscreen : 전체화면 지원

<iframe 
	width="1280" 
	height="720" 
	src="https://www.youtube.com/embed/-iuX3r8PSzU" 
	frameborder="0" 
	allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
	allowfullscreen>
</iframe>

💡 일부 사이트에서는 아이프레임을 거부하기도 한다

📝 SVG

확장 가능한 벡터 그래픽(scalable vector graphics)
XML 기반의 2차원 그래픽
HTML 태그의 집합으로 이루어져 있다
∴ css와 javascript로 컨트롤이 가능하다

장점
확대: 아무리 확대를 해도 이미지가 깨지지 않는다
용량: 이미지의 크기를 키워도 용량이 늘어나지 않는다

단점
용량: 복잡한 이미지의 경우 코드가 길어져 파일 사이즈가 커진다

사용방법

이미지에 조작이 필요하다면 인라인으로 넣어준다

1. 이미지 태그로 사용하기

<img src="icon-home.svg" alt="home">

2. CSS background 배경으로 넣기

background: url(./icon-home.svg) no-repeat 50% 50% / contain;

3. 인라인으로 넣기

<button class="inline">
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path
      d="M3 9L12 2L21 9V20C21 20.5304 20.7893 21.0391 20.4142 21.4142C20.0391 21.7893 19.5304 22 19 22H5C4.46957 22 3.96086 21.7893 3.58579 21.4142C3.21071 21.0391 3 20.5304 3 20V9Z"
      stroke="#767676" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
    <path d="M9 21V12H15V21" stroke="#767676" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
  </svg>
  <span class="a11y-hidden">Home</span>
</button>

📝 form(양식)

사용자에게 입력받은 정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획

• method : 양식을 제출할 때 사용할 HTTP 메서드
  • post : 양식 데이터를 요청 본문으로 전송
  • get : 양식 데이터를 action URL과 ? 구분자 뒤에 이어 붙여서 전송
• action: 양식 데이터를 처리할 프로그램의 URI
• autocomplete: 입력요소가 자동완성된 값을 기본값으로 가질 수 있는지 나타냄
  • off : 자동입력 X
  • on : 자동입력 O

input

<input type="">

label

사용자 인터페이스의 항목
<input>과 함께 사용한다
- 스크린리더기에서 입력해야 하는 내용이 무엇인지 사용자에게 쉽게 이해할 수 있게 한다
- <label>을 클릭하여 <input>에 포커스를 이동시키거나 활성화시킬 수 있다

for-id 이용하여 연결하기

<label for="user-id">아이디</label>
<input id="user-id" type="text">

label 안에 input 중첩하여 연결하기

<label>
	아이디
	<input type="text">
</label>

💡 <label> 요소 안에 <a> 또는 <button>과 같은 인터랙티브 요소를 배치하지 않는다
💡 <label> 요소 안에 제목 요소를 배치하지 않는다
<form>에 제목이 필요한 경우 <fiedset>, <legend>를 사용한다

select

옵션 메뉴를 제공한다

• multiple : 여러 개의 항목 동시에 선택 가능
• size : 한번에 노출되는 항목의 수 조절
• required : 선택 필수
• disabled : 선택 불가

option

메뉴의 각 옵션을 정의한다
모든 <option>은 자신이 선택됐을 때의 값으로 사용할 value 속성이 필요하다
지정하지 않은 경우 option 내 텍스트 값으로 사용한다

• selected : 해당 옵션을 선택한 상태로 페이지를 불러온다

optgroup

option 요소를 optgroup 요소 안에 배치하면 드롭다운 내에서 옵션그룹을 나눌 수 있다

• label : 옵션그룹 이름 지정

💡 <select> CSS로 꾸미기

<select> 요소는 CSS를 사용해 스타일을 적용하기 어렵다
간단한 border, font, background 등의 일부 스타일을 바꿀 수는 있다
appearance 속성을 사용하면 기본 브라우저를 통해 설정된 외형을 제거할 수도 있다
하지만 브라우저별 해당 내부 구조가 복잡하기 때문에
<select>를 클릭했을때의 모습 등 원하는 모습으로 완전히 커스텀하기에는 어렵다
그래서 <select>가 아닌 다른 html 요소들과 JavaScript 등을 사용하여 완전히 별도의 드롭다운 메뉴를 만들어야 한다

filedset

form 관련 요소들을 묶을 때 사용한다
disabled를 사용할 경우 모든 자손 컨트롤을 비활성화한다

legend

그룹의 제목을 제공한다

datalist

<input>과 <select> 기능을 합친 개념이다
사용자에게 기본적으로 선택할 수 있는 옵션을 제공하고, 옵션값에 원하는 값이 없을 경우 사용자가 다른 값을 입력할 수 있도록 한다

textarea

여러 줄의 text를 입력받을 수 있다

• cols: 입력창의 너비. 문자의 평균적인 넓이를 기준으로 한다
• rows: 기본적으로 보여줄 입력 줄 수
• maxlength: 사용자가 입력할 수 있는 문자 최대 길이
• minlength: 사용자가 입력해야 할 문자 최소 길이
• placeholder: 컨트롤에 무엇을 입력해야하는지 알려주는 힌트

<textarea> 크기 비활성화 CSS

textarea{
	resize:none;
}