[html] MDN 정리2

이미지

• <img> : void element (자식노드X, 닫는 태그X), repalced element (스타일 적용X)
  • src : URL
  • alt : 이미지를 불러올 수 없을 경우 대체 텍스트
  • width : 가로 사이즈
  • height : 세로 사이즈
  • title : 추가 설명, 굳이 권장X
• <figure> - <figcaption> : 이미지와 캡션을 의미있게 연결

<figure>
 <img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"
 alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"
 width="200"
 height="171">
 <figcaption>A T-Rex on display in the Manchester University Museum</figcaption>
</figure>

• CSS background-image
  • HTML image보다 위치조정이 쉬움
  • 의미없는 장식용 이미지

p {
  background-image: url("images/dinosaur.jpg");
}

---

비디오/오디오

비디오

<video src="rabbit320.webm" controls>
  <p>
    Your browser doesn't support HTML video. Here is a
    <a href="rabbit320.webm">link to the video</a> instead.
  </p>
</video>

• <video>
  • src : 소스 파일, URL
  • controls : 재생 제어
  • 내부 단락 : 대체 콘텐츠

<video
  controls
  width="400"
  height="400"
  autoplay
  loop
  muted
  preload="auto"
  poster="poster.png">
  <source src="rabbit320.mp4" type="video/mp4" />
  <source src="rabbit320.webm" type="video/webm" />
  <p>
    Your browser doesn't support this video. Here is a
    <a href="rabbit320.mp4">link to the video</a> instead.
  </p>
</video>

• width/height : 동영상 크기 제어, 기본 단색으로 여백 채움
• autoplay : 즉시 재생
• loop : 끝날 때마다 다시 재생
• muted : 음소거 상태로 미디어 재생
• poster : 재생 전 이미지 URL
• preload : 버퍼링
  1. none : 버퍼링X
  2. auto : 미디어 파일 버퍼링
  3. metadata : 메타데이터만 버퍼링

오디오

<audio controls>
  <source src="viper.mp3" type="audio/mp3" />
  <source src="viper.ogg" type="audio/ogg" />
  <p>
    Your browser doesn't support this audio file. Here is a
    <a href="viper.mp3">link to the audio</a> instead.
  </p>
</audio>

• 시각적 구성 요소 없음
  • width/height
  • poster

대본

• WebVTT : 비디오의 시간, 위치정보와 같은 메타데이터 + 텍스트파일을 작성하기 위한 형식
  • 큐 : 텍스트 문자열
  • 자막, 캡션, 시간 설명

WEBVTT

1
00:00:22.230 --> 00:00:24.606
This is the first subtitle.

2
00:00:30.739 --> 00:00:34.074
This is the second.

…

• <track>

 <track kind="subtitles" src="media/subtitles_en.vtt"
    srclang="en" label="English">

---

iframe

• Youtube 

<iframe width="560" 
height="315" 
src="https://www.youtube.com/embed/TaKGMDibZek"
title="YouTube video player" 
frameborder="0" 
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

• 구글맵

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d12653.810751273528!2d127.03505319075236!3d37.54439707841293!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sko!2skr!4v1672727549959!5m2!1sko!2skr" 
width="600" 
height="450" 
style="border:0;" 
allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

• border: none : 테두리 없이 표시, default = 테두리 표시
• allowfullscreen : 전체화면
• src : URL
• sandbox : 강화된 보안 설정 요청

<object>

<object data="media/mypdf.pdf" type="application/pdf"
width="400"
height="600">
<p>You don't have a PDF plugin, you can <a href="media/mypdf.pdf">download the PDF file</a></p>
</object>

---

벡터 그래픽

레스터 이미지

• 픽셀 그리드(위치정보) 사용하여 정의
• .bmp .png .jpg .gif
• 확대 시 깨짐

벡터 이미지

• 알고리즘 사용하여 정의
• 이미지가 어떻게 보여야 하는지 알아내는 모양 및 경로 정의 포함
• 필셀 정보X -> 가벼움
• svg 형식 사용
• 확대해도 선명

SVG

<svg
  version="1.1"
  baseProfile="full"
  width="300"
  height="200"
  xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%" fill="black" />
  <circle cx="150" cy="100" r="90" fill="blue" />
</svg>

• xml 기반 언어
  • 콘텐츠가 아닌 그래픽을 표시하기 위한 것
• 벡터 이미지 텍스트에 계속 접근 가능
• CSS, JavaScript로 접근 가능
• 복잡한 이미지의 경우 크기大 -> 래스터 그래픽이 나음
• <a>를 중첩하여 하이퍼링크로 만들 수 있음

---

form 태그

• name : 폼의 이름
• action : 폼 데이터가 전송되는 백엔드 url
• method : 폼 전송 방식 (GET/POST)

input

• 사용자가 양식을 입력하는 태그
• type : 종류
  • text : 일반 문자
  • password : 비밀번호
  • button : 버튼
  • submit : 양식 제출 버튼
  • reset : 양식 초기화 버튼
  • radio : 한개 선택
  • checkbox : 다수 선택
  • file : 파일 업로드
  • hidden : 보이지 않는 요소

<form>
	<p>
		<strong>아이디</strong>
		<input type="text" name="name" value="아이디 입력">
	</p>
	<p>
		<strong>비밀번호</strong>
		<input type="password" name="password" value="비밀번호 입력">
	</p>
	<p>
		<strong>성별</strong>
		<input type="radio" name="gender" value="M">남자
		<input type="radio" name="gender" value="F">여자
	</p>
	<p>
		<strong>응시분야</strong>
		<input type="checkbox" name="part" value="eng">영어
		<input type="checkbox" name="part" value="math">수학
	</p>
	<p>
		<input type="submit" value="제출">
	</p>
</form>

select, option

• 드롭다운 리스트 만듦

<select>
	<option value="ktx">KTX</option>
	<option value="itx">ITX 새마을</option>
	<option value="mugung">무궁화호</option>
</select>