신기한 웹 세상

Category

Web issue

아톰(Atom) Snippets 코드 만드는 방법

Snippets은 정기적으로 사용되는 코드 덩어리로 프로그램 파일에 빠르게 삽입할 수 있다. 유용하고 Atom 텍스트 편집기의 핵심 기능이다. 아톰 패키지와 언어 문법은 종종 미리 정의된 snippets함께 정의 된다. img입력 한 후 Enter을 치면 다음 코드가 나타난다. <img src=”” alt=”” /> 커서는… Continue Reading →

Atom(아톰) Vertical Motion 패키지

아톰 에디터는 커서 좌/우 키는 있지만 상/하 이동 키가 없다. 이것은 Sublime Text와 동일하다. Sublime Text에서는 Horizontal Scroll를 설치를 하여 사용했었다. Sublime Text에서는 바로 키맵을 바꿀 수가 있었다. 서브라임 텍스트에서는 아래와 같이 설정해서 썼었다. [ { “keys”: [“alt+down”], “command”: “scroll_width”,… Continue Reading →

Atom(아톰) Git-Plus 패키지 사용하기

Atom(아톰)을 사용하기전에는 Source Tree App를 이용해서 형성관리를 했었다. Sublime Text를 사용할 때에는 플러그인들이 있었지만 딱히 만족한 것들이 없어서 소스트리를 이용했던 것이다. Atom(아톰)에서 git plus를 이용하면 소스트리 사용을 안할 수 있다. Git plus 소스트리를 이용 안하고 git 주소 clone을 하고 싶다면… Continue Reading →

Atom(아톰) 에디터의 가운데 선 제거 하기

에디터를 살표보면 가운데든 구석이든… 위에서 아래까지 쭉 그어진 라인이 보인다. 코딩을 할 때마다 거슬려서 구글링을 해보았다. 메뉴에서 File -> Stylesheet를 선택하면 된다. 선택해서 styles.less 화면이 나오면 아래 코드를 작성하면 된다. // 가운데 줄 제거 atom-text-editor::shadow { .wrap-guide { visibility:hidden; }… Continue Reading →

Atom(아톰) 자동 줄 바꾸는 방법

아톰을 처음 사용하다보면은 엔터를 쳤을 때 해당 {}안으로 들어가야하는데 1컬럼으로 갈 것이다. 그러면 탭키로 다시 안쪽으로 와야하는데 이것이 많이 불편하다. 방법은 다음과 같다. Files -> Settings단축키는 ctrl + , 세팅화면으로 들어간다. Settings화면 왼쪽에 core, editor가 있을껀데 editor 탭을 선택 후… Continue Reading →

Atom sync settings 아톰 동기화 설정 파일 백업!

Atom의 소개 및 설치방법 그리고 패키지 안내는 이전 포스트에서 다뤘다. 아톰의 다른 패키지를 보고 싶다면 아래 링크로 가면 된다. 아톰 유용한 패키지 리스트 보러가기 이 글에서는 sync-setting 패키지에서만 다룰 것이다. 설치 요약: 단축키 Ctrl+,를 눌러서 Settings에 들어간다. Install 탭을 눌러서… Continue Reading →

Atom(아톰) 설치 및 유용한 패키지 리스트! (윈도우 버전)

소개하기 Github에서 공개한 텍스트 편집기이다. 무료이면서 개인적으로 필요한 기능들에 대해 추가적으로 제작도 가능하며, 이를 패키지로 배포하여 서로 공유할 수 있다. 아톰에서 만든 짧은 소개 영상은 아래에서 볼 수 있다. (자막 有) 장점 오픈소스로 관리, 100% 무료 Git 연동이 기본으로 들어있다…. Continue Reading →

Sass Output 스타일

Sass를 사용하여 css로 컴파일 하여 출력 할 때 4가지 스타일 중 하나를 선택할 수 있다.   스타일 nested expanded compact compressed 아래 Sass로 네가지 스타일로 변환을 해보겠다. (확장자는 본인이 편한걸로 하면 된다.) Scss Sass Scss Syntax ul { font-family: Helvetica,… Continue Reading →

Sublime Text 3 입력시 불필요한 공백 제거하기

메뉴 Preferences => Browse Packages… 탐색기를 연다. 폴더에 \CSS\css_completions.py 파일을 연다. ※ 혹시나 이 파일을 없을 경우 일전에 글을 올린 PackageResourceViewer 플로그인 설치 후에 아래 그림처럼 커맨드창을 열어 플로그인을 실행하면 된다. l.append((prop, prop + “: “)) 이 소스에서 “: “사이의 공백을… Continue Reading →

Sublime Text3 플로그인 PackageResourceViewer 사용하기

PackageResourceViewer를 사용해보자. Sublime Text 2 및 Sublime Text 3에서 패키지 리소스를 보고 편집하는 것을 돕는 플러그인이다. 커맨드창CTRL+SHIFT+P 에서 pci타이핑 후 설치하면 된다. 설치 후에 커맨드 창에서 위의 그림처럼 명령어를 치면 PackageResourceViewer를 이용할 수 있다.

순서도 그릴 수 있는 사이트

draw.io에서 보면 사용 할 수 있다. 사이트 접속하면 위의 그림처럼 나온다. 처음에 접속하면 영문으로 되어있는데 한글 버전이 가능하다. 위의 그림처럼 한국어 선택 후에 페이지 새로고침을 하면 한국어로 변경 되어있다. 한국어로 변경 된 화면을 볼 수 있다. 자세한 설명은 draw 문서보기… Continue Reading →

구글 무료 폰트 Noto Sans CJK 이용하기

구글과 어도비의 합작품인 Noto Sans 폰트를 알아보자. 이미 알 사람들은 알겠지만 이 폰트가 전세계 언어를 (아직은 안나온 것은 추후할 예정) 무료로 배포할 예정이라서 관심을 많이 가지고 있었다.   Adobe Typekit Blog (한글) Google Developers Korea 구글 전반적 방향 설정 글꼴… Continue Reading →

Visual Studio Code를 사용해보다.

소개 서브라임 텍스트를 몇년째 사용하고 있는지 모른다. 그러나 최근에 무료배포 에디터중 1위인 Visual Studio Code를 접하게 되었다. 필자가 늦게 접한게 있긴 했다 ^^;; 비주얼 스튜디오 패밀리이며 줄여서 VSCode라고도 한다. 윈도우, 리눅스, 맥에서도 사용할 수 있다는 점이 놀라운점인듯하다 MS사는 보통 자기네… Continue Reading →

탭 메뉴와 bxSlider 같이 사용하기

탭 메뉴속에 bxSlider를 넣을경우 첫번째 화면은 잘 나오는데 두번째 탭부터 제대로 나오질 않는 이슈가 발생했었다. 아무래도 ‘display’: ‘none’으로 되어 있어서 bxSlider가 인지를 못하는 것 같다. 삽질을 하다가 구글링은 역시 없는 것이 없다! 구글링에서 검색한 내용을 넣어보니 적용이 잘 되었다. 탭… Continue Reading →

[걸프(Gulp.js)]gulp html tag include사용하기

<header>, <nav>, <footer>같은 공통적으로 사용 태그나 내용을 .html파일마다 다 넣지 않아도 사용하려는(예: header.html) 한 파일을 만들어 모든 페이지에 호출하여 사용할 수 있다. gulp 플러그인 중에 gulp-html-tag-include를 사용해보려고 한다. 설치하기 npm install –save-dev gulp-html-tag-include gulpfile.js에 추가해보자. var gulp = require(‘gulp’), include… Continue Reading →

[jQuery]enterKey 막기

$(document).keypress(function(event){ var keycode = (event.keyCode ? event.keyCode : event.which); if(keycode == ’13’){ return false; } });

EditPlus에서 Sass 설정 및 구문자 변경하기

에디터플러스에 설정하기전에 환경은 만들어놓고써야한다. 우선 윈도우라면 Ruby를 설치해야한다. 루비설치와 Sass 설치하는 방법에 자세한 설명은 윈도우에서 SASS설치하기에서 볼 수 있다. 1.Ruby설치하기 http://rubyinstaller.org/downloads에 윈도우용 RubyInstallers를 받으면됩니다. 설치할 때 유의할점은 위의 그림처럼 Add Ruby executables to your PATH에 체크해야줘한다는 것이다. 2.Sass설치하기 Ruby 설치가… Continue Reading →

CSS 미디워 쿼리 설정하기

반응형 웹(Responsive Web) 디바이스 해상도에 따라 웹페이지의 크기가 자동으로 변경되는 것을 말한다. CSS 2.1부터 미디어타입으로 단말기 종류에따라 각각 다른 스타일을 적용이 가능해졌다. 디바이스별 해상도 크기는 다음거 같다. @media (max-width:1199px) { /* Style */ } @media (min-width: 992px) and (max-width: 1199px)… Continue Reading →


© 2017 신기한 웹 세상

Up ↑