멋쟁이 사자처럼 FE 2기 - 3

15611 단어 htmlhtml

3일차 과제 (220331)

1. 처음 접한 git과 github 정리하기

2. 우리만의 서비스를 만들었다 생각하고 회원가입form 만들기

git과 github 정리하기

git

git은 분산 버전 관리 시스템으로 여러명의 개발자가 서로의 작업을 덮어쓸 위험 없이 공동 작업이 가능하고, 문제가 있을시에 롤백도 가능하다.

  • 버전확인
    ✍
    git version
    💻
    git version 2.32.0

  • 초기설정
    ✍

    	git config global user.name "hongrteol" 
	git config global user.email [email protected]

  • 저장소 만들기

    작업할 폴더(mkdir)만들고 이동(cd)하기

    ✍

    mkdir FE2
 cd FE2

  • 현재 폴더를 Git저장소로 만들기
    ✍

    git init
 한 폴더에 한 저장소만 가져야 출돌이 나지 않음.

  • git파일 추카,컴밋
    ✍

    touch README.md
 git add README.md (지정파일)
 git add . (전체 파일)
 git commit -m "멋쟁이 사자처럼"

  • 파일상태 확인, 컴밋 히스토리 조회
    ✍

    git status
 git log

  • 저장소에 무시할 파일 만들기

    	https://www.toptal.com/developers/gitignore
	본인의 프로젝트에서 사용하는 운영체제, 개발 환경, 기술 스택을 검색창에 검색 후 ignore.io파일에 붙여 넣기
  • 참조 : 알잘딱깔센
    맥 -> git(커밋) -> git hub(푸쉬)

github

github는 단순히 저장소 역활만 하는 것은 아니다.
자신의 프로젝트는 물론 다른 개발자들의 인기 있는 프로젝트의 코드를 볼 수있고, 이슈를 제기할 수 있으며, 원한다면 다른 이의 프로젝트를 수정하고 발전 시키는 데에 참여할 수 있습니다. 
이를 오픈소스에 기여한다고 한다!

  • github에 파일 올리기

    	git status, (git pull)
	git add .
	git commit -m "추가 작업 내역입니다."
	git push origin main

오늘 공부한 내용

<iframe>

현재 HTML 페이지에서 또 다른 HTML 페이지를 보여주고 싶을 때 사용
(내일 배포인데 문제가생겼으면 ifarme으로 급하게 게시판만 따오셨다는 tip...)

✍ 

<iframe src="링크"></iframe>
  • src 속성으로 불러올 HTML링크를 설정할 수 있으며 보통 youtube 영상을 불러올 때 많이 사용한다.
  • allow : iframe 에서 허용할 기능들을 지정
  • allowfullscreen : 전체화면을 지원

<audio>

 음악 컨텐츠를 재생하기 위한 태그	 
 <audio> 요소 역시 <source> 요소를 자식으로 사용할 수 있다. 
 다른 요소와 마찬가지로 크로스 브라우징을 위해 여러 포맷의 파일을 지원할 수 있다!

✍ 

<audio src="폴더/파일명" controls autoplay loop ></audio>
  • controls : 음악 파일을 제어할 수 있는 컨트롤러를 불러온다.
  • autoplay : 로딩이 완료된 파일을 자동으로 재생
  • loop : 음악을 반복
    ✍
    <audio controls>
  <source src="flow.ogg" type="audio/ogg">
  <source src="flow.mp3" type="audio/mpeg">
</audio>

<video>

동영상 파일을 재생하기 위한 태그

✍

<video src="코딩잘하는비법.mp4" controls autoplay loop width="250" height="100"></video>
  • kind : 텍스트 트랙의 종류를 지정
    subtitles(자막), captions(설명) 등을 지정할 수 있습니다.
  • 자막 : 시청자가 이해할수 없는 언어에 대한 번역을 제공
  • 설명 : 자막을 포함한 오디오 제공
  • 코덱 : 원본 영상을 압축한 결과물
  • 포맷 : 영상의 형식

<Form>

정보를 입력하는 영역

  • get: url로 정보를 보낸다. (페이지)

  • post: <body> 값으로 정보를 보낸다

  • 쿼리 스트링

  • CRUD

<input>

사용자가 다양하게 폼 태그에 입력할 수 있는 공간을 만들어 주고, 사용자에게 정보를 입력을 받는다.

  • ✍

    <!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>form</title>
   </head>
   <body>
       <input type="text"><br>
       <input type="password"><br>
       <input type="date"><br>
       <input type="time"><br>
       <input type="range"><br>
       <input type="color"><br>
       <input type="radio"><br>
       <input type="checkbox"><br>
       <input type="file"><br>
       <textarea name="name" rows="8" cols="80"></textarea>
   </body>
</html>

오늘은 깃에 정신과 온 힘이 다 빨려버렸다...
그래도 멘토님이 끝까지 도와주셔서 내 깃허브에 올리는 방법까지 겨우 터득했다.
많이 귀찮으셨을텐데 친절하게 알려주셔서 정말 감사했다 ㅠㅠ

오늘의 꿀팁(?)

  • 금융사들은 속도보단 안정성에 더 신경쓰고 설계자체도 오프라인이라 처리가 좀 느리다.

  • 카카오, 뱅크샐러드 등등 온라인 설계로 처리가 빠름.

  • 지원하고 싶은 회사 홈페이지 방문하기 필수!
    본사도 가보기 (주변에 뭐 있는지 봐두는 것도 좋음)

  • 유투브 배속 늘리기 (console에 붙여넣기)

    	document.getElementsByTagName("video")[0].playbackRate = 3;
	(3배속 듣기)

  • 무료 추천 강의 : 지옥에서 온 깃

스택 - 미로찾기 프로그램
[앱개발]-서버리스(파이어베이스), API

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage