본 시리즈는 "스테이지어스"에서 2021년 3분기부터 10주간 진행된 웹 기초 과정 중 유의미한 공부 내용을 업로드합니다.
과제를 진행하며 어려웠던 부분이나 구상 과정을 회상하는 식으로 포스팅됩니다.
아래 링크를 클릭하면 스테이지어스 홈페이지로 이동됩니다.
해당 내용에 대한 전체 소스코드는 Github 링크를 참조해주세요.
개요
HTML, CSS, Javascript까지의 개념을 간략하게 알고 부여된 2주차 과제이다.
1주차의 3시간, 2주차의 3시간을 해당 내용을 배운 뒤 팀장님이 내주신 과제는...
Youtube의 UI를 HTML, CSS, Javascript로 똑같이 따라 구현하세요.
단, Flexbox와 MediaQuery를 사용한 반응형 웹이어야 합니다.
..????
웹을 아무것도 모르는상태에서 고작 6시간 개념을 배웠다고해서 아는건 하나도 없었고
Flex, MediaQuery는 키워드만 던져주신 걸로 기억한다.
눈물을 머금고 미친듯이 구글링을 하기 시작했다.
과제 및 코드 리뷰
과제 소요시간 : 25시간
사용 기술 : HTML, CSS, Javascript
Flex와 Media Query를 적용한 반응형 웹 구성
직접 만든 youtube UI이다.
Youtube의 각종 아이콘들은 그림판으로 한땀한땀 캡쳐해 HTML에 삽입했고
썸네일과 채널명은 딩고뮤직의 그것을 가져왔다.
(영리적 목적이 아닌 개인 과제로의 사용은 괜찮다는 답변을 보았으나, 문제시 댓글 부탁드린다.)
왼쪽 상단의 메뉴 버튼도 Javascript와 CSS로 나타나고 숨길 수 있게 만들었다.
Flex와 Media Query 적용으로 창의 크기에 따라 상단의 검색창 및 아이콘 간격 조절,
썸네일의 크기와 갯수, 간격 조절도 할 수 있다.
웹을 처음 배울 때라서 SEO 요소와 Sementic Tag를 알지 못해 div 떡칠했다.
보는 내가 더 불편하다.(..)
전체 코드는 위쪽 깃허브 링크에서 볼 수 있다.
의의
지금 와서 코드들을 쭉 살펴보니 아쉬운 점이 많다.
Sementic Tag의 부재와 HTML의 전반적인 구조, 매끄럽지 않은 코드 등은 지금 보니 정말 답답하다.
다만, 웹에 대해서 개념만 배웠다면 배움 초반에 이 정도로 이해도와 응용도가 높진 않았을 것이다.
많은 시간이 걸린 과제 덕분에 최소한 HTML과 CSS의 기초는 확실하게 알고 갈 수 있었다.
또한 이 과제에 대해 가장 큰 배움은 개발자의 자세인 것 같다.
이정도로 오랫동안 몰입해서 개발을 해본적이 없었는데
덕분에 스스로 문제를 해결하는 능력을 정말 많이 키울 수 있었다.
웹에 막 입문하는 분들이라면 이것과 같이 해 보는 것도 추천한다.
아무것도 모르던 내가 이정도의 완성도로 해냈으니 분명 할 수 있을 것이다.
