웹 프로그래밍 (20) 썸네일형 리스트형 Vue + Spring Pagination(Paging) 구현 Vue와 Spring을 이용하여 Paging을 다음과 같은 페이징을 구현하는 방법을 알아보겠습니다. Vue 프로젝트의 파일 구조와 router.js 의 코드입니다. import Vue from "vue"; import VueRouter from "vue-router"; import Home from "@/views/Home.vue"; import Page from "@/views/Page.vue"; import List from "@/components/List.vue"; Vue.use(VueRouter); const routes = [ { path: "/", name: "Home", component: Home }, { path: "/page", name: "Page", component: Page, .. Vue 에서 javascript 를 이용하여 kakao login 구현 Vue 에서 Javascript 를 이용하여 kakao login 기능을 구현하는 자료가 없어서 정리합니다. npm install vue-kakao-login 이라는 방식이 있지만 Kakao Developers 에서 제공하는 Javascript SDK를 이용하여 카카오 로그인을 구현해보려고 합니다. 1. 먼저 Kakao Developers 에서 애플리케이션을 추가합니다. 2. 앱설정 -> 플랫폼에서 Web 사이트 도메인을 설정합니다. 저는 npm run -- --port 3000을 사용할 것이기 때문에 포트번호는 3000으로 했습니다. 3. 카카오 로그인에서 Redirect URI 를 설정하여주고 활성화를 시켜줍니다. 이제 카카오로그인을 사용할 준비가 다 됐습니다. javascript로 카카오 로그인 기.. Vue.js - 01. 목록, 상세보기 연습 [ 결과 화면 ] hrm_list.html 사원목록 사원 아이디 사원명 부서 직책 연봉 {{emp.id}} {{emp.name}} {{emp.deptName}} {{emp.title}} {{emp.salary}} 게시글이 없습니다. hrm_detail.html 사원정보 사원 아이디 사원명 부서 직책 연봉 {{emp.id}} {{emp.name}} {{emp.deptName}} {{emp.title}} {{emp.salary}} 사원목록 메모장 만들기 [ 구현 화면 ] - 메모 추가 버튼 누르면 새로운 메모장 생성 - 화살표 누르면 작아지고 커지는 기능 구현 - 핀셋을 고정하면 안움직이는 기능 구현 - 쓰레기통 누르면 삭제 기능 구현 HTML public class NetworkHttpServer { public static void main(String[] args) { try (ServerSocket ss = new ServerSocket(8080)) { System.out.println("[WebServer is ready]"); while(true) { try(Socket socket = ss.accept()) { BufferedWriter bw = new BufferedWriter(new OutputStreamWriter(socket.getO.. "오늘의 메뉴" JS -> JQuery 로 바꿔보기 https://daily-life-of-bsh.tistory.com/162?category=854985 HTML, CSS, Javascript 연습문제 1. 필수 구현 - 기능 구현 • 랜덤 선택 버튼을 클릭 시 제공되는 4 개의 이미지 중에서 랜덤 하게 하나의 이미지를 선택합니다 • 선택된 이미지의 음식 이름을 오늘의 메뉴 : 에 표시합니다 • 선.. daily-life-of-bsh.tistory.com - 위에서 작성했던 Javascript 를 JQuery 로 바꿔보기 Javascript var foods = ["cake 케이크", "burger 햄버거", "steak 스테이크", "sandwich 샌드위치"]; function init() { var html= "", food = ""; foods... Javascript 생성자, 프로토타입 - Java 에서 사용하던 Map을 Javascript 에서 구현 한다. - html 파일 실행 시 console 에 아래와 같이 출력되도록 js 파일 작성. var map = new MyMap(); map.put("id", "ssafy"); map.put("name", "싸피"); console.log(map.size()); // 2 console.log(map.get("id")); // ssafy console.log(map.get("name")); // 싸피 map.remove("id"); console.log(map.get("id")); // undefined map.clear(); console.log(map.size()); // 0 /** * MyMap 생성자로 사용될 함수를 구현 */ fun.. HTML, CSS, Javascript 연습문제 1. 필수 구현 - 기능 구현 • 랜덤 선택 버튼을 클릭 시 제공되는 4 개의 이미지 중에서 랜덤 하게 하나의 이미지를 선택합니다 • 선택된 이미지의 음식 이름을 오늘의 메뉴 : 에 표시합니다 • 선택된 이미지를 화면 중앙에 표시합니다 - 화면 구현 • 최초 화면 로딩시 제공되는 이미지 중에서 케이크 이미지를 화면 중앙에 표시합니다 • 화면 상단에 랜덤 선택 버튼을 보여줍니다 • 제공된 4 개의 이미지를 화면 하단에 보여줍니다 썸네일 이미지 • 구현된 화면이미지를 참조하여 이미지 및 버튼의 크기는 적절하게 선택합니다 2. 선택 구현 • 화면 하단의 썸네일 이미지에 마우스를 올리면 이미지의 투명도를 변경합니다 • 화면 하단의 썸네일 이미지를 클릭하면 화면 중앙에 이 미지를 표시하고 썸네일 이미지의 테두리를.. HTML, CSS 연습문제 ONLINE SSAFY 메뉴1 메뉴2 메뉴3 메뉴4 기사 1 재산권의 행사는 공공복리에 적합하도록 하여야 한다. 정부는 회계연도마다 예산안을 편성하여 회계연도 개시 90일전까지 국회에 제출하고, 국회는 회계연도 개시 30일전까지 이를 의결하여아 한다. 대통령의 임기가 만료되는 때에는 임기만료 70일 내지 40일전에 후임자를 선거한다. 제2항과 제3항의 처분에 대하여는 법원에 제소할 수 없다. 언론·출판에 대한 허가나 검열과 집회·결사에 대한 허가는 인정되지 아니한다. 기사 2 번호 제목 작성자 1 이 헌법시행 당시의 대법원장과 대법원판사가... 강감찬 2 대한민국은 국제평화의 유지... 장영실 3 정당은 법률이 정하는 바에... 안중근 4 공공필요에 의한 재산권의 수용... 김두한 5 국회의원은 그 지위.. 이전 1 2 3 다음
