TIL

🤖Youtube clone_HTML,CSS

🟨 HTML

• header+section.player+section.info+section.upNext + tab -> 4개 상자가 나눠짐
• haader
  .logo+.icons + tab
  logo + icons 태그 + span 태그로 title
  -icons
  icon 두개 넣고
• video player
  controls src = "video/##"
• video info
  .metadata+.actions+.channel + tab
  -metadata
  ul.hashtags+titleAndButton.views
• hashtag
  li*3 + tab _ Dreamcoding DreamCoders Ellie
• titleAndButton
  span.title +tab
  title + 내용넣고
• button.moreBtn + icons 넣기
• views
  span.views + iM views 1 monsth ago
• actions
  (li>button)*5
  span
• channel
  .metadata+subscribe + tab
• image 넣기
  .info>span.name+span.subscribers + tab
• upNext
  span.title
  ul>li.item*3
  img+.info+button.moreButton
  span.title+span.name+span.views
• moreButton
  icons 복붙

🟩 css

:root {
/* color*/
--white-color:
--black-color:
--blue-color:
--red-color:
--grey-Dark-color:
--grey-light-color:


/*size*/
--padding: 12px;
--avatar-size: 36px


/*font-size*/
--font-large: 18px;
--fonst-medium: 14px;
--font-small: 12px;
--font-micro: 10px;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
	font-family: Roboto;
}

ul {
	list-family: none; 리스트 스타일 없애기
}


button,
button:focus  {
  border: none;
  cursor: pointer;
  outline: none;
}

header {
  display: flex;
  justify-content: space-between;
  padding: var(--padding);
  background-color: var(--black-color);
  color: var(--white-color);
}

header .logo {
  font-size: var(--font-large);
}

header .logo i {
  color: var(--red-color);
}

header .icons .fa-solid {
  margin-right: var(--padding); 
}

💡 SASS & LESS

header {
  .logo{

  }
  .icons {
    
  }
}

[참고] REACT 쓸 경우 - PostCSS
(구글링) : css line clampin mdn 사이트 : 콘텐츠 내용을 제한

}
  -display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; -> 줄 제한 변경
  overflow: hidden;
}

.info .views {
  font-size: var(--font-small);
  color: var(--grey-Dark-color);
}

.actions {
  display: flex;
  justify-content: space-around;
  margin: var(--padding) 0;
}

.actions button {
  display: flex;
  flex-direction: column;
  font-size: var(--font-small);
  color: var(--grey-Dark-color)
}

.actions button  i {
  margin: 0 auto;
  margin-bottom: calc(var(--padding) / 2);
  font-size: 16px;
}

.actions button i.active {
  color: var(--blue-color);
}

🌈 트러블 슈팅

줄제한 변경과 clamp() 쓰임. tranform 기능이 아직 익숙하지도 않고 구현이 안되고 있다. 내일 좀 더 다시 살펴봐야 할 것이며 원래 해왔던 css 스타일이 아니다 보니 여러번 반복 학습이 필요할 것 같다. 많은 아쉬움이 남아 있는 클론 코딩이였다. 빠른 성장을 하려다 보니 체하는 것 같은 느낌이라고나 할까? 그래도 해야지...체하더라고 달려야지...남들과 같은 속도로 성장을 바라지 말자..라는 마음으로 다시 다짐한다. 더 꼼꼼히 이해하도록 하자...

🌻 최종