demun(대문블로그)

퍼블리셔/jQuery2019. 6. 5. 11:21

문서를 만들다보면 해당페이지로 이동후 원하는 위치까지 스크롤이 되는 경우를 원할때가 있습니다. 이때 문서가 html 이든 jsp(do), asp 든 상관없이 원하는 액션이 되길 원합니다. 이런 액션이 종종 있어서 아예 만들어봤습니다. 필요한 부분 index.html: 이동하기전 보여져야할 페이지(링크가 있는 페이지) target.html: 최종 이동할 페이지(스크롤할 영역이 있는 페이지) main.js: 해당영역까지 부드럽게 스크롤이 될 스크립트 아래 페이지의 내용은 이렇습니다. 링크를 보시면 'target.html#section1' 형식입니다. '해당페이지#해당영역아이디' index.html Go to section scroll-section1 Go to section scroll-section2 Go..

퍼블리셔/기술2018. 12. 20. 10:59

블로그상에서 코드를 이쁘게 보이기 위해서 여러가지 플러그인을 사용해봤습니다. 이전까지만해도 가장 많이 사용했던 플러그인은 highlightjs 였습니다. 구문강조 highlightjs 사용법 -> http://demun.tistory.com/2419?category=388459 블로그상에서 구문강조 할때는 여러가지 유의해야 합니다 막 바꾸다가는 이전 작업물이 제대로 나오지 않는다던가, 또는 다시 작업해야하는 양이 많아질수 있습니다. 저도 이전에 highlightjs 를 사용했기때문에 이번에는 prismjs 로 변경을 해서 작업해야하는 양이 좀 되긴 합니다. 제가 구문강조 플러그인 선택한 이유용량이 적습니다.(원하는 언어, 기능만 선택해서 사용가능)기능이 많습니다.(숫자 표시, 하이라이트 기능 등등 이것도..

퍼블리셔/VisualStudioCode2018. 10. 15. 07:45

vscode(Visual Studio Code)는 기본적으로 에디터 상단에 파일명 - 폴더명을 표시하게 되어 있습니다. 하지만 파일의 전체 경로가 필요할 때가 있습니다. 특히 숨김파일이나 설정파일 같은 경우죠. 설정파일을 한번 열어보겠습니다. 파일 - 기본설정 - 설정 또는 Ctrl + , 입니다. title 로 검색을 하면 아래와 같은 화면이 나옵니다. 설명이 다 되어 있으니 원하는 키워드를 입력해서 사용하세요. 저의 경우 전체경로를 보이게 하기위해 `${activeEditorLong}` 를 지정했습니다. 파일을 열어보면 전체 경로가 나온것을 알수 있습니다.

퍼블리셔/VisualStudioCode2018. 1. 11. 07:00

이글은 https://demun.github.io/vscode-tutorial/task/ 에서 볼 수 있습니다. 테스크는 grunt, gulp 등과 같은 작업주자 또는 빌드도구를 말합니다. vscode 에서는 빌드도구를 에디터 자체내에서 이용할 수 있도록 지원합니다. 타입스크립트 빌드하기타입스크립트는 빌드과정을 거쳐 자바스크립트로 변환해야 사용할 수 있습니다. 따로 빌드도구를 사용하지 않고 vscode 에서 빌드하는 과정을 알려드립니다. 콘솔창에서 아래와 같이 입력합니다. mkdir task-test # task-test 폴더생성 cd task-test # task-test 폴더로 이동 tsc --init # tsconfig.json 생성 code . # vscode 열기 코드 실행 모습 vscode 열..

퍼블리셔/VisualStudioCode2018. 1. 10. 07:00

이글은 https://demun.github.io/vscode-tutorial/debug/ 에서 볼 수 있습니다.vscode 에서 디버깅은 핵심기능중 하나입니다.vscode 에는 node.js 런타임에 대한 디버깅 지원기능이 내장되어 있어 JavaScript, TypeScript 및 JavaScript로 변환된 다른 언어를 디버깅 할 수 있습니다. 그러기에 기본적으로 디버깅은 하려면 nodejs 를 설치해야 합니다.다른 언어에 대해서는 확장기능을 설치해서 이용이 가능합니다. vscode 폴더에 wecome.js 라는 자바스크립트 코드를 하나 만들고 디버깅을 해봅니다.고급 디버깅을 하려면 환경설정을 해줘야 합니다. 상단에 'launch.json' 구성을 클릭하면 디버깅 환경설정파일이 생성됩니다.'launc..

퍼블리셔/VisualStudioCode2018. 1. 9. 07:00

