드림 코딩 : 반응형 유튜브 만들기 (by HTML, CSS)

모바일 퍼스트

 

힌트 : 레이아웃 구조 생각하기

-레이아웃을 최소한으로 바꿔서 재배치 하는 것이 좋다

-너무 많은 미디어 쿼리로 작성하면 : 개발 힘듬, 유지 보수 힘듬, 사용자도 놀람

-2가지 레이아웃 만들 예정

 

Wireframe 만들기

-전반적인 구조 박스 단위로 나누어 그려 보는 것 

-레이블링 : 각각의 큰 박스, 작은 박스, 아이템의 이름 정하기

---

영상

 

1. HTML 마크업 하기

 

-준비물 : MDN, Font Awesome, google fonts, color tool https://material.io/resources/color/#!/?view.left=0&view.right=0

Color Tool - Material Design

시멘틱 태그 이용

header+section.player+section.infor+section.upNext

 

헤더 만들기

.log+.icons

~로고 안에 > 아이콘(youtube), 제목(span.title)

~아이콘 안에 > 아이콘(search), 아이콘(ellipsis-v)

 

비디오 플레이어 만들기

video 태그

~비디오 폴더> 비디오 파일 넣기

~autoplay, controls 사용

 

인포 만들기

.metadata+.actions+.channel

 

~metadata 안에 > ul.hashtags+.titleAndButton+.views

~~hashtags 안에 > li*3 > 태그 3개 넣기

~~titleAndButton 안에 > span.title(영상 제목),  button.moreBtn(더보기 버튼)

~~views 안에 > span.views(얼마나 어느 기간 동안 봤는지 확인)

 

~actions 안에 >(li>button)*5

~~button 안에 > i (아이콘), span (아이콘 이름)

~~~아이콘 이름들! > 폰트 어썸에서 검색해서 복붙 > head태그에 script태그 복붙도 잊지 마삼

• fab fa-youtube
• fas fa-search
• fas fa-ellipsis-v
• fas fa-caret-down
• fas fa-thumbs-up
• fas fa-thumbs-down
• fas fa-share
• fas fa-plus fab
• fa-font-awesome-flag

~channel 안에 > .metadata + button.subscribe

~~metadata 안에 > img (아바타 사진),   info> span.name(채널명)+ span.subscribers(구독자 수)

~~button.subscribe (구독 버튼)

 

 

업넥스트 만들기

span.title + ul>li.item*3

~item 안에 > img(다음 영상 이미지) + .info(영상 설명) + button.more(더보기 버튼)

~~info 안에 > span.title(영상 제목) + span.name(채널명) + span.views(얼마나 봤는지)

~~moreBtn (더보기 버튼 아이콘 = fas fa-ellipsis-v)

 

---

 

2. CSS로 예쁘게 스타일링

 

:root에 색, 크기, 폰트 크기 설정

color picker 구글 익스텐션 툴 사용 > 사이트에 사용하는 색 추출하기

 

 

전체(*) 와 body 설정

-패딩, 마진 없애고   border-box 설정

-Roboto 폰트 사용 : google fonts

 

헤더 꾸미기

-플렉스 박스 설정, 주축 배열

-패딩, 배경색, 색

로고 꾸미기

-로고의 폰트 크기: 크게

-로고의 아이콘 색 : 빨강

아이콘 꾸미기

-마진값 설정해서 서치 로고 띄워주기

 

플레이어 꾸미기

-비디오 아이템을 반응형으로 만든다=% 활용한다>100%로 만들면 컨테이너에 맞게 채워진다

-너무 커지면 아래 내용 볼 수 없다 > 제한을 준다 =max-width: 600px

플레이어 가운데 설정, 배경

-제한줘서 여백이 생긴다..> 가운데에 플레이어 배치 = text-align: center;

-배경색도 검정색으로한다 

비디오 위에 고정

