1. Git
형상 관리 툴 종류 중 하나
로컬 저장소와 원격 저장소로 나뉘어 로컬 저장소(내 컴퓨터)에서 파일을 작성해 원격 저장소로 보낼 수 있음
필요에 따라 원격 저장소에서 로컬 저장소로 필요한 파일을 가져올 수 있음
(ex 로컬 파일이 손상되었을 경우)
1️⃣ CLI
- Desktop으로 이동(원하는 폴더 경로로 이동)
cd desktop
# cd .. 로 상위 폴더 이동 가능- git-test 폴더 생성
mkdir git-test- git 저장소 사용 선언
git init- 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 main2️⃣ 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)
웹에서 최적의 비디오 영상을 출력하는 것은 이미지 포맷을 선택하는것에 비해 복잡합니다.
그 이유는 코덱과 포맷(확장자) 때문인데요.
- 코덱: 영상을 압축한 결과물 (ex, H.246, ProRes etc)
- 포맷: 코덱을 담아 재생 가능한 플레이어에 전달되는 컨테이너(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="비 내리는 창가">