신기한 웹 세상

Category

Web issue

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 →

[jQuery] 부드럽게 화면 이동하기

클릭을 했을 경우 href="#아이디값"으로 끊겨서 이동하는 것이 아니라 jQuery의 .animate()를 이용해서 화면이 부드럽게 이동되게 할 수 있다. 또 아이디 값이 없고 #만 있을 경우는 맨 위로 이동 시키게 할 수 있는데 참고 소스는 아래와 같다. 부드럽게 스크롤링의 접근성 원활한 스크롤링을… Continue Reading →

sublime text3가 Build 3103으로 업데이트 됨.

서브라임 텍스트 3이 드디어 업데이트 되었다. 2015년 3월 26일에 3083으로 업데이트 된 이후 거진 일년만에 업데이트가 된거 같다. 2월 9일에 3103으로 업데이트가 되었다. 개발자 모드로 하면 https://www.sublimetext.com/3dev 여기서 볼 수 있었지만 공식적으로 나오지 않은거라서 불안정했었다. 장점은 빠르게 변화되는걸 체험할 수… Continue Reading →

모바일에서 레이어팝업 스크롤(Scroll) 적용 시키기!

모바일에서 레이어팝업 띄웠을 때 레이어안에서 스크롤이 안되는 경우가 많았다. 스크롤 하게 되면 body쪽 전체 스크롤이 움직이고 안쪽만 안되는 어려움이 많았다. HTML: <div id=”wrap”> <a class=”btn_layerpopup” href=”#layerPopup”>팝업 띄우기</a> <div class=”layer-popup” id=”layerPopup”> <div class=”header”> <span>제목</span> <a class=”btn_close_layer” href=”#none”>닫기</a> </div> <div class=”layer-containers”> <div… Continue Reading →

javascript DOM 트리 활용하기

Dom 트리에 접근하고 수정하는 작업은 크게 두 단계로 나뉜다.
1. 작업을 수행 할 대상 요소를 표현하는 노드를 찾는다.
2. 해당 노드의 텍스트나 자식 요소, 특성 등을 조작한다.


© 2017 신기한 웹 세상

Up ↑