Coding Kitsune

먼저 React는 무엇일까? React는 페이스북에서 시작된 UI을 만들기 위한 자바스크립트 라이브러리다. 리액트를 사용하기 위해선 React JS와 React DOM을 import 해줘야한다. React JS가 element를 생성하고 event listener를 더하는것을 도와주고, React DOM은 element들을 가져다가 HTML로 바꿔준다. 먼저 바닐라 자바스크립트로 간단한 웹을 만들어보자 DOCTYPE html> Total click : 0 Click me let counter = 0; const button = document.getElementById("btn"); const h2 = document.querySelector("h2"); function handleClick() { co..

DOM은 JS언어의 일부가 아니며, JS로 HTML 문서를 조작하기 위한 모델이다. 즉 JS로 HTML을 조작하는데, 이것을 Document Object Model을 통해서 변경한다. HTML은 Node로 가득한 문서이다.(HTML의 요소 하나하나가 Node이며 트리구조다.) DOM 또한 노드들이 트리 구조로 구성되어있다. JS에서 특정 HTML 속성들을 가져오는 방법에는 여러가지가 있는데, document.getElementById document.getElementsByClassName document.getElementsByTagName 이 세가지가 고전적인 방법이며 각각 id, class, tag를 가져오는 방법이다. 이 모든 요소를 가져올 수 있는, 비교적 최근에 나온것이 바로 querySele..

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

JS는 객체기반의 프로그래밍 언어이고, 원시값을 뺀 모든것이 객체라 볼 수 있다. 객체는 프로퍼티와 메서드로 구성된 집합체이다. 프로퍼티 : 객체 상태를 나타내는 값(data) 메서드 : 프로퍼티를 참조하고 조작할 수 있는 동작(behavior) 프로퍼티 => 키와 값으로 구성되며, 키 는 빈 문자열을 포함하는 모든 문자열이고, 값 은 JS에서 사용될 수 있는 모든 값이다. var thing = { name = 'red-box' price = 5000 #키 => name, price #값 => 'red-box', 5000 } 프로퍼티를 접흔하는 방법은 두가지가 있으며, 마침표 표기법, 대괄호 표기법 이다. 대괄표 표기법을 사용하는 경우에는 키는 반드시 따옴표로 감싼 문자열이어야한다. console.log..

📌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..