# part1 - 웹 페이지 틀 & 메뉴 생성 게시글 앨범 할일 사진 게시글목록 head태그 부분 1. 제이쿼리 사용하기 위해 CDN 서버 연결 2. 제이쿼리 핸들바 라이브러리 사용하기 위해 연결 3. 만들어둔 css(외부파일) link 태그로 연결 body태그 부분 4. div태그로 page를 생성해 전체적인 틀을 잡아준다. 5. div태그로 page안에 header, menu, content, footer를 생성해 각 영역을 구분하고 역할을 부여한다. 6. content에는 스크립트와 핸들바+ajax를 이용해 생성한 데이터가 들어간다. 7. header에 img태그로 메인 이미지 삽입 8. menu에는 span태그를 이용해 한 줄로 각 메뉴를 출력 9. content에는 h1으로 타이..

jQuery의 $.ajax 메소드 - 비동기적(동시실행)으로 웹 서버와 통신하는 기술 - 웹 페이지의 내용을 새로 고침하지 않고도 웹 서버에서 데이터를 가져오거나 서버에 데이터를 보낼 수 있으며 웹 사이트의 사용자 경험을 향상시킬 수 있다. Json (JavaScript Object Notation) - 웹 어플리케이션에서 정보를 주고받을 때 사용하는 데이터 포맷 - 데이터를 쉽게 인코딩 & 디코딩 할 수 있어 웹 애플리케이션에서 서버와 클라이언트 간 데이터 교환 시에 많이 사용된다. Json샘플 데이터 참고 사이트 https://jsonplaceholder.typicode.com/ JSONPlaceholder - Free Fake REST API {JSON} Placeholder Free fake AP..

핸들바 (Handlebars) - 스크립트 내에서 html을 용이하게 작성할 수 있는 템플릿 엔진이다. - 코드의 재사용 및 유지 보수성을 향상시키며 jQuery와 같은 라이브러리와 함께 사용할 수 있다. #사용법 1. handlebars 라이브러리 로드 - 태그 안, 제이쿼리 cdn 아래에 해당 코드를 작성한다 2. 템플릿 정의 -핸들바를 사용할 곳에 - 핸들바 안에서의 반복문은 {{#each}}를 사용하며.(마침표)를 입력 시 전체를 반복한다는 의미이다. - 스크립트 내 배열 값을 가져올 때는 {{키네임}}으로 작성한다. (배열 키와 동일하게 넣어줌) - 반복문의 마감태그는 {{each}} ** {{키네임}} 으로 감싸진 부분이 주입되는 데이터와 바인딩되는 부분이다. ** {{#each}} {{/ea..

JQuery를 사용하려면 JQueryCDN으로 소스를 가져와야 한다. [아래 포스팅 참고] https://shinye-developmentdiary.tistory.com/8 제이쿼리(JQuery)를 사용하는 이유와 사용법 제이쿼리(JQuery)란 오픈소스 기반의 자바스크립트 라이브러리를 의미한다. 라이브러리는 SW의 구성요소 중 한 가지로 API를 바탕으로 대상 환경(플랫폼)에서 바로 실행될 수 있도록 모듈화 된 프 shinye-developmentdiary.tistory.com HTML 태그 영역 [주소입력] 이름 주소 [주소목록] CSS (html - head의 태그 안) h3{ color: rgb(6, 64, 172); } table{ border-collapse:collapse ; } td{ bo..

HTML(Hyper Text Markup Language) : 웹 브라우저에 출력해 주는 언어로 하이퍼 텍스트 기능을 통해 검색을 쉽고 빠르게 해 준다. ✔ html에 필수적으로 들어가는 태그 [ html , head, title, body ] ✔ 자동완성 단축키는!+Tab키 또는!+enter키 ✔ 확장(open in browser) 설치하면 쉽게 브라우저를 연결해서 결과를 확인할 수 있다 - 단축키 alt+b (기본 브라우저), alt + shift + b (다른 브라우저) ✔ 태그는 원래 여는 태그 와 닫는 태그 로 이루어져 있지만 단일로 사용하는 태그가 존재한다 (, , 등) html에서는 그냥 사용해도 되지만 리액트에서는 단일태그에 /슬래쉬를 넣어 닫아줘야 오류가 나지 않는다 -> ✔ 태그 속성리..

자바스크립트로 빙고게임 만들기 이틀차에는 자바스크립트를 이용해 빙고게임을 만들었다! 😆 ※대각선은 지원하지 않음※ 선택한 칸의 색은 노란색으로 바뀌며 가로줄과 세로줄이 모두 채워지면 빙고 = 해당 줄의 색이 분홍색으로 변한다. 아래 링크로 들어가면 직접 실행시킬 수 있으며 밑의 소스 코드 안 태그의 텍스트를 수정하여 새로운 빙고판을 생성할 수 있다. 빙고게임하러가기↓↓↓ https://shinye-developmentdiary.tistory.com/16 JavaScript Bingo game - 자바스크립트로 만든 빙고 게임 (색칠하기) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 shinye-developmentdiary.tist..

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

자바스크립트를 사용해서 핑퐁게임을 만들어봤다! 처음이라 미흡한 부분이 많지만 결과물이 잘 나와서 아주 만족~😎 앞으로 더 열심히 공부해서 퀄리티 높은 작업물을 만들 수 있도록 노력해야겠다 !! 핑퐁게임 하러가기 ↓↓↓ https://shinye-developmentdiary.tistory.com/14 JavaScript ping pong game - 자바스크립트로 만든 핑퐁 게임 공 튕기기 게임 #can{ background-color: rgb(224, 216, 217); display: block; margin: 0 auto; } var canvas = document.getElementById('can'); var ctx = canvas.getContext('2d'); var x = canvas.wi..