코딩/HTML\CSS\JS

[html] MDN 정리2

낫띵온미 2023. 1. 3. 14:40

이미지

  • <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>