반응형 Development/WEB11 블로그 특정 위치로 스크롤링 시키는 간단 자바스크립트 - 언제쓸까? 블로그의 긴긴 글에서 특정위치로 스크롤링 하는 버튼 또는 이미지를 만들어서 쉽게 이동하도록 하자 - 방법 1)Tistroy의 경우 글을 쓸때 에디터에서 기본모드->HTML로 변경한다. 2) 배경색이 달라지는데 그곳의 최상단에 아래와 같은 코드를 넣자. 그러면 그 페이지가 호출될 때 아래의 스크립트가 실행되며 스크롤링을 위한 준비가 완료된다. 3) 특정위치로 이동시키는 버튼을 넣자. 이렇게 보인다. 한번 눌러보자 ↓ div1로 이동 div1로 이동 여러개를 하고 싶으면 fnMove('1')의 숫자를 1,2,3... 이렇게 늘리고 4번의 id="div1"의 숫자도 1,2,3...이렇게 늘리면 된다. 4) 이제 스크롤링이 될 곳에 이렇게 넣는다. 2019. 10. 15. javascript 기초(2/2) 아주 기초적인 JS, 자주 쓰이는 것들, 생각이 번뜩 안날 때 검색해서 찾아보자 Input 입력 검증 required자동차 회사 이름: HTML 입력 속성 검증required이 속성은 불리언 속성인데 true 가 되려면 제출되기 전에 입력 필드가 채워져야 합니다.type 입력 태그의 형식을 지정합니다.max입력 태그의 최대값을 지정합니다.min입력 태그의 최소값을 지정합니다. CSS 선택자 검증:requiredinput:required 처럼 사용하여, 모든 required 속성을 갖는 태그를 선택합니다.:disabledinput:disabled 처럼 사용하여, 모든 disabled 속성을 갖는 태그를 선택합니다.:validinput:valid 처럼 사용하여, 모든 valid 값을 갖는 태그를 선택합니다... 2017. 10. 30. javascirpt 기초(1/2) 아주 기초적인 JS, 자주 쓰이는 것들, 생각이 번뜩 안날 때 검색해서 찾아보자 function changeImage() { var image = document.getElementById('');if(image.src.match('filled')){ image.src = "~empty.png"; image.style.opacity = 1.0;}else{ image.src = "~filled.png";}}document.getElementById("").innerHTML = text; window.alert() document.write() 로 html로 출력하는 방법innerHTMLconsole.log() 로 콘솔에 출력 상수 Literals 변수 Variables 연산자=== 값도 같고 자료형도 같다.. 2017. 10. 30. CSS 기초 아주 기초적인 CSS, 자주 쓰이는 것들, 생각이 번뜩 안날 때 검색해서 찾아보자 Selectorid: #class: . div.class#idtag 여러 태그에 적용h2,h5{font-size:10px;} Backgoroundblue #0000ff rgb(0,0,255)background-image 속성 background-repeat: repeat-x; no-repeat; background-position: right bottom; Borderborder-style: dotted; dashed; solid; double; 이중선 inset; 들어간3차원 outset; 돌출된 3차원 none; hidden;border-color: green;border: 1px dashed blue; 한줄로 표현 M.. 2017. 9. 13. HTML5 기초 아주 기초적인 HTML5, 자주 쓰이는 것들, 생각이 번뜩 안날 때 검색해서 찾아보자 Elements 새창 띄우기 보이는 대로 줄바꿈 style="font-family:'맑은 고딕','Malgun Gothic',verdana;"style="text-align:center" => 강조된 글자 => 형광색 취소선 아래첨자 위첨자 인용문 블록형태로 문단 들여쓰기 표시 인용문 이미지 제목등 표시 약간 기울어짐 오른쪽에서 왼쪽으로 글짜 방향 바꿈 키보드 고정된 글자크기와 간격으로 표현 - 프로그래밍 코드 표시 등 프로그래밍 결과 표시 프로그래밍 코드 표시 이렇게 사용 권장 수식및 변수 표현 기울어짐 Comments CSS Cascading Style Sheets- inline 태그내에 속성- internal 특수.. 2017. 9. 7. MongoDB에서 데이터 가져와서 template 뷰와 바인딩 [HTML5Project] MongoDB에서 데이터 가져와서 template 뷰와 바인딩 *알립니다. 아래의 소스는 가상의 테스트 데이터를 활용했습니다.작성자 본인의 기록용입니다. [필요 확장 모듈 다운로드 및 적용]1. 프로젝트의 package.json파일내의 dependencies내에 하단의 패키지를 추가하고 저장 "mongodb": "~2.2.12", "clog": "~0.1.6"1-1. package.json 우클릭하여 Ran As - npm install로 설치하여 ejs-locals 설치되는지 확인2. js폴더 내에 lib폴더를 만들고 jquery-1.11.0.min.js와 jquery.tmpl.min.js 추가2-1. views폴더 내의 layout폴더 내에 있는 head.ejs파일에 아래의.. 2017. 3. 6. MongoDB 테스트 데이터 생성 스크립트 [HTML5]MongoDB 테스트 데이터 생성 스크립트 *알립니다. 아래의 스크립트는 가상의 테스트 데이터 생성 스크립트입니다.작성자 본인의 기록용입니다. [테스트 데이터 스키마] DB명 gallery Collection명 card 카드아이디 _id 링크 link 카드이미지{섬네일{파일, 설명, 타입}} image{thumbnail{file,desc,type}} 카드명 name 타입 type 카드상세 desc 관련글 relative 등록시간 regDate 1. 프로젝트 폴더내에 db.js 파일 생성하여 아래의 테스트 데이터 작성2. 우클릭 - Run As - Node Application으로 실행하여 데이터 생성 var MongoClient = require('mongodb').MongoClient;va.. 2017. 3. 6. ejs-locals 모듈로 head, header, layout, footer 구성하기 [HTML5Project] ejs-locals 모듈로 head, header, layout, footer 구성하기 [프로젝트 생성 및 필요 확장 모듈 다운로드]1. File - New - Node.js express project로 새로운 프로젝트 생성1-1. Project name 'project', Template engine 'ejs' - Finish로 생성2. 해당 프로젝트 폴더에서 nodemon실행시키고 localhost:3000에 Welcome to express 나타나면 성공3. 프로젝트의 package.json파일내의 dependencies내에 "ejs-locals": "~1.0.2"를 추가하고 저장3-1. package.json 우클릭하여 Ran As - npm install로 설치하여 .. 2017. 2. 20. mongodb client로 연결, db데이터 [HTML5 Project]mongodb client로 연결 테스트 [필요한 dependencies]package.json에 추가하여 설치"mongodb": "~2.2.12","clog": "~0.1.6" [테스트 소스]mongod.exe를 통해 mongodb 실행 후에 아래 스크립트를 작성하고 Run As - NodeApplication을 통해 확인함 var MongoClient = require('mongodb').MongoClient;var clog = require("clog");var util = require("util"); clog.configure({"log level": 5});//{'log': true, 'info': true, 'warn': true, 'error': true, 'de.. 2017. 2. 14. 이전 1 2 다음 반응형