비주얼 스튜디오 코드에서 젠코딩 emmet 예제 사용법들

Posted by HULIA(휴리아)
2017. 12. 3. 12:26 호스팅_서버_툴/툴

1. 부모태그와 자식태그

부모태그 > 자식태그

ex) div > label

<div><label for=""></label></div>


2. 친구태그

친구태그+친구태그

ex)div + div

<div></div>
<div></div>


3. 태그안에 속성

태그[속성들]

ex) div[class="button" id="btn_ok"]

<div class="button" id="btn_ok"></div>


3.1 태그안에 class에 여러가지 스타일 넣기

태그[속성들]

ex) div[class="button button-red" id="btn_ok"]

<div class="button button-red" id="btn_ok"></div>


4. 태그안에 텍스트 넣기

태그{값}

ex) label{Name}

<label for="">Name</label>


5. 여러개 태그를 만들기

태그*갯수

ex)ul>li*5

<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>


5.1 여러개 태그에 넘버링 하기

태그.이름$*갯수

ex)ul>li.item$*5

<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
</ul>



6. div 태그

6.1 div 태그에 id명을 주면서 만들기

#layer

<div id="layer"></div>


6.2 div 태그에 class명을 주면서 만들기

.container

<div class="container"></div>


7. 상위로 빠져나오기

^

ex)div>p>span^^^div>p>span

<div>
<p><span></span></p>
</div>
<div>
<p><span></span></p>
</div>






putty 대체할만한 무료 터미널 MobaXterm

Posted by HULIA(휴리아)
2017. 10. 20. 17:40 호스팅_서버_툴/툴

putty를 쓰다가 세션관리라던지 접속할때라던지 편하게 할 수 있는 툴이 없을까 하다가 발견한 터미널 툴

MobaXterm


생각보다 기대이상이다

UI도 이쁘고

여러가지 기능들

putty는 기억도 안날듯

게다가 무료임^^


설치는 다음의 링크를 클릭하면 된다

https://mobaxterm.mobatek.net/


참고로 설치가 필요없는 portable edition이 있어서 맘에 든다^^










VI 명령어 정리

Posted by HULIA(휴리아)
2017. 6. 3. 00:27 호스팅_서버_툴/툴

라인이동

라인번호 입력후 SHIFT+G

 

위로 스크롤

CTRL+B

 

 

아래로 스크롤

CTRL+F

 

맨 아래로

G

 

 

맨 위로

g

 

 

검색

/검색어

 

아래로 검색

n

 

위로 검색

N

 

복원

u

 

복원취소

CTRL+R

이클립스 자주 쓰는 단축키

Posted by HULIA(휴리아)
2017. 3. 30. 22:29 호스팅_서버_툴/툴

이클립스 자주 쓰는 단축키

 

[실행]

Ctrl + F11 : 이전에 실행했던 클래스 실행

 


[열기]

Ctrl + Shift + R : 이름 검색해서 리소스 열기

 


[소스 네비게이션]

Ctrl + 마우스커서(혹은 F3) : 클래스나 메소드 혹은 멤버 상세 검색

Alt + LeftAlt + Right : 이후, 이전

Ctrl + O : 소스의 메소드 리스트 확인

F4 : 클래스명을 선택하고 F4를 누르면 해당 클래스의 상속 계층 확인

Alt + <- (->) : 이전(다음) 작업 화면

 


[문자열 검색]

Ctrl + K : 찾을 문자열을 블럭으로 지정하고 위에서 아래로 검색

Ctrl + Shift + K : 아래에서 위로 문자열 검색

Ctrl + F : 기본 검색

Ctrl + H : 여러가지 검색(파일 검색을 하면 전체가 검색된다)

 


[소스 편집]

Ctrl + Space : 입력 중에 완성 기능 호출 

F2 : 컴파일 에러 줄에 커서를 놓고 이 키를 누르면 에러 힌트 제공

