[Day 4] Git/Github & HTML form

호준님과 함께하는 두번째 수업!

오늘은 깃/깃헙, 저번에 다 못한 html 태그들(어제 게시물 내용에 이어서 올렸다 :>), 그리고 html form에 대해 배웠다.

 

깃은 일단 요것만 기억하자.

출처: 알잘딱깔센 깃헙 핵심 개념

 

작년에 학교 특강에서 git 수업을 들어서 대략적이 내용은 알긴 하지만

요즘엔 계속 깃헙데스크탑을 써서 다시 개념에 대해 소홀해졌었는데,

오늘 수업을 계기로 다시 리마인드할 수 있었다 :)

나머지 중요한 것들은 심화과정 때 다루기로 했다.

빨리 브랜치전략에 대해서 다시 배우고 동기들과 같이 컨벤션도 정하고 풀리퀘스트도 하고 머지도 하고싶다!

 

---

HTML form

 

form은 정보를 입력하는 영역이다.

 

예를 들어,

로그인에서 아이디와 비밀번호를 입력하는 것,

회원가입 양식을 입력하는 것이 해당된다.

 

form은 다음과 같은 프로세스로 동작한다.

 

form 입력 => submit => 입력된 데이터가 서버로 전송 => 서버에서 데이터 처리

=> 처리 결과 웹화면을 클라이언트에게 보여줌

 

이러한 form 태그를 이용해서 로그인/회원가입 페이지를 구현해보았는데

몰랐지만 앞으로 유용하게 쓰일 몇 개의 태그들이 있었다.

그것은

<fieldset>과 <legend>!

The <fieldset> HTML element is used to group several controls as well as labels (<label>) within a web form.

The <legend> HTML element represents a caption for the content of its parent <fieldset>.

출처: mdn

 

<fieldset>
            <legend>로그인 정보</legend>
            <ul class="formList">
                <li>
                    <label for="login-id">아이디</label>
                    <input type="text" required placeholder="아이디 입력" id="login-id">
                </li>
                <li>
                    <label for="login-pw">비밀번호</label>
                    <input type="password" required placeholder="비밀번호 입력" id = "login-pw">
                </li>
            </ul>
            <button type="submit">로그인</button>
            <button><a href="signup2.html" class="signup-btn">회원가입</a></button>
</fieldset>

로그인 화면을 이런 식으로 간단하게 구현하였다.

 

더 자세한 코드는

https://github.com/daheejo/FrontendSchool_2

GitHub - daheejo/FrontendSchool_2: 멋쟁이사자처럼 프론트엔드스쿨 2기

여기서 확인할 수 있다!

 

빔캠프님 강의도 들어야 되고 깃헙 비주얼스튜디오 연동도 해야 되고

할 일 너무 많아 행복 :))))))))) ㅎ