[Youtube] 유튜브 클론코딩, 처음으로 막힘없이 따라했다! !! (유튜브 드림코딩)

위의 드림코딩님의 영상을 보고 따라해보았다.

클론코딩을 하지마라, 부정적인 시선들이 많지만

초보자 입장에서 공부용으로 최고인것같다 ..!

 

일단 코드를 많이 치는 환경에 익숙해지고

시니어 개발자들은 어떻게 작업하는지 알 수 있게 되기 때문이다.

 

 

 

 

 

내가만든 유튜브~!

 

흑 뿌듯하다 !!

Up next 부분에는 네이버블로그에서

썼던 썸네일과 제목을 빌려왔다ㅎㅎ

 

드림코딩님과 함께한 완성작에서 변화시킨 점은

1. hover로 액션아이콘 파랑색으로 만들기

2. 구독버튼을 현재 유튜브처럼

3. 댓글창을 추가했다!

 

난생 처음으로 혼자서 무에서 유를 창조해본 시간이었다.

고작 웹에서 표현되는건 3줄? 정도지만

정말 많이 시간이 소요되었다.

 

나중에 이 일이 익숙해지면 나도 후루룩 뚝딱 만들 수 있겠지?

 

 

 

 

이번 클론코딩으로 배운 점

1. 빠르게 코드 치는 법을 배웠다.

전에는 세월아 네월아 <,d,i,v 를 치고 있었는데

div.duseul 엔터를 치면 <div class="duseul"></div> 가 마법처럼 나온다. 진짜 컬쳐쇼크,,, 

 

2. 레이아웃을 나누고 html을 작성함에 있어 자연스러워졌다.

원래는 한줄쓰면 뭐가 오더라...? 그다음은??? 계속 생각했어야 했는데 이제는 html뼈대 정도는 순서대로 작성할 수 있게 되었다.

 

3. 클래스명 정하기가 생각보다 힘들다ㅎㅎ..

나중에 js에서 변수는 어떻게 정하려고 그러나,,

 

4. CSS에도 함수가 있다는 것을 알게되었다. 충격!

  :root{} 로 먼저 기본을 정하고 margin: var(--padding)  

var(--color-red) 이런식으로 사용하면된다.

root에서 값을 변경하면 모든 적용한 부분이 바뀌니 최고다.

 

5. flex가 정말 많이 쓰이고 중요하다는 걸 깨달았다.

공부해야지ㅎㅎ  + flex 레이아웃  https://duseul.tistory.com/27

 

 

 

 

 

 

+ textarea가 아니라 input text를 사용했어야했다는 것을 뒤늦게 알게되었다.

 

 

 

 

내가 혼자 직접! 추가한 부분 ㅎㅎ

<div class="comment">
        <div class="comment+">
            <span class="num">댓글 203개<span>
            <button class="criteria">정렬 기준</button>
            <div class="text">
            <img src="./image/icon.png" alt="">
            <span><textarea class="textarea"name="" id="comment" cols="100" rows="1" placeholder="댓글 추가..." focus></textarea></span>
            </div>
            <div class="twoBtn">
            <button class="delete">취소</button>
            <button class="ok">댓글</button>
          </div>
        </div>

 

.comment img {
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: 50%;
  margin-right: var(--padding);
  cursor: pointer;
  margin-left: 10px;
}
.comment .num {
  font-size: var(--font-medium);
  margin: var(--padding);
  margin-left: 15px;
}
.comment .criteria {
  margin: var(--padding);
  background-color: transparent;
  font-size: var(--font-medium);
}
.comment .text {
  display: flex;
  justify-content: space-between;
}
.comment .textarea {
  border: none;
  border-bottom: 1px solid;
  width: 95%;
  margin-top: 10px;
}
.comment .textarea:hover {
  border-bottom: 2.3px solid;
}
.comment .twoBtn {
  display: flex;
  justify-content: right;
  margin-bottom: 5px;
  margin-right: 30px;
}
.comment .twoBtn .delete {
  font-size: var(--font-medium);
  margin-right: 10px;
  background-color: transparent;
  width: 40px;
  height: 30px;
}
.comment .twoBtn .ok {
  font-size: var(--font-medium);
  margin-right: 10px;
  background-color: transparent;
  width: 45px;
  height: 30px;
}
.comment .twoBtn .delete:hover,
.comment .twoBtn .ok:hover {
  background-color: var(--blue-color);
  border-radius: 20px 20px 20px 20px;
  color: var(--white-color);
}