* 사진 Hover일때 마우스 포인터 두기 li:hover{ opacity: 0.7; transform: scale(1.02); cursor: pointer; } cursor: pointer 코드를 추가하면 마우스 Hover일때 손가락 모양이 생긴다. * 사진 클릭시 팝업창 띄우기 const li_collection = document.getElementsByTagName('li') Array.from(li_collection).forEach(li => { li.addEventListener('click', () => { alert('hello !') }) }); app.js 파일에 위와 같은 코드를 추가한다. 사진은 li 요소에 있으므로 모든 li 요소를 가져와서 반복문으로 순회하면서 각각의 요소에 c..

* 마우스 Hover li:hover{ opacity: 0.7; transform: scale(1.02); } style.css 파일 하단에 위 코드를 추가한다. 사진 위에 마우스가 위치하면 사진이 살짝 흐려지고 크기가 조금 커진다. * 음악 삽입하기 프로젝트 폴더에 듣고 싶은 음악을 추가한다. body 태그 바로 아래 위 태그를 추가한다. 해당 음악을 audio 태그로 가져와서 자동으로 플레이한다. 현재까지의 html 전체코드는 위와 같다.

* html 코드로 리스트 보여주기 body{background: white} console.log("hello world !") 이후 작업을 위해 위와 같이 style.css app.js 코드를 각각 변경한다. 사진 1 사진 2 사진 3 사진 4 사진 5 ul 태그는 쇼핑몰 의류 목록이나 넷플릭스 영화 목록과 같은 데이터 목록을 나열할때 많이 사용하는 태그다. ul은 unordered list의 약자로 순서가 없는 리스트라는 의미다. 한글문서나 PPT의 순서가 없는 목록과 같다. 사진 1 사진 2 사진 3 사진 4 사진 5 리스트를 추가한 현재까지의 코드는 위와 같다. 편집기에서 ctrl + s 키를 동시에 눌러 코드를 저장하면 브라우저 화면이 업데이트 되고 아래와 같은 사진 리스트가 표시된다. * 리..

* 비주얼 스튜디오 코드(vsc) 설치 비주얼 스튜디오 코드(vsc) 설치 가이드 비주얼 스튜디오 코드 설치하기 다운로드 사이트 Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio C.. syleemomo.tistory.com * 프로젝트 루트 폴더 생성 윈도우 검색창에서 CMD를 검색하고 CMD 명령창을 오픈한다. 위와 같이 mkdir 명령어로 gallery라는 폴더를 생성한다. dir 명령으로 폴더가 제대로 생성되었는지 확인한다. 또..

* 원하는 레이아웃 설계하기 * 사진 리스트 중앙 정렬하기 ul{ list-style: none; display: flex; justify-content: center; } style.css 파일에서 ul 선택자(selector)에 2~3번째 줄 코드를 추가합니다. 해당 코드는 flexbox를 이용해서 레이아웃을 하고, ul 태그 내부의 모든 리스트를 중앙 정렬합니다. flexbox는 기본적으로 리스트를 가로로 정렬하기 때문에 아래와 같이 보여집니다. * 사진 리스트 세로 중앙 정렬하기 flex-direction: column; align-items: center; 위 코드를 CSS ul 선택자 안에 추가한다. ul{ list-style: none; display: flex; flex-direction:..

* 기능정의 회원가입로그인로그아웃사용자정보 변경사용자정보 삭제todo 생성 (해당 사용자 기준)todo 목록조회 (해당 사용자 기준)todo 조회 (해당 사용자 기준)todo 변경 (해당 사용자 기준)todo 삭제 (해당 사용자 기준) * API 설계HTTP 메서드는 흔히 CRUD(Creat, Read, Update, Delete) 라고 하며, REST API 에서는 GET(데이터 조회), POST(데이터 생성), PUT(데이터 변경), DELETE(데이터 삭제) 를 기본적으로 수행한다. 아래와 같은 URL 주소를 Rest API 엔드포인트라고 한다. User 모델관련URLURL 설명HTTP 메서드/api/users/register회원가입POST/api/users/login로그인POST/api/users..

https://mongoosejs.com/ Mongoose ODM v7.4.2Let's face it, writing MongoDB validation, casting and business logic boilerplate is a drag. That's why we wrote Mongoose. const mongoose = require('mongoose'); mongoose.connect('mongodb://127.0.0.1:27017/test'); const Cat = mongoose.model('Cat', { name:mongoosejs.com * 데이터 모델 설계 - Todo필드명설명데이터 타입비고author할일을 작성한 작성자ObjectId ref: 'User'title할일에 대한 제목Stri..

* 비주얼 스튜디오 에디터 열기 * 코드 테스트하기console.log("hello world !")<p..

* Node.js 설치 설치 사이트 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org LTS버전 Windows Installer (.msi) 64bit 다운로드 * 프로젝트 구조 - 서버 todo - server - index.js - src - package.json - .gitignore - .git node_modules .gitignore 파일 * github 셋팅 윈도우 git 설치 가이드 [Git (1)] 윈도우 10 Git 설치 하기 [Git (1)] 윈도우 10 Git 설치 하기 안녕하세요. 갓대희 입니다. 이번 포스팅은 [ Window 10 Git 설치 방법 ] ..