# clonecoding
SCSS_Clone coding[1]
너비와 높이는 요소의 '콘텐츠 박스' 크기에만 적용 된다. 원하는 크기를 설정할 때, 테두리나 안쪽 여백을 고려해야 한다. 기본적으로 요소에 테두리나 안쪽 여백이 있으면 너비와 높이에 더해서 화면에 그린다. 이를 바꾸는 속성으로는 아래가 두 가지가 있다.content-
cloneCoding teamProject
주제 > 네이버 MyPlace 클론코딩입니다. 방문했던 음식점에 대한 리뷰를 작성하고, 다른 사람들이 남긴 리뷰를 확인할 수 있습니다. 마음에 드는 리뷰는 좋아요를 표시해보세요. 📆 개발기간 2023.03.03 ~ 03.09 🛠️ 기술스택 FE JavaS
Netflix 자바스크립트 내용
Tab기능을 이용해서 원하는 Tab을 선택시 해당하는 화면 출력1\. querySelector로 클래스tab-item, 클래스tab-content-item을 가져온다.2\. selectItem() : 선택하는 함수3\. removeBorder() : tab하단 빨간줄
[FlatEngine] 6. Shapes(다양한모양을 그리는 클래스)
영상 > https://www.youtube.com/watch?v=ZqwfoMjJAO4&list=PLSlpr6o9vURx4vjomFuwrFhvhV1nhJ_Jc&index=23 이전에는 이미지파일을 출력해보았는데 이번에는 특정 모양을 생성해주는 shapes클래스를 작성해보았다. 이때 필요한 개념은 아래와 같다. 먼저 왼쪽과 같은 흰색 사각형은 내부적으로...
[WatchPedia 클론코딩]
라우터 설정 src/App.js 공통으로 사용되는 header / footer 코딩 Header src/components/Header.jsx Footer src/components/Footer.jsx API 설정 API TDMB 
221127 youtube 클론코딩(5)
반응형 웹 디바이스별 해상도 반응형 분기점 리스트등 관련 내용 확인해보면 좋을듯반응형 웹 - 모바일 or 데스크탑 기준으로 분기점예전에는 데스크탑을 기준으로 만들었는데 요즘은 모바일 기준으로 먼저 만들고 데스크탑 버전 만드는 추세?... 적용하다가 못해먹겠음...왜 안
221126 youtube 클론코딩(4)
컨텐츠 메뉴바 비디오 목록 위에 고정되어있는 메뉴 구현 사용자가 시청한 영상을 바탕으로 관련된 카테고리를 추천해주는것같음 정해진 항목은 전체랑 최근에 업로드된 동영상 이정도..? 선택된 메뉴는 검은배경+흰글씨 메뉴바 구현1 음악에 커서 올림 메뉴바 구현2 좌측
221124 youtube 클론코딩(3)
오늘은 메인 페이지 완성 한드아그리고 나서 반응형으로 css 수정그리고 나서 리액트 앱에 적용시키기 이정도..?메뉴바 구현아이콘 안에 span 태그를 넣어놨더니 solid 아이콘은 두껍고 regular 아이콘은 얇게 나옴무료 아이콘을 쓰다보니..어쩔 수 없넹..ㅎ...
221123 youtube 클론코딩(2)
html/css 연습 위주라 시청만 하고 리액트로 구현해볼것모바일 버전이라 웹 버전은 어차피 내가 구현해야 됨(다른 벨로그들 참고해서 만들 예정)React로 유튜브 클론코딩 📹\[React.js] 유튜브를 만들어 보자유튜브 미니 클론 (No Route)\[노드/리액트
221122 youtube 클론코딩(1)
clientnpx create-react-app my-appcd my-appservernpm init일단 이 영상 보고 따라해보고 추가적인 기능은 혼자서 해보기웹버전도 만들어보기저녁먹고 그냥 놀음.....ㅎ
React : 로그인 버튼 기능 구현
인스타그램 클론 코딩 중 핵심요소 2가지 중 하나는 바로 로그인 기능이다.오늘은 React를 사용하여 현재 클론 코딩 중인 인스타그램 페이지에서 로그인 버튼에 기능을 부여하고 활성화시키는 작업을 해볼까 한다.우선 주요 키워드부터 알아보자.\-> 아이디 값 & 비밀번호
[p-p] 변수명 중복을 주의하자! (클론코딩 5일차)
클래스이름 container를 top_container로 바꾼 후처음엔 Rem으로 CSS를 작성했었는데 이상하게 자꾸 깃 리파짓토리로 머지하고 보면 내가 만든 컴포넌트가 다른 곳에 이동해있었다.자꾸 다른 컴포넌트를 침범하고 디자인도 안 이뻐서 머지할 때마다 다시 맞춰서
[FlatEngine] 5. FlatKeyboard(키보드입력을 받는 싱글톤 클래스)
이번에는 기본적인 키보드 입력을 구현해볼것이다. 앞으로 마우스입력을 받는 클래스, 게임패드 입력을 받는 클래스등 모두 싱글톤 클래스로 작성할것이다. 영상 > https://www.youtube.com/watch?v=OArgOjzSjg4&list=PLSlpr6o9vURx4vjomFuwrFhvhV1nhJ_Jc&index=24 FlatKeyboar
[FlatEngine] 4. Screen(해상도를 결정하는 클래스)생성, 테스트
이번에는 실제 사용자의 스크린비율을 프로그램만의 고유한 해상도로 맞춰주는 Screen클래스를 작성해보자. 영상 > https://www.youtube.com/watch?v=yUSBwAVtE8&list=PLSlpr6o9vURx4vjomFuwrFhvhV1nhJJc&index=25 Screen클래스를 생성하고 봉인된클래스(sealed)로 설정해주자. 
[FlatEngine] 3. Sprites(텍스쳐 렌더링 클래스) 마무리
sprites클래스를 마저 완성시켜보자. 영상 > https://www.youtube.com/watch?v=OleFuoTSmIg&list=PLSlpr6o9vURx4vjomFuwrFhvhV1nhJ_Jc&index=26 먼저 이전 포스팅에서 effect속성을 dispose해주는 코드를 까먹어서 추가한다. 이 아저씨가 설명하고자하는 텍스쳐 렌더링 방법인데,...
[FlatEngine] 1. MGCB Editor
앞서 monogame framework를 설치하고 솔루션을 만들고 코드를 수정했었다. 본 영상 링크 > https://www.youtube.com/watch?v=C0KKTmWQR1c&list=PLSlpr6o9vURx4vjomFuwrFhvhV1nhJ_Jc&index=2
[FlatEngine] 2. Flat-Sprites 코딩
이전까지 MGCB Editor 설치를 확인 했었다. 이제 본격적으로 텍스쳐를 화면에 띄우는 클래스인 sprites를 코딩할 차례다. 본 영상 링크 > https://www.youtube.com/watch?v=8d8HXq6qgas&list=PLSlpr6o9vURx4vj
[FlatEngine] 0. Monogame Framework설치
https://www.youtube.com/playlist?list=PLSlpr6o9vURx4vjomFuwrFhvhV1nhJ_Jc 위 유튜브영상은 물리엔진을 monogame framework를 이용해서 C#으로 코딩하는 영상이다. 궁극적인 목표는 2D에서 도형이나 그래프등을 표현하고, 이를 카메라시점으로 원하는 방향에서 바라볼수있도록 렌더링하는 엔진개발이...