드림코딩 샘 영상을 보면서 연습했다.
https://www.youtube.com/watch?v=67stn7Pu7s4&t=477s
강의에서 활용하시는 자료들
MDN Html Elements Reference:
https://developer.mozilla.org/en-US/d...
Color Tool:
https://material.io/resources/color
Font Awesome:
https://fontawesome.com/start
Google Fonts:
https://fonts.google.com/
와이어프레임
강의 초반 드림샘의 말씀대로 와이어프레임같은 틀을 만들어보았다.
서툴어서 아직 어설프지만 일단 ..알아볼 수 있는 정도 ..맞나 ? 허허
크게 나누면 4부분으로 볼 수 있다.
html 구조 작성
시멘틱 태그 권장하기 !!!
1. header
2. player
3. info
3번째 박스에는 비디오의 정보, 액션버튼, 채널이 포함된다.
3가지로 나누고
첫번째 metadata 영역안에는 해시태그, 제목+버튼, 조회수 배치
 |  |
|---|
두번째 actions 영역
 |  |
|---|
세번째 채널 영역
 |  |
|---|
4. upNext
upNext 타이틀과 아이템 리스트들로 구성
아이템 리스트 안에는 썸네일 이미지,제목,채널명,조회수,버튼으로 구성
 |  |
|---|
css 스타일링
1. css 변수 활용
필요한 설정들 변수에 저장해두고 가져다 쓰기 / 초기 설정 : 패딩,마진 0 설정 /
box-sizing : border-box;
요소의 크기 계산을 테두리를 포함한 크기로 설정
이는 요소의 크기를 지정할 때, 테두리와 여백을 포함한 크기로 설정하여 요소의 크기를 예측하기 쉽게 해준다.
header
player
아이템을 반응형으로 만들기 좋은 방법은 %을 사용하는 것 !
width : 100%를 줄 경우 컨테이너에 맞게 채워준다 + max-width로 최대 너비 제한 주기
 |  |
|---|
+++ css 전처리기 관련 설명이 있었는데
이건 따로 찾아보고 정리해두자 !!
https://developer.mozilla.org/ko/docs/Glossary/CSS_preprocessor
info
제목이 길 때 처리하는 방법
https://developer.mozilla.org/ko/docs/Web/CSS/-webkit-line-clamp
action 버튼
채널 프로필
upNext
결과물
1차
강의 들으면서 완성한 1차 결과물
나대로 좀 더 수정해보기
2차
수정한 부분
-
내 비디오 파일이 너무 커서 우선 사이즈를 조정해두었다.
-
upNext 이미지가 다 다른 크기여서 맞추어주었다.
그리고 드림샘께서는 body > .info 로 하셨는데
난 그렇게 하니까 패딩이 싹 사라지고 붙어 버리게 되어서
우선 .info로 바꾸어뒀는데 코드를 다시 싹 살펴봐야겠다.
큰 화면일 땐 이런데 저 오른쪽 부분 수정이 필요해보인다요 !!
3차
큰 화면
모바일 화면
유튜브에서는 큰 화면일 땐 헤더가 하얗고 작은 화면일 땐 검정색으로 변하고 있다.
작은 화면일 때만 헤더 어둡게 바꾸기
시멘틱태그 관련 참고
