[html/css] 유튜브 클론 코딩하기

예전 유튜브의 UI 만들어 볼 것

📁기본 구조 생성하기

assets👉필요한 아이콘들이나 이미지들을 넣어두는 곳

styles👉css 파일이 여러 개 될거임

general.css👉전체적인 전역 스타일을 위한 파일

html 기본 구조 만들고 link로 각각 css 파일들 연결하기

왼쪽 부분은 left-section, 중앙 부분은 middle-section, 오른쪽 부분은 right-section

시멘틱 태그 header로 해주고 이 안에 left middle right div 태그 만들기

⬇

그러면 완전 큼지막하게 나오는 걸 볼 수 있음

🔍검색이미지 버튼에 호버 시 튤팁 나오게 해주기 위해 div Search 만들기

위에 짤린 부분 button class="voice-search-button"

⬇

이부분을 위한 1

유저의 프로필을 위한 이미지

⬇

막 이렇게 나옴
css 스타일 주러 레고〰🐱‍🏍

header 정렬은 왼쪽에서 오른쪽이고 left-section이랑 right-section은
양쪽 끝에 배치되어있고 middle-section은 가운데에 배치되어있음🙆‍♀️
👉 flex 사용하고 justify-content: space-between 주기

🖱 스크롤바 내려도 header는 따라오므로 position: fixed 주기

👀 다른 요소들 보다 앞으로 나와 있기에 z-index: 100(크게 줄 것) 주기

헤더 배경색이랑 헤더 밑에 1px 실선 색상 #4D4D4D로 해주기

align-items: center;➡교차축에서 중앙을 맞춰주는거임

⬇

왼쪽 부분은 완성

flex: 1➡단위 없으면 flex-grow✔( 헤더 컨테이너 안에 꽉 채우기 위함 )

각각의 요소들 스타일 줘야함
전체를 다 채울건데 이미지 버튼 두개는 고정된 사이즈로 줄거임

지금은 이렇게 줘도 똑같은 사이즈지만
이미지 버튼들을 특정한 사이즈로 작게 해버리면
얘네가 뒤로 밀리면서 서치바가 flex: 1이니까 전체를 채울거임💡

margin은 음수가능⭕, padding은 음수 불가능❌

이제 아이콘 스타일링 하기

아래 Search 라는 글자땜에 위로 올라가보이는데
이 글자는 안 보이게 처리 해줄거임

지금 width 작게 하니까 input 부분이 자동으로 커진 걸 볼 수 있음🤓

🤷‍♀️input 똑같은 사이즈여야 하는데 왜 자동으로 커진걸까❓

튤팁들 호버했을 때 이렇게 되게 해줄거임
텍스트들 우선 안 보이게 해줘야함👻

튤팁의 위치가 어디로 나오고 있지❓👉아래로

position을 부모한테 relative를 주고 자식한테 absolute를 주면 됨

align-items: center( 수직 ) & justify-content: center( 수평 ) 세트로 많이씀

opacity: 0➡호버 안 했을 땐 안 보이게 하기 위해

튤팁은 호버 했을 때 나오게 할거니까 trasition 같이 주면 좋음

white-space: nowrap 적용하기 전

white-space: nowrap 적용 후

hover 시 opacity: 1을 줘서 튤팁 보여지게 해주기

⬇

기능이 잘 만들어지는 걸 볼 수 있음

Create랑 프로필 가장 끝으로 보내고
중간에다 놓을 수 있게 space-between으로 해주기

아이콘들 사이즈 조정해주기

✍ 컨테이너에다 똑같이 relative 주고 count에다 absolute 주기

⬇😎헤더 완성

---

사이드 바 만들기

이렇게 만들고 다 똑같이 6개 만들면 됨( 글자랑 이미지 경로만 다르게 해주면 되는 것 )

⬇이런식으로 나옴 쫘라락

사이드바도 마찬가지로 스크롤하면 스크롤바 쫓아오고 고정되어있음( position: fixed )

사이드바 top은 몇으로 해주면 될까❓👉헤더만큼 주면 됨❗

⬇

// 호버 시 배경색 바뀜
.sidebar-link:hover {
	background-color: #4D4D4D;	
}

😎사이드바 완성

---

📺비디오 부분들 만들어주기

하나 만들어서 복사 붙여넣기

데스크탑일 땐 한줄에 4개씩 보이고 화면을 줄이면 3개 2개씩 보여지게 됨( grid 사용할 것✔ )

이미지랑 시간 부분이 여기에 해당됨

임의로 7:20으로 준거임

하나 만든 거 똑같으니까 복붙하기( 총 4개 )

⬇

비디오 전체 컨테이너 부분

viewport가 750px 이하일 때 비디오가 2줄 보이게하기

viewport가 751px 이상 && 999px 이하 일 때 3줄 보이게하기

viewport가 1000px 이상 일 때 4줄 보이게하기

현재 4개 비디오가 잘 나오는 걸 볼 수 있음

비디오 이미지랑 시간 부분 감싼 div( .thumbnail-row )
relative 준 이유 : 시간 부분 때문에 부모에 포지션 준 것

시간 이부분에는 absolute 줘서 bottom이랑 right 주면 됨

⬇

.video-info-grid 이부분은 이곳을 감싼 부분에 해당
( 하나의 row에 두 개의 column 줄거임➡프로필 부분 50px 주고 나머지는 얘네가 가져가게 할 것 )

grid-template-columns: 50px 1fr; 주면 됨🙆‍♀️

⬇

⬇

비디오 메인도 완성