개발하는 Kitsune

당근마켓, 인스타그램 클론코딩에 이어서 이번엔 유튜브를 구현해보고자 한다. 또 이번엔 반응형으로 만들어볼 계획이다. Night-mode / Day-mode 버튼 구현 동영상 마다 onmouse 했을때 확대, 클릭시 이동하여 동영상 재생 매번 다르게 나오는 fixed 광고창 구현 현재시간, 위체에 따른 날씨 구현 HTML + CSS만 써오던 기존 과제들과 달리, 자바스크립트도 당연히 이용해야 하며, 앞에 완성해놓은 페이지들도 반응형으로 바꿀 예정이다. 예상소요시간 : 4시간 ~ 5시간 내외

📌Only using HTML, CSS (No JS) . . . . . 소요시간: 약 3시간 30분 문제점 : 모바일 버전에서도 최대한 호환이 되도록 margin 값을 절대값으로 잘 안주고 상대적으로 주거나, blank를 만들어 비율 위주로 코딩을 했고, 저번 당근마켓 보다는 (당근마켓 경우 완전히 잘렸음) 호환이 되지만 여전히 모바일 버전 관련해서는 100% 호환이 잘 되지 않아 어려운 점이 많다. 또 스토리 부분에 아이디가 이를 포함하는 parent 태그와 축이 잘 안맞아 우선 임시적으로 붙혀놨는데, 이유를 알게되면 수정할 예정이다. 앞으로 html, css로 한두개 정도만 더 만들어보고, 만들어놓은 것을 기준으로 자바스크립트 및 css를 활용하여 반응형 웹페이지로 수정하는 과정들을 포스팅할 예정이다..

📌Only using HTML, CSS (No JS) . . . . . 소요시간: 약 2시간30분 후기 : 당근마켓 홈페이지보다 더 깔끔하고, 애니메이션도 귀엽게 잘 넣었다고 지극히 개인적으로 생각한다 ;ㅅ;....당근마켓 연락주세요....제발... 문제는 모바일에서 열었을때 비율이 안맞아서 깨진다는것... 아직 해결방법을 정확히 모른다. pc화면, 모바일 둘다 정상적으로 나오게끔 만들고싶은데 쉽지않다. 여튼 몇개의 더 깡통 웹사이트를 제작해본 뒤 반응형 웹사이트를 제작을 시작할 예정이다. 코드 : https://parkheebum95.github.io/html__css/ Document parkheebum95.github.io 웹사이트 링크(모바일 비율 안맞음) : https://parkheebum95..

이번 Challenge는, 스트리밍 사이트 (모바일버전) 음악목록 및 재생화면 클론코딩이다. 레이아웃 잡는것은 나름대로 어렵지 않다고 생각이 되었고, 잘 떠올랐는데, 이상한곳에서 막혔다. 1. 먼저 보통 awesome font 라는 곳에서 폰트를 써왔었는데, 마땅한 폰트가 없어서 구글폰트 아이콘쪽에서 처음으로 받아왔고, 받아오는 과정에서 문제가 생겨 30분정도 헤맸다. 2. 그리고 오른쪽에 후광같이 비추는 기능이 box-shadow로 구현한 것인줄 모르고 한참 찾았고, 3. 마지막으로 오른쪽 재생바를 input type range로 구현하려다가 색깔이 제대로 맞춰지지 않아 다시 div로 구현하였다...ㅠㅠ 그래도 이쁘게 잘 만들어진것 같아서 너무 만족스럽고, 지금까지 html+css로 만든 작업 중에서 ..

오늘은 JS없이 HTML+CSS만으로 쇼핑몰 도서코너 쪽을 반응형 웹사이트가 아닌 정적 웹사이트로 만들어보고자 한다. 당연히 뼈대만 있는 사이트이기 때문에 클릭하여도 아무런 반응이 없다. Book now 같은 버튼도 내부의 또는 태그로 만든것이 아닌 오로지 태그로 모양새만 똑같이 구현해보았다. 먼저 크게 3가지로 나누었다. 위에 노란색 부분(class="header") 중간의 책 부분(class="main__screen") 밑의 Top Adventures 부분(class="books") css코드는 나누어서 작성하는것을 선호하지만 한장짜리 웹사이트기에 하나의 style.cs 파일에 작성하였다. 코드 주소 : https://replit.com/@heebumpark/WeLoveYouBlueprint-1#in..