728x90 샘플코드7 [Javascript] todo리스트 / 쇼핑 리스트 샘플 코드 (front-end) [Javascript / 자바스크립트] Todo List / Shop List 샘플 코드 머릿말 프론트앤드 Js로 DOM 제어 복습 도중 Todo List를 추가 / 삭제 가능한 어플을 만들어 보았다 참고로 기능 구현 목적으로 만들어 디자인은 구리다 사용 기술 html / css / javascript 이고 다른 플러그인은 사용하지 않았다 프로젝트에 사용된 DOM 제어 Js 기술 엘리먼트 선택자 element.querySelector / element.getElementById 부모 엘리먼트 선택자 element.parentElement 엘리먼트 노드 생성 document.createElement('생성 원하는 태그명') 엘리먼트 노드 삭제 element.remove() 엘리먼트 속성 추가 및 삭제 등 .. 2021. 5. 24. [Javascript] 페이스북 아이디로 로그인 하기 코드 샘플 (소스코드) 자바스크립트 / Javascript 를 통해 페이스북 아이디로 로그인 하기 코드 샘플 사용 방법 1. 페이스북 개발자 아이디 생성 및 앱 등록 💡 자세한 방법은 하단의 링크 참조 https://goodmemory.tistory.com/99 [Javascript] 페이스북 아이디로 간편 로그인 기능 구현 Facebook Login 홈페이지 페이스북 간편 로그인 기능 구현 [Javascript Facebook Login] 내 웹 사이트에 페이스북 로그인 기능을 구현하려면 먼저 아래와 같은 준비물이 필요하다 1. 페이스북 개발자 계정 2. 페이스북 goodmemory.tistory.com 2. 자신의 프로젝트에 facebook.js 파일 생성 하고, 하단의 코드를 facebook.js 파일에 복붙 하기 let.. 2021. 5. 15. [NodeJs] 네이버 지식인 오토 프로그램 샘플 코드 [feat javascript, selenium-webdriver] 댓글 / 답글 자동 NodeJs / Javascript 를 활용한 네이버 지식인 오토 자동 댓글 / 답글 프로그램 프로그램 구동 로직 1. 네이버 로그인 2. 원하는 키워드 입력 3. 해당 키워드 관련 지식인 탭 내 모든 질문 한개씩 접속 4. 미리 입력한 댓글 자동 입력 후 업로드 5. 다음글에 접속 후 위 3,4 과정 반복 네이버 지식인 하루 댓글 작성 개수가 한정되어있는 것으로 알고 있는데 몇개 까지 달수 있는지에 대해 정확히 몰라서 프로그램 사용자가 직접 원하는 댓글 개수를 입력할수 있도록 만들어 보았다 프로그램 설치 및 사용 방법 위 프로그램은 소스 코드로 제작을 하였기 때문에 소스 코드를 실행할수 있는 환경의 설치 및 실행이 필요하다 Microsoft VSCode 설치 (하단 링크를 통해 공홈 접속 후 자신의 운.. 2021. 5. 12. [프론트엔드] 쇼핑몰 상품 정렬 코드샘플 (Html,Javascript,Css) Sample Code 쇼핑몰 상품 정렬 코드 샘플 HTML5 , Vanilla Javascript, Css3 1. 설명 : 온라인 쇼핑몰에서 흔히 볼수있는 상품 정렬 코드 샘플이다 2. 사용언어 : Javascript, Html, Css [플러그인 사용 x] 3. 구동 로직 - 상품 Sample 이 없어서 짱구는 못말려 케릭터로 대체 (1) fetch API 를 통해 서버측의 json 데이터 Get (2) json파일(상품 객체 리스트) 저장 (3) 해당 리스트 출력 (4) 이후 선택 옵션에 따른 filter 처리 후 출력 [샘플 코드 :Html] 짱구 철수 유리 훈이 [샘플코드 :Css] :root{ /* color */ --color-white : #f4f9f9; --color-black : #0d335d; --color.. 2021. 2. 24. [프론트엔드] 애플 메인 페이지 샘플 코드(변경가능) Apple Main Page Sample Code (Feat. 순수 CSS , 바닐라 Javascript) 프론트 엔드 연습을 위해 별도 플러그인없이 순수 CSS와 바닐라 자바스크립트로 애플 메인 페이지를 만들어 보았다. 이를 응용하여 웹개발 학습을 하거나 자신의 홈페이지에 입히고 싶은 사람은 하단의 소스코드를 가져가서, 본인의 입맞에 맞게 데이터를 수정하여 사용하면 된다. 가장 하단에 소스파일을 첨부해놓았으니, 복붙이 귀찮으면 다운받아 사용하도록 하자 데이터는 데이터 베이스에서 넘어온 데이터나 직접 본인이 데이터를 수정하기 쉽도록 자바스크립트 소스 상단에 DbData라는 변수를 선언하고 샘플 데이터를 입혀놓았으므로, 자바스크립트를 잘 모르더라도 페이지 출력결과와 데이터를 비교하며 데이터의 수정이 용이하.. 2021. 2. 20. [프론트엔드] 유튜브 페이지 코드 샘플 FrontEnd Youtube Html, Css, Javascript Code Sample (반응형) 프론트 엔드 연습을 위해 유튜브 페이지를 만들어보았다. 오랜시간에 걸쳐서 만든 페이지가 아니라 허접하다. 필요한 사람은 잘 다듬어서 사용하면 좋을 것같다. 출력화면, 소스코드 순서대로 기재해 두었으니 참고바란다. 구동 로직은 header에 css 파일 을 추가하고 body에 script만 추가하면 해당 페이지에 데이터 베이스 또는 사용자가 미리 설정한 데이터를 토대로 페이지 내 마크업 언어가 작성되는 방식이다. 파일은 가장 하단에 첨부해 놓았으니 참고바람. [CSS] :root { /* color */ --headerColor : #252525; --fontColor : #252525; --logoCol.. 2021. 2. 17. [프론트엔드] 메뉴 바 코드 샘플 (반응형) FrontEnd Menu-bar Html, Css , Javascript Code Sample (반응형) 프론트 엔드 연습을 위해 메뉴바를 만들어 보았다. Pc웹과 모바일웹(768px 기준) 반응형이고, 필요한 사람은 편하게 사용할수 있도록 코드를 구성해보았다. 소스코드는 하단에 있고, 중간에 출력 화면, 사용방법을 순서대로 기재해 두었으니 참고바란다. 출력 화면 ↓ 사용방법↓ 1. 파일 다운 (파일 다운이 부담스러운 사람은 파일다운 하단에 소스코드 복붙해도 됨) 2. html header에 아래 소스 추가 3. html body 마지막에 아래소스 추가 4. menu-script.js 파일 내 메뉴 데이터 입맛에 맞게 변경 (홈페이지명, 로고, 메뉴 이름 등) 5. 출력확인 [Html,Css,Javasc.. 2021. 2. 16. 이전 1 다음 728x90
