[Clone] Youtube 클론 코딩 - HTML, CSS 코드 작성

HTML과 CSS 코딩에 익숙해지기위해서 Youtube 페이지를 클론 코딩해보는 시간을 가졌다.

레이아웃

모바일

• 아이콘 버튼에 마우스를 오버 시 색깔이 파란색으로 변경됨.
  • transition을 사용하여 부드러운 효과 추가

화면이 768px보다 클 때

코딩하면서 느낀 점과 알게된 점

1. 클래스 선택자 반복의 불편함

클래스를 작성하면서

.item {
  display: flex;
  justify-content: center;
  margin-top: var(--padding-standard);
}

.item .imgBox {
  flex: 1 1 35%;
}

.item img {
  width: 100%;
  height: 100%;
}

.item .info {
  padding-top: 0;
  flex: 1 1 60%;
}

.item .info .title {
  padding-bottom: calc(var(--padding-standard) / 2);
  font-size: var(--size-font-small);
}

.item .info .name,
.item .info .views {
  font-size: var(--size-font-small);
}

.item .moreBtn {
  flex: 1 1 5%;
}

이렇게 클래스를 반복해서 적어줘야 하는 경우가 많았다. 순수 CSS로 작성할 때는 이러한 불편함이 있고, 이걸 해결하기 위해서는 SASS나 LESS 라이브러리리 같은 전처리기가 필요하다는 점을 알게 되었다.

2. 웹 페이지 분석 연습 필요

HTML과 CSS를 작성하기 전 웹 페이지에 대한 분석을 할 때 시간이 너무 오래 걸린다. 분석 과정이 익숙해져서 이 과정을 빨리 마칠 수 있도록 연습하자.