드림코딩-유튜브 페이지 만들기(드디어 안보고 완성)

-깃허브

https://github.com/5hyun/youtube-site

GitHub - 5hyun/youtube-site

 

-깃허브로 연결한 사이트

https://5hyun.github.io/youtube-site/

Youtube Mobile

 

-코드를 만들 때 헷갈린점

1. 우선 드림 코딩님 처럼 색이나 여백 사이즈, 글자 크기 등을 지정하고 하는게 편한 것을 확실히 알았다.

2. 버튼에 대한 코드가 헷갈렸다.

button,
button:focus {
  border: none;
  cursor: pointer;
  outline: none;
  background-color: var(--white-color);
}

3. 비디오 크기 설정도 헷갈렸다.

/* 비디오는 항상 어렵다ㅠ */
.player {
  position: sticky;
  top: 0;
  text-align: center;
  background-color: var(--black-color);
}

.player video {
  width: 100%;
  height: 100%;
  max-width: 600px;
}

 

4. 설명 2줄 넘어가면 ...으로 요약하기

/* 이건 드림코딩님도 구글링 하심 */
.info .metadata .titleAndButton .title.clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

 

5. 프로필 원형 만들기

/* 프로필 원형 만들기 어렵다 */
.channel img {
  width: 8vh;
  height: 6vh;
  border-radius: 70%;
  overflow: hidden;
}

 

6. flex-basis를 많이 활용했다.