전체 글 (269) 썸네일형 리스트형 [HTML] <script> ▶ 스크립트 코드를 문서에 포함하거나 외부 스크립트 참조. - Javascript 내용을 삽입하거나 외부의 스크립트를 src 속성을 통해 가져오는 경우 사용. - cf. css를 가져올 때는 사용. 속성 async : 스크립트의 비동기적(Asynchronously) 실행 여부를 설정. boolean값. 사용 시 src 속성 필수. defer : 문서 파싱(구문 분석) 후 작동 여부 지정. boolean값. 사용 시 src 속성 필수. ※ 스크립트의 실행 시점 제어 - 자바스크립트 실행 시 HTML에 있는 내용을 자바스크립트로 찾아 실행해야 하는 경우가 있는데, 이때 자바스크립트의 코드가 언제 동작하느냐에 따라 HTML의 내용을 제대로 실행할 수도, 그렇지 않을 수도 있음. - 위 실행 화면에서의 에러는 .. [node] 템플릿 상속 템플릿 상속은 이전 포스트인 nunjucks와 이어진다. 지난번에 생성한 template 하위 요소에 layout 폴더를 생성하고 base.html 파일을 생성한다. 생성한 파일에 아래와 같이 코딩한다. {% block content %}{% endblock %} 위의 이미지의 {} 안에 수정할 products.html의 파일의 내용이 들어간다. 완료 되었으면 아래의 소스코드를 products.html 파일에 넣어준다. {% set title = "관리자 리스트" %} {{ message }} {% extends "layout/base.html" %} {% block content -%} 제목 작성일 삭제 제품 이름 2020-03-07 삭제 작성하기 {% endblock %} 이렇게 하면 jQuery나 .. [node] View Engine - Nunjucks 관련 게시글 nunjuck macro developing-move.tistory.com/88?category=883220 [node] nunjucks macro base.html에 아래의 소스를 추가한다. {{ title }} List Write {% block content %}{% endblock %} 이 후 http://localhost:3000/admin/products/ (자신이 지정한 y와 같이 자신이 지정한 포트의.. developing-move.tistory.com vscode tempate 폴더 생성 이때 템플릿 구조도 url의 구조를 따라가야 한다. template 라는 폴더를 만들고 그 하위 폴더 admin을 생성한 후 admin 폴더에 products.html 이라는 파일을 생성한다.. [HTML] 내장 콘텐츠 - iframe, canvas ▶ 다른 HTML 페이지를 현재 페이지에 삽입해 중첩된 브라우저 컨텍스트(프레임)를 표시. - 하나의 페이지에는 기본적으로 브라우저가 가지는 컨텍스트라는 개념이 있는데, 한 페이지 안에 다른 페이지를 삽입해 페이지가 중첩되기 때문에 브라우저 컨텍스트가 중첩되었다고 표현하는 것. 일반적으로 브라우저를 통해 볼 수 있는 사이트의 페이지는 하나지만, 을 통해 사이트의 페이지 안에 또 다른 사이트 페이지를 넣어 활용할 수 있다는 것. Youtube 등의 동영상 콘텐츠를 가져와 삽입 시 활용되는 경우가 많음. 속성 - name : 프레임의 이름 명시. 페이지에 여러 이 들어가는 경우 name 속성을 고유하게 설정하는 것을 권장. - src : 포함할 문서의 URL 명시. - width : 프레임의 가로 너비. -.. [HTML] 멀티미디어(2) - audio, video, figure, figcaption ▶ 소리 콘텐츠(MP3) 삽입. 속성 - autoplay : 페이지에 접근해서 오디오가 준비되면(사이트 진입 시) 바로 오디오 콘텐츠 재생. boolean 값. autoplay 속성 지정 시 preload는 무시됨. - controls : 제어 메뉴를 표시. 재생, 소리 음량 조절, 정지 버튼 등 제어하는 메뉴. boolean 값. - loop : 재생이 끝나면 다시 처음부터 재생 반복. boolean 값. - preload : 페이지가 로드될 때 파일을 로드할지 지정(힌트 제공). 기본값은 metadata. none: 로드하지 않음. 플레이되면 오디오 파일 로드. metadata: 메타데이터만 로드. 기본적인 정보만 가지고 있겠다는 것. auto: 전체 파일을 미리 로드. - src : Contents.. [node] Express를 사용하여 웹 서버 띄우기(feat. nodemon) 해당 예시 실행을 위해서는 Express가 추가 되어 있어야 합니다. 혹시 설치가 되어있지 않거나, 설치법을 모르시는 분은 이전 포스트의 npm install을 보고 오시면 됩니다. 예시 작성을 위한 새폴더 생성 및 새 파일(app.js) 생성 새로 생성한 app.js 파일에 다음과 같이 코딩 const express = require('express'); const app = express(); // 익스프레스 가져오기 const port = 3000; // 포트 번호 app.get('/', (req, res) => { res.send('hello express'); //화면에 표출될 부분 }); app.listen(port, () => { console.log('Express listening on .. [node] npm install하기 https://www.npmjs.com/ npm | build amazing things Build amazing things We're npm, Inc., the company behind Node package manager, the npm Registry, and npm CLI. We offer those to the community for free, but our day job is building and selling useful tools for developers like you. Take your JavaScript devel www.npmjs.com 해당 URL에 접속하면 원하는 npm을 검색하고 다운로드 할 수 있다. 우선 npm install을 위해 신규 폴더를 생성한다. cmd창을.. [Visual Studio Code] 단축키 ※ File > Preferences > Keyboard Shortcuts(Ctrl+K Ctrl+S)에서 현재 활성화된 키보드 단축키를 확인 또는 변경 가능. 명령 설명 Windows macOS 행 삭제 - 커서가 위치한 행 삭제. - 이후 Ctrl+V 시 삭제된 행이 붙여넣기됨. - 블록 지정 사용 시 영역이 지정된 부분만 오려두기 기능. Ctrl+X Cmd+X 행 삭제 - 커서가 위치한 행 삭제. 이후 Ctrl+V 시 삭제된 행이 아닌 이전에 복사된 항목이 붙여넣기 됨. - 블록 지정 후 사용 시 블록 영역이 걸친 행 삭제. Ctrl+Shift+K Cmd+Shift+K 행 복사 Ctrl+C Cmd+C 행 위로 이동 Alt+Up Option+Up 행 아래로 이동 Alt+Down Option+Down 스.. 이전 1 ··· 26 27 28 29 30 31 32 ··· 34 다음