-스크롤해도 비디오는 계속 위에 보여야 한다= position: sticky; top:0;

 

비디오 인포 꾸미기

-패딩 넣기

 

메타 데이터

해시태그 꾸미기 

-플렉스 박스, 폰트 크기, 색 설정

-너무 붙어 있으니 마진 준다 > hashtags li {margin-right: 패딩}

-적용할 범위를 최대한 작게 한다 =.info .metadata .hashtags li { }

-리스트 스타일 없앤다 > ul {list-style: none} >body 태그 밑에 적기

타이틀과 버튼 꾸미기

-전체 플렉스 박스로 만들어주기

-타이틀 폰트 사이즈: 미듐

-버튼 꾸미기 > 따로 빼서 바디 밑, ul 밑에 쓰기

-타이틀이 2줄로만 나오도록 제한한다=CSS line clamp검색> MDN에서 예제 내용 보고 복붙

-타이틀과 버튼에 간격이 있으면 좋겠다 & 버튼이 타이틀 위쪽에 있으면 좋겠다

=margin-right, height:100%

몇만뷰 꾸미기

-폰트 사이즈: 작게

-색: 다크 그레이

 

액션 버튼

-플레스 박스

-같은 간격 : space-around

-간격 조절

-버튼 각각의 플렉스 박스 방향 : column

액션 버튼의 아이콘 꾸미기

-중간에 오게 한다 : margin : 0 auto

-아이콘과 텍스트 간격 주기 : margin-bottom: cal(패딩 / 2);

좋아요 클릭한것은 파랑색으로 하기

-html에서 i에 active 값 설정한다

 

채널 정보

-플렉스 박스

메타데이터

-플렉스 박스

-간격조절 : space-between

이미지 꾸미기

-이미지 크기 : 너비, 높이 =아바타 크기

-동그랗게 하기 : border-radius: 50%

-메타데이터의 인포(이름과 구독자수) > 플렉스 박스, 방향은 column

구독하기 버튼

-대문자로 만들기 : uppercase

경계선 만들기

-상위 channel태그로 가서 > border-top: | bottom : 1px solid 그레이

 

다음 동영상 목록 꾸미기

-사이드 패딩 주기 : padding: 0 패딩값;

타이틀 꾸미기

-바로 아래 있는 타이틀에만 적용 : .upNext >.title { }

-글자 크기 : 미듐

-글자색

-밑에 마진 넣기 : maragin-bottom: calc(패딩 /2);

아이템 꾸미기

-플렉스 박스 설정

-플렉스 이용 : 이미지 35% 글자 60% 더보기버튼 5%

-이미지 플렉스 박스화 :  .img 박스 안에 넣기> 너비를 100%

-아이템의 글자 꾸미기

-인포에 패딩있음 > 바디에서 전체 인포설정해서임 > 위로 올라가서 직접 설정 해주기

 

반응형- 화면 커지면 세로 배치

-인포와 upNext를 박스로 묶어준다 > .infoAndUpNext 안에 info와 upNext 넣기

-방향은 column

-미디어 쿼리 사용하기 (768px 이상일 때)

--방향은 가로 row

 

---

 

3. JS로 버튼 누르면 제목 더보기

-html에 연결하기 <script src="main.js" defer></script>

-할당하기

moreBtn이 클릭이 되면,

moreBtn의 클레스가 clicked됐는지 토글하고,

title의 클레스를 clamp하려는지 토글한다

 

타이틀 기본으로 2줄 설정한다

html에서 <span class="title clamp">

css에서 clamp됐을 때만 적용되도록 따로 빼기

버튼이 클릭되었을 때 올라간다

-버튼이 180도 돌아간다 : transform: rotate(180deg)

-부드럽게 바뀐다 =애니메이션 : transition: transform 300ms ease-in-out

 

---

완성본♡

https://sigcho.github.io/Youtube_Clone-Coding/

유튜브 모바일