📖review

<Day 2 보충>
fragment : 페이지내에 section요소가 id를 갖고 있을 때
주소 + #id -> id로 이동 가능

ul>(li>a)*3 -> 많이 사용하는 emmet

✅GitHub

Git(master) vs GitHub(main, 형상관리 시스템 중 하나)
컴퓨터 ==commit==> Git ==push==> GitHub

Git설치 후 Gitbash에서 설정
1. git config --global user.name "이름" -> 이름 설정(GitHub에 설정된)
2. git config --global user.email 이메일 -> 이메일 설정(GitHub에 설정된)
git config user.name (user.email) -> 설정된 이름(이메일) 확인
3. mkdir 파일명 -> 디렉토리 만들기
4. cd 파일명 -> 생성한 디렉토리로 이동하기
5. git init -> 현재 디렉토리를 Git 저장소로 만들기
6. ls -al

⭐많이 쓰는 명령어

  • git pull(처음에는 git clone) : 소스코드 가져오기
  • git add . : 추가한 전체파일을 대기상태로 (관리할 대상의 파일 등록)
    -( git add 파일이름 : 하나의 파일만 대기상태로 )
  • git commit -m "메시지": 대기된 상태에서 비행기를 타게된다 --> 내컴퓨터에만 올라온 상태
  • git push : 비행기를 타고 Git에 올리기


✔ CLI명령어

  • mkdir:make directory
  • cd:change directory
  • touch test.txt : test 폴더 만들기
  • echo "내용" >> README.md : README.md 파일에 내용 저장
  • 단축키
    Shift+Ins (붙여넣기 Ctrl+v)

✔ GitHub에서 파일 만들기
new 또는 new repository - add a readme file(선택 안하면 직접 만들어야함)

README파일 수정하기
README.md - 연필모양 클릭 - 수정

GitHub에서 vsc열기

  • https://github.dev/ 로 변경
  • GitHub페이지 에서 .

✅Embedded content

<iframe> : 현재 HTML페이지에서 다른 HTML페이지를 보여주고 싶을 때 사용한다. 페이지에서 소스코드 가져오기

<iframe width="300px" height="300px" src="http://www.daum.net" frameborder="0"></iframe>


<audio> : 음악 컨텐츠를 재생한다.

<audio controls autoplay loop class="bgm">
	<source src="절대경로" type="audio/mp3">
</audio>
  • controls : 음악 파일을 제어할 수 있는 컨트롤러를 불러온다.
  • autoplay : 자동으로 재생
  • loop : 음악 반복재생

<video> : 동영상 파일을 재생한다. - 트래픽 주의 (youtube 사용)

<video controls width="250">
  <source src="절대경로.webm" type="video/webm">
  <source src="절대경로.mp4" type="video/mp4">
  Sorry, your browser doesn't support embedded videos.
</video>

*참고
스크린리더가 alt값에 따라 img태그를 읽을 때

<img src="123.png" alt=""> <!-- 안 읽음 -->
<img src="123.png" alt=" "> <!-- 파일명 읽음 -->
<img src="123.png"> <!-- 파일명 읽음 -->

vimeo-인프런에서 사용하는 유료 스트리밍 서버
autoplay는 mute속성과 함께 사용 -> 접근성 측면에서 좋지 않음

✅Forms

<Form> : 정보를 입력하는 영역
method="get" : url로서 페이지 요청을 보낸다. 주소에 데이터를 입력

<form action="입력 값을 전송할 페이지" method="get">
  <input type="text" name="userId">
  <input type="password" name="userPw">
  <button type="submit">로그인</button>
</form>

?userId (key) =minyoung (value) &userPw=123 -> 쿼리스트링

method="post" : url이 아닌 body값을 보낸다.
Create(게시물 생성)할 때 url에 정보가 뜨지 않는다. ex)이미지, 유저의 아이디 생성 시

<form action="http://localhost:8080/" method="post">
  <input type="text" name="userId">
  <input type="password" name="userPw">
  <button type="submit">로그인</button>
</form>

input의 속성

<form action="form의_종류.html" method="get">
  <input type="text" name="userId"><br>
  <input type="password" name="userPw"><br>
  <input type="checkbox" name="" id=""><br>
  <!-- 무언가를 설명할 때 label사용 -->
  <label for="men"></label> 
  <input type="radio" name="성별" id="man">
  <label for="female"></label> 
  <input type="radio" name="성별" id="female"><br>
  <input type="color" name="" id=""><br>
  <input type="date" name="" id=""><br>
  <input type="datetime" name="" id=""><br>
  <input type="email" name="" id=""><br>
  <input type="tel" name="" id=""><br>
  <input type="hidden" name="" id=""><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> 
  <!-- 사용자의 입장에서 선택하기 -->
</form>

(참고)
youtube에서 비디오 빠르게 재생하는 법
-> 콘솔창에 document.getElementsByTagName("video")[0].playbackRate = 2; (2배속)

마이크로 서비스 - 다수의 서버
모놀리식 아키텍처 - 하나의 서버


2022.03.31

1개의 댓글

comment-user-thumbnail
2022년 4월 15일

잘하고계시네요 🍀 화이팅 💕💕

답글 달기