Ctrl + L : 지정한 소스 줄로 이동

Ctrl + Shift + Space : 메소드 괄호에 커서를 놓고 이 키를 누르면 파라미터 힌트 보여줌

Ctrl + D : 한 줄 삭제

Ctrl + W : 파일 닫기

Ctrl + I : 들여쓰기 자동 수정

Ctrl + Shift + / : 블록을 주석으로 처리 (/* */)

Ctrl + Shift + \ : 블록 주석을 해제

Ctrl + / : 여러 줄을 주석 처리/해제


Alt + Shift + 방향키 : 블록 선택

Ctrl + Shift + Space : 메소드 파라미터 목록

Ctrl + Shift + O : 자동 import 

Ctrl + Shift + F4 : 열린 파일을 모두 닫음

Ctrl + M : 전체 화면 전환


Ctrl + Alt + Up(Down) : 한 줄(블럭) 복사

Alt + Up(Down) : 위(아래) 줄과 바꾸기


Ctrl + , 또는 . : 다음 annotation(에러, 워닝, 북마크) 점프

Ctrl + 1 : 퀵 픽스(리팩토링)


F3 : 선언된 변수나  메소드 정의로 이동

Ctrl + T : 상속 계층 팝업 창 

Ctrl + O : 메소드나 필드 이동

Ctrl + F6 : 창 전환



[주석]

Alt + Shift + R : code templete 주석 등록(해당 클래스 위에서)

