개발/HTML, CSS, Script 썸네일형 리스트형 Laravel Vue Spa 기본 구조 composer create-project --prefer-dist laravel/laravel {name} npm install npm run dev npm install vue npm install vue-router /route/web.php Route::get('/{any}', 'ViewsController@index')->where('any', '.*'); /app/http/controllers/ViewsController.php public function index() { return view('index'); } /resource/views/index.blade.php Vue SPA Demo /resource/js/app.js import Vue from 'vue' import VueRou.. 더보기 [최종] Jquery 다중 파일 업로드 미리보기 제공하기, 삭제, 순서변경, POST업로드 업로드 이미지 미리보기 Mustache 라는 스크립트 템플릿을 사용했습니다.필요하신 분은 구글에 Mustache.js을 검색해서 첨부해주세요. 더보기 jquery ajax function submitGet() { console.log("submitGet"); // url + get으로 보낼 데이터 var url = "/api/user/list/"+$("#input_id").val(); $.ajax({ type: "GET", url: url, success: function(result) { // 성공시 http status code 200 console.log(result); }, error: function(xhr, status, error) { // 실패시 http status code 200 이 아닌 경우 console.log(xhr); } }); } function submitPost() { console.log("submitPost"); // url var url.. 더보기 FACEBOOK SDK - 로그인, 정보 가져오기 SCRIPT FACEBOOK SDK - 로그인, 정보 가져오기 SCRIPT 페이스북 개발자 사이트 1. 페이스북 개발자 권한 등록해당 URL로 접속하셔서 페이스북 로그인을 하게 되면 나오는 페이지입니다.내앱을 선택하시고, 새로운 앱 추가를 해서 메뉴를 따라갑니다. 2. 앱 이름 설정표시될 어플리케이션 이름을 입력해주세요. 3. 앱 플랫폼 추가만들기를 누르시면 해당 어플리케이션 대시보드가 나옵니다. 설정>기본설정에 들어가시면 해당 앱의 설정을 볼 수 있는데플랫폼을 추가해야 합니다. 플랫폼추가를 누르시면 다양한 플랫폼이 나오는데 본 글에서는 웹사이트 예제를 해보는 걸로,웹사이트 플랫폼을 선택합니다. 4. URL 연결플랫폼을 선택하시면 대시보드에 웹사이트 URL을 입력하는 부분이 추가가 됩니다.여기서 연결을 원하시는 UR.. 더보기 드랍다운 메뉴 모바일 웹, 반응형 웹에서 자주 사용하는 드랍다운 메뉴를 가이드 해봅니다. 슬라이드 메뉴 가이드 보러가기 사진으로만 보기엔 정적으로 보이겠지만, 가이드나 코드를 보시면 애니메이션으로 자연스럽게 드랍다운 되는 메뉴 입니다. 1. HTML 코드 Line 18 ~ 24 : Toolbar를 구성하는 메뉴입니다. Line 19 : 메뉴를 호출하는 햄버거 버튼입니다.Line 27 ~ 30 : 슬라이딩 된 드랍다운 메뉴를 구성하는 메뉴 레이아웃입니다. 필요시에 이안에 레이아웃을 구성하세요.Line 33 ~ 36 : 메뉴가 호출되면 사용자 편리를 위해, 또는 자연스러운 레이아웃 구성을 위해 호출되는 반 투명의 커버 화면입니다. 평소에는 보이지 않지만 메뉴가 호출되면 보이게 되며, 사용자가 커버를 눌러도 메뉴가 사라지게.. 더보기 슬라이드 메뉴, 슬라이딩 메뉴 모바일 웹, 반응형 웹에서 자주 사용하는 슬라이딩 되는 슬라이드 메뉴를 가이드 해봅니다. 드랍다운 메뉴 가이드 보러가기 사진으로만 보기엔 정적으로 보이겠지만, 가이드나 코드를 보시면 애니메이션으로 자연스럽게 슬라이딩 되는 메뉴 입니다. 1. HTML 코드 Line 18 ~ 24 : Toolbar를 구성하는 메뉴입니다. Line 19 : 메뉴를 호출하는 햄버거 버튼입니다.Line 27 ~ 30 : 슬라이딩 된 메뉴를 구성하는 메뉴 레이아웃입니다. 필요시에 이안에 레이아웃을 구성하세요.Line 33 ~ 36 : 메뉴가 호출되면 사용자 편리를 위해, 또는 자연스러운 레이아웃 구성을 위해 호출되는 반 투명의 커버 화면입니다. 평소에는 보이지 않지만 메뉴가 호출되면 보이게 되며, 사용자가 커버를 눌러도 메뉴가 사.. 더보기 이미지 반복 롤링 배너 이미지 반복 롤링 배너 만들기텍스트가 배너처럼 가로로 움직이는 배너를 이미지로 바꾼 이미지 배너 입니다. 먼저 실행 결과부터 보겠습니다.예제코드는 글 마지막에 압축파일로 올려드렸습니다. 필요하신분은 확인 후 써주셔도 무방합니다. 사진처럼 영화 포스터 이미지 8개가 반복적으로 롤링 되면서 이동하는 예제입니다.x축으로 이동하면서 지나간 이미지는 다시 뒤로 이동해서 연결되는 이미지 롤링 배너입니다.하단 버튼 처럼 MOVE STOP, MOVE START 버튼으로 해당 롤링 애니메이션을 정지, 또는 다시 재시작 할 수 있습니다.추가로 포스터 위에 마우스를 올려 놓으면 롤링 애니메이션이 정지되는 기능도 추가했습니다. 1. HTML 소스코드롤링이 되는 부분은 Line 14 Div 부분입니다. Line 15 ~ 21은.. 더보기 [Part2] Jquery 다중 파일 업로드 미리보기 제공하기, 삭제, POST업로드 JQuery 다중 파일 업로드시 미리 보기 제공하기.JQuery 다중 파일 업로드시 미리보기 삭제하기.JQuery 다중 파일 업로드시 POST 전송.JQuery 다중 파일 업로드시 서버에 파일 전송. 완성 코드 버전입니다.https://greatps1215.tistory.com/31 저번 포스팅에 이어서 이번엔 다중 파일 업로드 과정에 대해서 포스팅 해봅니다. 1. 다중 파일 선택시 미리보기 제공2. 다중 파일 미리보기에서 특정 이미지만 삭제하기3. 다중 파일 POST 전송4. 다중 파일 서버 디렉토리로 업로드하기 순으로 진행될 예정입니다. 전체 소스코드는 압축해서 올리도록 하겠습니다. 아래는 body부분입니다 한번 보시고 포스팅을 보시는게 이해하는데 도움이 되실 겁니다. 12345678910111213.. 더보기 [Part1] Jquery 파일 업로드시 미리보기 제공하기, 다중 파일 업로드 미리보기 제공하기 JQuery 파일 업로드시 미리 보기 제공하기.JQuery 다중 파일 업로드시 미리 보기 제공하기. 이번에 포스팅할 내용은 input type="file" 과 html5부터 사용 가능한 input type="file" multiple 속성에서 미리보기 기능과 미리보기 이미지를 삭제하는 포스팅 해봅니다. 완성 코드 버전입니다.https://greatps1215.tistory.com/31 1. input[type="file"] 미리보기 제공하기.2. input[type="file"] multiple 미리보기 제공하기. 1. input[type="file"] 미리보기 제공하기1234567891011121314151617181920212223242526272829303132333435363738394041424.. 더보기 CSS 콘텐츠 수직정렬하기 CSS 콘텐츠 수직 정렬하기. CSS를 적용하는 부분에서 콘텐츠를 중앙 정렬하는 부분에 관해서는 간단하게 text-aligen:center의 속성을 적용하기만 하면 됩니다.하지만 수직 정렬에 관해서는 중앙 정렬과 다르게 몇가지 전제 조건이 성립한 CSS를 적용시켜 주셔야, 수직 정렬이 가능한데,간단한 예제와 결과 화면을 준비했습니다. 일단 수직 정렬의 몇가지 최소 CSS 조건이 존재합니다. 1. height의 속성값이 존재해야한다.2. display의 속성값이 table-cell이어야 한다. 1. 고정 높이의 수직정렬. 1234567891011121314151617181920212223242526272829 Start Up html, body { width: 100%; min-height: 100%; h.. 더보기 이전 1 다음
