Category FE 개발
사이드바(tree view)에 파일 자동 선택하기가 생소할 수 있지만 설명을 들으면 ‘아 그거~’ 할 수 있겠다. 아톰에서 화면 탭을 선택했을 경우 트리뷰에서도 자동적으로 선택해주는 것을 말한다. ‘기존에 되었던 것 아니야?’라고 할 수 있겠지만 사용자가 찾아서 선택하지 않으면 되지 않았던 부분이다. 처음부터… Continue Reading →
예전에 gulp html tag include를 포스팅한 적이 있다. 최근에는gulp-nunjucks-render 플로그인을 알게 되어 포스팅을 해보려고 한다. 설치하기 $ npm install –save-dev gulp-nunjucks-render task 만들기: var nunjucksRender = require('gulp-nunjucks-render'); 다음으로, Nunjuck을 쉽게 사용할 수 있는 프로젝트 구조를 만들어야 한다. 아래의 구조로 사용할… Continue Reading →
새로고침할 때마다 이미지 바뀌는 것을 해보았다. background-image 스타일 이미지로 변경하기 var banner = new Array(); banner[banner.length] = ‘bg01.jpg’; banner[banner.length] = ‘bg02.jpg’; banner[banner.length] = ‘bg03.jpg’; var obj = document.getElementById(‘backGround’); var size = Math.floor(Math.random()*(mainBg.length)); j = (isNaN(size)) ? 0 : size; obj.style.backgroundImage… Continue Reading →
[요약]추가적인 CSS코드 냄새에 좋은 내용이 있어서 사람들이 많이 알았으면 해서 퍼왔다. @extend mixin보다 성능이 떨어진다. CSS 성능이란 건 대체로 용량을 말하는데, 용량이 작아야 빨리 다운로드할 수 있기 때문이다. gzip 압축시 mixin은 완전한 반복이므로 용량이 확 줄어드는 반면, extend는 완전한 반복이… Continue Reading →
정의 <video>는 비디오나 영화를 재생시킨다. 속성 src: 재생할 비디오의 주소를 지정한다. width: 요소의 너비를 지정한다. (value: pixels) height: 요소의 높이를 지정한다. (value: pixels) loop: 반복 재생을 지정한다. (value: loop) poster: 사용자 에이전트가 비디오 데이터를 사용할 수 없는 경우 이미지 파일의… Continue Reading →
BLISK란 무엇인가? Blisk는 모든 기기에서 원활히 잘 작동하고 웹사이트 개발과 테스트를 위한 브라우저이다. Blisk의 특징은 공식사이트 메인에서도 안내하고 있는데 다음과 같다. 스마트 폰과 태블릿을 완전히 동일하게 작동할 수 있다. 데스크탑과 모바일의 URL과 스크롤이 동기화 된다. 파일 변경시 자동으로 페이지를 새로고침한다…. Continue Reading →
아톰을 실행할 때마다 그리고 새 창을 띄울 때 마다 Welcome Guide 창이 열려서 번거로워서 구글링을 해보았다. ctrl+,를 Settings 화면에 들어가는 방법 및 File » Settings..선택해서 들어갈 수 있다. Packages에서 Welcome을 검색해서 아래의 이미지 처럼 나올 것이다. 1. 비활성화(disabled)를 한다. 2…. Continue Reading →
크롬 브라우저를 사용하다보면 앱, 테마, 앱, 게임등을 받을 수 있다. 이번에 테마를 변경함으로써 다양한 테마들이 존재하여 공유하고자 이렇게 글을 남긴다. 필자가 적용한 테마는 아래의 Deadpool이다. 필자가 같은 테마를 받으려면 다운받기받기를 누르면 된다. 그러면 크롬의 테마 링크로 이동 될것이다. 이 테마외에… Continue Reading →
서브라임 텍스트에서는 기본적으로 레이아웃을 나눌 수 있었다. 단축키는 이미지에 나와있는거처럼 가능하다. 이렇게 하려면 아톰은 패키지를 이용해야 하는거 같아서 구글링을 검색을 해봤다. 아톰에서는 Pane Layout Package를 설치하면 비슷하게 사용가능하다.
서브라임 텍스트 테마 중에 Seti_UI 테마를 추천하려고 한다. 서브라임 텍스트를 쓰면 대부분 Theme – Soda를 많이 사용하고 있었는데 필자도 Soda를 사용하다가 최근에 Seti_UI로 변경하였다. 바꾸게 된 계기는 Soda를 계속 썼더니 질린것도 있고 폴더구조에서 Seti는 아이콘도 제공되서 굳이 자세히 보고 있지… Continue Reading →
Sublime Text에서는 기본 기능이였던 감싸는 태그가 아톰에서는 패키지를 설치를 해야한다. Sublime Text에서 단축키는 Ctrl+Shift+Enter이다. Atom wrap in tag 설치 ※ 필자는 윈도우 환경이라 항상 윈도우만 설명합니다. Ctrl+, (comma)를 눌러 세팅(Settings)메뉴가 나온다. 아래 이미지처럼 메뉴를 눌러서 들어가도 된다. 기본 단축키는 alt+shift+w이다…. Continue Reading →
Snippets은 정기적으로 사용되는 코드 덩어리로 프로그램 파일에 빠르게 삽입할 수 있다. 유용하고 Atom 텍스트 편집기의 핵심 기능이다. 아톰 패키지와 언어 문법은 종종 미리 정의된 snippets함께 정의 된다. img입력 한 후 Enter을 치면 다음 코드가 나타난다. <img src=”” alt=”” /> 커서는… Continue Reading →
아톰 에디터는 커서 좌/우 키는 있지만 상/하 이동 키가 없다. 이것은 Sublime Text와 동일하다. Sublime Text에서는 Horizontal Scroll를 설치를 하여 사용했었다. Sublime Text에서는 바로 키맵을 바꿀 수가 있었다. 서브라임 텍스트에서는 아래와 같이 설정해서 썼었다. [ { “keys”: [“alt+down”], “command”: “scroll_width”,… Continue Reading →
Atom(아톰)을 사용하기전에는 Source Tree App를 이용해서 형성관리를 했었다. Sublime Text를 사용할 때에는 플러그인들이 있었지만 딱히 만족한 것들이 없어서 소스트리를 이용했던 것이다. Atom(아톰)에서 git plus를 이용하면 소스트리 사용을 안할 수 있다. Git plus 소스트리를 이용 안하고 git 주소 clone을 하고 싶다면… Continue Reading →
에디터를 살표보면 가운데든 구석이든… 위에서 아래까지 쭉 그어진 라인이 보인다. 코딩을 할 때마다 거슬려서 구글링을 해보았다. 메뉴에서 File -> Stylesheet를 선택하면 된다. 선택해서 styles.less 화면이 나오면 아래 코드를 작성하면 된다. // 가운데 줄 제거 atom-text-editor::shadow { .wrap-guide { visibility:hidden; }… Continue Reading →
아톰을 처음 사용하다보면은 엔터를 쳤을 때 해당 {}안으로 들어가야하는데 1컬럼으로 갈 것이다. 그러면 탭키로 다시 안쪽으로 와야하는데 이것이 많이 불편하다. 방법은 다음과 같다. Files -> Settings단축키는 ctrl + , 세팅화면으로 들어간다. Settings화면 왼쪽에 core, editor가 있을껀데 editor 탭을 선택 후… Continue Reading →
Atom의 소개 및 설치방법 그리고 패키지 안내는 이전 포스트에서 다뤘다. 아톰의 다른 패키지를 보고 싶다면 아래 링크로 가면 된다. 아톰 유용한 패키지 리스트 보러가기 이 글에서는 sync-setting 패키지에서만 다룰 것이다. 설치 요약: 단축키 Ctrl+,를 눌러서 Settings에 들어간다. Install 탭을 눌러서… Continue Reading →
소개하기 Github에서 공개한 텍스트 편집기이다. 무료이면서 개인적으로 필요한 기능들에 대해 추가적으로 제작도 가능하며, 이를 패키지로 배포하여 서로 공유할 수 있다. 아톰에서 만든 짧은 소개 영상은 아래에서 볼 수 있다. (자막 有) 장점 오픈소스로 관리, 100% 무료 Git 연동이 기본으로 들어있다…. Continue Reading →
Sass를 사용하여 css로 컴파일 하여 출력 할 때 4가지 스타일 중 하나를 선택할 수 있다. 스타일 nested expanded compact compressed 아래 Sass로 네가지 스타일로 변환을 해보겠다. (확장자는 본인이 편한걸로 하면 된다.) Scss Sass Scss Syntax ul { font-family: Helvetica,… Continue Reading →
메뉴 Preferences => Browse Packages… 탐색기를 연다. 폴더에 \CSS\css_completions.py 파일을 연다. ※ 혹시나 이 파일을 없을 경우 일전에 글을 올린 PackageResourceViewer 플로그인 설치 후에 아래 그림처럼 커맨드창을 열어 플로그인을 실행하면 된다. l.append((prop, prop + “: “)) 이 소스에서 “: “사이의 공백을… Continue Reading →
PackageResourceViewer를 사용해보자. Sublime Text 2 및 Sublime Text 3에서 패키지 리소스를 보고 편집하는 것을 돕는 플러그인이다. 커맨드창CTRL+SHIFT+P 에서 pci타이핑 후 설치하면 된다. 설치 후에 커맨드 창에서 위의 그림처럼 명령어를 치면 PackageResourceViewer를 이용할 수 있다.
draw.io에서 보면 사용 할 수 있다. 사이트 접속하면 위의 그림처럼 나온다. 처음에 접속하면 영문으로 되어있는데 한글 버전이 가능하다. 위의 그림처럼 한국어 선택 후에 페이지 새로고침을 하면 한국어로 변경 되어있다. 한국어로 변경 된 화면을 볼 수 있다. 자세한 설명은 draw 문서보기… Continue Reading →
구글과 어도비의 합작품인 Noto Sans 폰트를 알아보자. 이미 알 사람들은 알겠지만 이 폰트가 전세계 언어를 (아직은 안나온 것은 추후할 예정) 무료로 배포할 예정이라서 관심을 많이 가지고 있었다. Adobe Typekit Blog (한글) Google Developers Korea 구글 전반적 방향 설정 글꼴… Continue Reading →
소개 서브라임 텍스트를 몇년째 사용하고 있는지 모른다. 그러나 최근에 무료배포 에디터중 1위인 Visual Studio Code를 접하게 되었다. 필자가 늦게 접한게 있긴 했다 ^^;; 비주얼 스튜디오 패밀리이며 줄여서 VSCode라고도 한다. 윈도우, 리눅스, 맥에서도 사용할 수 있다는 점이 놀라운점인듯하다 MS사는 보통 자기네… Continue Reading →
<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 →
$(document).keypress(function(event){ var keycode = (event.keyCode ? event.keyCode : event.which); if(keycode == ’13’){ return false; } });
에디터플러스에 설정하기전에 환경은 만들어놓고써야한다. 우선 윈도우라면 Ruby를 설치해야한다. 루비설치와 Sass 설치하는 방법에 자세한 설명은 윈도우에서 SASS설치하기에서 볼 수 있다. 1.Ruby설치하기 http://rubyinstaller.org/downloads에 윈도우용 RubyInstallers를 받으면됩니다. 설치할 때 유의할점은 위의 그림처럼 Add Ruby executables to your PATH에 체크해야줘한다는 것이다. 2.Sass설치하기 Ruby 설치가… Continue Reading →
반응형 웹(Responsive Web) 디바이스 해상도에 따라 웹페이지의 크기가 자동으로 변경되는 것을 말한다. CSS 2.1부터 미디어타입으로 단말기 종류에따라 각각 다른 스타일을 적용이 가능해졌다. 디바이스별 해상도 크기는 다음거 같다. @media (max-width:1199px) { /* Style */ } @media (min-width: 992px) and (max-width: 1199px)… Continue Reading →