TIL 03.31

1. Git

형상 관리 툴 종류 중 하나
로컬 저장소와 원격 저장소로 나뉘어 로컬 저장소(내 컴퓨터)에서 파일을 작성해 원격 저장소로 보낼 수 있음
필요에 따라 원격 저장소에서 로컬 저장소로 필요한 파일을 가져올 수 있음
(ex 로컬 파일이 손상되었을 경우)

1️⃣ CLI

1. Desktop으로 이동(원하는 폴더 경로로 이동)

cd desktop
# cd .. 로 상위 폴더 이동 가능

2. git-test 폴더 생성

mkdir git-test

3. git 저장소 사용 선언

git init

4. README 파일 생성

touch README.md

초기 설정

echo "# commit-test" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/userID/repository-name.git
git push -u origin main

2️⃣ gitignore

파일을 commit 할 때 포함하지 않고 싶은 파일 목록을 지정할 수 있음
.gitignore 자동 생성기

node_modules는 파일의 용량이 크기 때문에 포함하지 않음

2. Embedded Content (2)

1️⃣ iframe

현재 HTML 페이지에서 또 다른 HTML 페이지를 보여주고 싶을 때 사용

• 기본값: height 150px, width 300px
• frameborder : 테두리 생성 여부(CSS의 border 속성이 대체함)
• allow : iframe에서 허용할 기능 지정
• allowfullscreen : 전체 화면 기능

<iframe width="300" height="300" src="https://www.youtube.com/embed/POJ5S2aUizA" title="YouTube video player" 
        frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="300px" height="300px" src="http://paullab.co.kr/" 
        frameborder="0"></iframe>

2️⃣ audio

음악 콘텐츠를 재생하기 위한 태그

• controls : 영상 파일을 재생하는데 필요한 컨트롤러
• autoplay : 자동 재생 여부 설정(Chrome 정책에 따라 안 되는 것이 정상이나 가끔씩 될 때도 있음 주로 JS를 통해 컨트롤)
• loop : 반복 재생 여부 설정

<audio loop class="bgm">
      <source src="https://drive.google.com/uc?export=download&id=1xbevC0q-fNUDuoFCSLUdot0OIO81LgpE" type="audio/mp3" >
</audio>

3️⃣ video

동영상 파일을 재생하기 위한 태그
트래픽을 꽤 잡아먹기 때문에 잘 사용하지 않음 (꼭 사용해야 하는 업무라면 Youtube 사용할 것)

• controls : 영상 파일을 재생하는데 필요한 컨트롤러
• autoplay : 자동 재생 여부 설정
• loop : 반복 재생 여부 설정

<video controls width="250">
      <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" 
              type="video/webm">
      <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm"
              type="video/mp4">
      Sorry, your browser doesn't support embedded videos.
</video>

💡 코덱(codec)과 포맷(format)
웹에서 최적의 비디오 영상을 출력하는 것은 이미지 포맷을 선택하는것에 비해 복잡합니다.
그 이유는 코덱과 포맷(확장자) 때문인데요.

1. 코덱: 영상을 압축한 결과물 (ex, H.246, ProRes etc)
2. 포맷: 코덱을 담아 재생 가능한 플레이어에 전달되는 컨테이너(ex, mp4, WebM)

3. Forms(1)

1️⃣ input

사용자로부터 데이터를 입력받을 수 있는 태그

<input type="text">
<input type="password">
<button type="submit">LOGIN</button>

이런 형식으로 ID와 PW를 보내게 되는 경우 주소에 노출되므로 절대 사용해서는 안 됨

<form action="./010.html" method="get">
    <input type="text" name="userID">
    <input type="password" name="userPW">
    <button type="submit">LOGIN</button>
</form>

2️⃣ label

input 태그를 설명하는 용도
시각장애인들에게는 VoiceOver 기능이 작동하는 중요한 요소로 사용하는 것을 권장

<label for="men">남</label>
<input type="radio" name="성별" id="men">
<label for="female">여</label>
<input type="radio" name="성별" id="female">

남여

3️⃣ 종류

<!-- 아이디를 입력받음 -->
<input type="text" name="userId"><br>
<!-- 패스워드 입력 -->
<input type="password" name="userPw"><br>
<!-- 체크박스(중복 선택) 기능 -->
<input type="checkbox" name="" id=""><br>
<!-- 라디오버튼(하나만 선택) 가능  -->
<input type="radio" name="성별" id="men">
<input type="radio" name="성별" id="female"><br>
<!-- 색 선택 -->
<input type="color" name="" id=""><br>
<!-- 날짜 선택 -->
<input type="date" name="" id=""><br>
<!-- datetime은 더 이상 사용하지 않음 -->
<input type="datetime" name="" id=""><br>
<!-- 이메일 입력받음 -->
<input type="email" name="" id=""><br>
<!-- 전화번호 입력받음 -->
<input type="tel" name="" id=""><br>
<!-- 사용자에게는 보이지 않는 입력 필드 -->
<input type="hidden" name=""><br>
<!-- 슬라이드바 형식으로 범위 설정 가능 -->
<input type="range" name="" id=""><br>
<!-- 수 선택 가능 -->
<input type="number" name="" id=""><br>
<!-- 웹 페이지 주소를 입력받음 -->
<input type="url" name="" id=""><br>
<!-- 파일 선택 기능 -->
<input type="file" name="" id=""><br>
<!-- 버튼(입력받은 데이터를 보내는 용도) -->
<button type="submit">로그인</button>

ID PW
체크박스
남 여
색상 팔레트
날짜 입력 폼
이메일 입력
전화번호 입력
슬라이드 바
수 선택
웹 페이지 주소 입력

로그인

기타

콘솔에서 영상 재생 속도 제어하기

playbackRate 값 조절로 제어 가능

document.getElementsByTagName("video")[0].playbackRate = 3;

alt값에 따른 VoiceOver 기능 작동

alt 값으로 공백을 넣을 경우 파일명으로 읽어 줌

  <!-- 읽지 않음 -->
  <img src="rain.png" alt="">
  <!-- 파일명으로 읽음 -->
  <img src="rain.png" alt=" ">
  <!-- alt값으로 읽음 -->
  <img src="rain.png" alt="비 내리는 창가">