내일배움캠프 Node.Js 2주차 Day-8

Cherry Jin·2023년 10월 11일

sparta_내배캠

목록 보기

6/53

오늘 대망의 미니프로젝트 발표가 있었다. 오후 2시에 프로젝트 발표 시간이라 오전에 시간이 좀 남았다. 시연 영상을 어제 9시까지 제출을 했어야했기 때문에, 이미 완성된 상태로 발표 준비만 하면 되는 상황이었다.
우리는 대본을 썼고 준비를 완료한 채로 개인공부 시간을 가졌다.

내배캠 하기 전에 결제해놓은 강의를 듣기 시작했다. HTML부터 고고!
[유데미 - The Web Developer 부트캠프 2023]

//Form 테그의 기본상태
//action = 어디로 보낼지 정한다.
// 
<form action="" method="get" class="form-example"><form>

<form action="" method="" class="form-example">
	<input type="text"> //일반적인 텍스트 인풋 
	<input type="password"> //입력 내용이 * 로 바뀐다
	<input type="color"> //컬러픽커가 나온다
	<input type="number"> //숫자만 입력 가능해진다
	<input type="text" placeholder="입력 전 보이는 텍스트"> //일반적인 텍스트 인풋 
<form>

Input과 Button 테그 강의에서 나오는 내용들이 완전 우리가 하려던 기능을 어느정도 구현하고 있어서 놀랬다... 사전캠프때 이 강의를 듣고 오는거였는데...아쉬움이 남지만 불태웠다.

2시가 되어서 다른 조들이 발표를 하는 동안 마우스를 올리면 애니메이션이 실행되는 호버기능이 많이 나와서 검색해봤다. 아래는 가장 많이 사용되는 이미지 확대

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      body {
        box-sizing: border-box;
        font-family: Consolas, monospace;
      }
      h1 {
        text-align: center;
      }
      img {
        max-width: 100%;
      }
      .a {
        width: 400px;
        margin: 0px auto;
				overflow: hidden; //전체 크기가 변하지 않게하기
      }

	.a img {
	  transition: all 0.2s linear;
	 }
	.a:hover img {
 	 transform: scale(1.4);
	 }
    
    </style>
  </head>
  <body>
    <h1>Hover Effect</h1>
    <div class="a">
      <img src="images/image-01.jpg" alt="">
    </div>
  </body>
</html>

팀장님의 컴퓨터가 화면공유를 시작하자마자 오류가 나서 급하게 내가 발표하게 되었다. 우리팀이 마지막으로 머지해놓은 결과물을 안켜놨는데, git pull이 작동이 안되어서 멘붕이었으나 팀장님이 빠르게 주소를 카톡으로 보내주셨다. 발표나 긴급상황은 익숙?해서 얼래벌래 잘 넘어간 것 같다.

기초가 탄탄할수록, 알아듣는게 많을수록 재밌어지는 것 같다. 내일이면 진짜 JavaScript 강의를 듣게 된다. 신난다!