유튭 페이지를 따라 만들어보자1

유튜브 영상을 재생했을 때의 화면을 비슷하게 만들어 보려고 한다.

일단 영상을 보고 따라하기 전에 배웠던 것을 토대로 먼저 만들어 보았다.

 

mobile first -> 이전 웹페이지에서는 전체 화면을 구성한 후 화면이 줄어들었을 때 경우를 추가해줬는데

이번에는 그 반대로 작은 화면부터 시작한다.

 

 

 

대충 화면을 구상해보았으나... 첫번째 문제 발생.

화살표 아이콘을 누르면 전체 제목이 다 나와야하는데

그 전에 제목을 어떻게 일부만 보일 수 있는지 찾지 못했다.

 

 

 

좋아요 싫어요 아이콘과 채널명 사이에 border를 주고싶은데 border가 나오지 않는다.

nav 태그를 써서 그런건가 했는데 div로 바꿔보아도 border-top이 적용되지 않았다.