이글은 https://demun.github.io/vscode-tutorial/git/ 에서 볼 수 있습니다. vscode 는 git 을 사용하기 위한 기능이 기본적으로 추가되어 있습니다. git 을 사용하려면 먼저 https://github.com 에 회원가입이 되어 있어야하고, git-scm 에서 git 프로그램을 다운로드하고 설치해야 합니다. 가입이 안되어 있다면 https://github.com 에 회원가입을 하고 프로그램도 설치하시길 바랍니다. 설치가 되어 있다고 가정하고 vscode 에서 git 을 사용하는 방법을 알아보겠습니다.최초설정git 에 내이름과 이메일등을 먼저 등록하는 것이 좋습니다. vscode 에서 git 을 사용하다보면 나중에 이름과 이메일을 물어옵니다. 그러니 먼저 설정해둡니..

퍼블리셔/VisualStudioCode2018. 1. 8. 12:45

비주얼 스튜디오 코드의 튜토리얼은 https://demun.github.io/vscode-tutorial/shortcuts 통해 배포됩니다. 파일 > 기본 설정 > 바로가기 키 에서 현재 활성화된 키보드 단축키를 볼 수 있습니다 . 기본 편집 키 명령 명령 ID ctrl+X 행 삭제 (빈 선택) editor.action.clipboardCutAction ctrl+C 행 복사 (빈 선택) editor.action.clipboardCopyAction ctrl+shift+k 행 삭제 editor.action.deleteLines ctrl+Enter 아래에 행 삽입 editor.action.insertLineAfter ctrl+shift+Enter 위에 행 삽입 editor.action.insertLineBef..

퍼블리셔/VisualStudioCode2018. 1. 4. 08:45

비주얼 스튜디오 코드의 튜토리얼은 https://demun.github.io/vscode-tutorial/ 통해 배포됩니다. 시작 비주얼 스튜디오 코드는 가볍고, 맥,리눅스,윈도우에서 모두 실행 가능하고, 무료인 코드편집기입니다. Sublimetext, Atom 에디터의 장점들을 잘 모아 만든 에디터입니다. 특히 서브라임텍스트의 한글입력 문제,인코딩 문제를 깔끔히 해결한 에디터입니다. 다양한 언어를 지원하며, 확장 프로그램을 통해 에디터 기능을 확장시킬수 있습니다. 설치 맥, 리눅스 를 통해 설치를 할 수 있으며, 윈도우는 인스트롤러를 통해 다운로드해서 설치를 진행할 수 있습니다. 윈도우는 .NET Framework 4.5.2 이상이 필요합니다. 설치 프로그램에서 vscode를 %PATH% 에 추가하므로..

퍼블리셔/VisualStudioCode2017. 12. 11. 07:00

Grunt 나 Gulp 같은 작업주자를 사용하면 실시간으로 감시하고 로컬서버를 열어서 보여주곤합니다.VSCode에서는 Live Server 플러그인을 설치하면 그런 환경설정없이 바로 로컬서버를 열어서 확인할 수 있습니다. 1. Live Server 설치먼서 VSCode 에서 Live Server를 설치하세요.설치했다면 재시작을 해야합니다. 2. Live Server 사용하기테스트로 index.html 을 하나 만들었습니다. 비주얼스튜디오코드를 보면 하단 우측에 못보던 Go Live 라는것이 새로 생겼습니다.이걸 클릭합니다.클릭하면 기본 포트인 5500 포트로 해당 파일을 엽니다. 브라우져로 바로 해당파일이 열리고 로컬서버가 열린걸 볼 수 있습니다.에디터에서 수정후 저장을 하면 로컬서버에서 바로 반영이 되..

퍼블리셔/VisualStudioCode2017. 12. 6. 11:08

비주얼스듀디오코드는 기본적으로 지원하는 아이콘이 있습니다. 그냥 사용해도 되지만 좀더 명확한 파일아이콘을 사용하고 싶다면 플러그인을 다운로드해서 사용하면 됩니다.vscode-icons 도 있지만 Material Icon Theme 가 더 많은 아이콘을 지원하는것 같습니다.지원하는 아이콘을 보면 아래와 같습니다.사용을 하려면 먼저 설치를 해야겠죠. 1. Material Icon Theme 설치저는 벌써 설치를 해서 아래처럼 나오지만 설치를 안한분은 설치버튼을 통해서 설치를 하세요.재시작하세요.2. Material Icon Theme 적용파일 -> 기본설정 -> 파일 아이콘 테마 를 클릭합니다.그럼 Material Icon Theme 를 선택해주기만 하면 됩니다.예제로 폴더아이콘과 파일아이콘을 보세요.