220204 드림코딩 클론코딩 유튜브 사이트 따라 만들기

처음엔 아예 손도 못대서 영상보고 따라하다가.. 이번이 3번째 시도임..

틀린 부분 정리하자

오른쪽이 내가 친 코드고, 왼쪽이 강의보고 따라한 것

 

1. HTML 마크업

  - 구조

 

 

 

 

 

 

 

 

 

 

 

 

 

 

<header>

- span태그에 클래스 이름 추가

 

 

 

 

 

 

 

 

player section

 

 

 

 

info section>metadata클래스

1) hashtag class: div>ul>li구조가 아니라, ul>li구조

2) titleAndButton class: button태그에 클래스 이름 설정해주기

3) views클래스 안의 내용은 그냥 text이기 때문에 div말고 span태그 사용하면 됨

(div는 블록, span은 인라인요소다. 그래서 div는 문단을 그룹화하고, span은 글자들을 그룹화 한다.)

 

 

 

 

 

 

 

 

 

 

info section>button 클래스

- span태그 안의 글자도 button에 포함된다. 그래서 button태그>span태그 구조여야 함

 

 

 

 

 

 

 

 

 

 

 

 

info section>channel클래스

- span클래스 두개 div클래스로 묶어주기

- button태그 안의 글자는 span태그로 묶어주기(일단 출력결과는 똑같이 나오던데..)

 

 

 

 

 

 

upNext section

- Up next(글자)는 span태그 사용하기

- list태그 클래스로 이름 부여하기

- div클래스로 img태그를 문단화?하기

- div태그 안닫아줌.. </div>누락 

- button클래스 넣기(누락함..ㅠ)