□ 유튜브 2/3

★ 작성코드

Git 링크.유튜브 카피캣

1. 유튜브 왼쪽 nav 영역

● word-break : 텍스트의 줄바꿈의 영향을 주는 CSS 속성

• keep-all 속성값 : 단어를 기준으로 줄바꿈

예시)

#youtube-left-content .youtube-footer .txt-wrap a {
    margin-right: 8px;
    
    color: #aaaaaa;
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;

    word-break: keep-all;
}

● 결과 스크린샷

2. 유튜브 메인 컨텐츠 영역

● 결과 스크린샷

□ 유튜브 3/3

1. 유튜브 채널 페이지 영역

● 결과 스크린샷

2. 유튜브 채널 탐색 페이지 영역

● 결과 스크린샷

□ 어려웠던 점

특별히 어려웠던 내용은 없었습니다.

□ 해결방법

강의 내용을 듣고, 코드를 작성해보면서 오타나 오류가 생기면 찾아서 수정하였습니다.

□ 학습 소감

유튜브와 유사한 구조를 만들기 위해서 많은 div 태그를 만들어야 되서 차후에 이와 비슷한 상황이 되었을 때, 이에 대한 명칭을 지정하는 것이 고민이 많이 되었습니다.