2021/1/10 👥클론코딩👥 따라만들기 도전

슈-마츠다카라... 와타시...
유튜브 따라만들 것입니다...
타노시이-!😚 😙 😚 😙
지츠와 히토츠모 안 타노시이...😗 😗 😗

1 웹사이트 구조 파악하기 + HTML작성

사실 아직 코드에 대해 뭣도 모르는 초보이기 때문에 제대로 구현하기는 힘들겠지만, 좌충우돌하며 만들어보려고 합니다. 드림코딩 채널 보면서 따라가는 중이라 반응형 웹 부분에 초점을 맞춰서 어설프게 구현해보려 합니다. 때문에 반응형 웹사이트 포인트들을 살피며 구조를 파악하겠습니다.

박스로 나눠줄 부분들을 모두 나눠준 후 아래와 같이 창이 넓어짐에 따라 변하는 부분들을 파악하였습니다.

일단 작성해놓은 메모를 바탕으로 HTML을 완성!

그냥 궁금해서 이 상태로 HTML을 확인해보니...

나니....?^^*

2 본격적인 문제해결 + CSS!

일단 동영상이 안보임...🤪

CSS 손대기 전에... 유츠-부... 그래도 명색이 동영상 플랫폼인데... 동영상이 나와야 할 것 같조...?
무작성 코드에 비디오 태그 넣고 이미지 넣듯이 유튜브 영상 링크 넣었는데 안되니까....
서치를 해보겟읍니다~

비디오 태그 기본 문법...

<video autoplay controls loop muted poster="aaa" preload="bbb">
  <source src="xxx" type="yyy">
  zzz
</video>

이렇게 바꿔도 아래 첨부한 사진 정도로만 바뀌네요...??

플렉스 박스로 정리해보았습니다 🍴🍴🍴

디스플레이 속성 플렉스로 하고...
색을 넣어봤더니...
이런 모양이 되었읍니다^^^^^^^

그래도 뭔가 그럴듯해보이는 것은
그만하고 싶은 내면의 나의 착각이겟지요;;....

미디어 어쩌구로 반응하는 웹을 만들어보았습니다!

넓이가 1000px이 넘어가면!!

ㅋㅋㅋㅋㅋㅋㅋㅋㅋ나니...22222^^^^****
그래도 포인트는 '반응형' 웹이잔아요...
반응했으니
넘어가겟습니다....🤪
아무래도 유튜브에서 따온 저 광고배너 이미지 떄문에 이런 말도 안되는 일이 일어나는 것 같긴한데...
이미지를 줄여보겠습니다...

아주 조금 나아졌네요... (양심아리마셍 🙌🏻 🙌🏻 )

폰트에 색상을 지정하였습니다🖍

왜 헤더에 넣어놓은 아이콘 색상이 빨갛게 바뀌지 않는지 모르겠어서 고민중....

폰트 사이즈를 조절해보앗읍니다📏

오 지금 내가 어디로 어디로 가는걸까
나는 무엇을위해ㅠㅠㅠㅠㅠㅠㅠㅠㅠ

3 너무 멘붕이 되어서 강의를 보며 좀 따라해보기로...😇

신이난 나머지 도전과제를 너무 어렵게 잡았던 것 같아서... 일단 오늘 안에는 마무리해야 하므로... 드림코딩 채널의 강의를 좀 들으며 따라해보기로 결정했습니다...🙇🏻‍♂️

와... 따라하는 것만해도 이렇게 오래걸립니다...
딴짓도 하고 주말이라 가족들하고 놀면서 해서 그런지는 몰라도...
암튼 다음주에 코스 들으면서 짬날 때 조금씩 따라하며 배운 주요한 것들을 포스팅을 하고...
일단 따라한 결과를 첨부하고 임시로 포스팅을 마무리...

경고: 무리한 도전은 건강에 해롭습니다...🤯 🤯 🤯 🤯