/** : 해당클래스 위에서 엔터 자동으로 parameter가 주석으로 들어감

 


[템플릿 사용]

sysout 입력 후 Ctrl + Space :  System.out.println(); 자동 입력됨

       Windows > Preferences > JAVA > Editor > Templates에 추가 가능 

try 입력한 후 Ctrl + Space : try-catch 문이 자동 완성

for 입력한 후 Ctrl + Space : for 문 자동 완성



[에디터 변환]

여러 파일 작업중일 때 Ctrl + F6 키를 누르면 파일 목록 나옴.  

       F6 누르면 아래로 이동하고 Ctrl + Shift + F6  : 누르면 위로 커서 이동

Ctrl + F7 : 뷰 전환

Ctrl + F8 : 퍼스펙티브 전환

F12 : 에디터로 포커스 이동 

Ctrl + / :  라인/블록 주석 처리 (추가/제거)

Ctrl + L : 특정 줄로 이동

Ctrl + F6 : Editor 창 이동

Ctrl + F7 : View 이동

Ctrl + F8 : Prespectives 이동

Ctrl + D : 커서가 위치한 줄 삭제 

Ctrl + J : Incremental find 

           한 글자자씩 누를 때 마다 코드내의 일치하는 문자열로 이동 

           Ctrl + J 를 다시 누르면 일치 부분을 위/아래 방향키로 탐색 가능

Ctrl + N : 새 파일/프로젝트 생성

Ctrl + 1 (빠른 교정) – 구문에 맞게 소스 교정 지원

Ctrl + 0 : 클래스 구조 트리

Ctrl + Space :  소스에서 사용 가능한 메소드, 멤버 리스트

Ctrl + PageUp , Ctrl + PageDown : Edit 창 이동

Ctrl + Shift + Down : 클래스 내에서 다음 멤버로 이동

Ctrl + Shift + M : 해당 객체에 커서롤 놓고 키를 누르면 Import 구문 자동 생성

Ctrl + Shift + O :  전체 소스에서 import 안 된 클래스의 import 문 자동 생성

Ctrl + Shift + G : 해당 메서드/필드 쓰이는 곳 표시

Alt + Shift + R : 이름 변경 (소스 내에서 영향받는 참조 정보까지 변경)

F3 : 선언된 위치로 이동

F11 : 디버깅 시작

F8 : 디버깅 계속

F6 : 한 줄씩 디버깅 

F5 : 한 줄씩 디버깅할 때 함수인 경우 함수 내부까지 디버깅

F12 : Editor 창으로 이동 

Alt + Up , Alt + Down :  해당 줄을 위/아래로 이동

Alt + Shift + S :  소스 메뉴 출력(Import 추가 , Comment 추가 , Generator 메뉴)

Alt + Shift + Up : 블록 설정 

Alt + Shift + Down : 블록 해제 

Alt + Shift + J :  해당 메서드/클래스에 대한 주석 템플릿 생성

Alt + Shift + Z : 구문 블록을 감싸는 메뉴 제공

Ctrl + Shift + F : 소스 코드를 문법 템플릿에 맞게 정리

Ctrl + Alt + Down: 한 줄 복사 후 그 아래에 붙여넣음

Ctrl + Shift +X : 대문자로 변환

Ctrl + Shift + Y : 소문자로 변환

Ctrl + Shift + L : 모든 단축키 목록 표시

Ctrl + Shift + B : 커서 줄에 중단점 설정

Ctrl + Shift + T : 클래스 검색

막강한 기능을 가진 프론트 무료 텍스트 에디터 기능들 요약 브라켓 아톰 서브라임 비주얼스튜디오코드

Posted by HULIA(휴리아)
2017. 1. 20. 22:24 호스팅_서버_툴/툴

****필수 인스톨 패키지도 같이 적어두기



공통점

다양한 OS 지원

-윈도우, 맥, 리눅스




1. 비주얼 코드(MS에서 개발)

-플러그인등을 설치안해도 기본으로 제공되는 기능이 많다(code compare 기능 제공

-강력한 CSS 유효성 체크 기능

-많은 사이드바 위치 표시 기능

-안정성, 속도가 ATOM보다는 빠르다(주관이므로 참고)

-쓸만한 문서비교 기능

-다양한 언어 지원가능한 플러그인 설치 가능

-IDE 부럽지 않은 디버깅 기능

-강력한 IntelliSense 지원


 

공식사이트

https://code.visualstudio.com 




2. 브라켓(Adobe에서 개발)

-크롬 브라우저를 통해서 실시간 코딩하는 화면을 볼 수 있다

-OS따라서 환경이 거의 동일하다

-자동완성기능 제공

-테마와 플러그인 제공

-무료이다(MIT라이센스)

-포토샵과 일러스트레이터랑 연동이 된다

-컬러값을 쉽게 사용할 수 있다

-빌드라던지 등등 쓰기 힘들다(개발자에겐 어울리지 않음)


공식사이트

http://brackets.io/


플러그인

-Emmet(젠코딩)

-Beautify(코드정렬)



 

 

3. 아톰(Github에서 개발)

-많은 플러그인을 설치하면 느려지는 단점이 있음(오류도 간간히)

-너무 많은 업데이트



공식사이트

https://atom.io/



플러그인

-atom-beautify(코드정렬)

-docblockr(주석포멧)

-emmet(젠코딩)

-minimap(작업중인파일미니맵)

-open-in-browser(html파일을 브라우저에서 열어보는플러그인)

-run-in-atom(아톰 에디터에서 스크립트를 돌려볼 수 있는 플러그인)

-seti-icon(아이콘)

-split-diff(diff및 변경이력)

-color-picker(컬러)

-markdown-preview-plus

-linter(html, css, javascript 유효성 검증)


플러그인 관련 글

https://gomugom.github.io/atom-packages/


 

 

4. 서브라임(Sublime에서 개발)

-무료도 계속 쓸 수 있지만 팝업이 뜨면서 유료로 결제하길 원한다

-속도면에서보면 위의 에디터에서 가장 빠르지 않을까(주관적임)

-FTP를 에디터에서 사용할 수 있다(플러그인 제공)

-포터블 버젼 제공


공식사이트

http://sublimetext.com

 

플러그인

-ConverToUTF8(인코딩)

-emmet(젠코딩)

-