HTML , CSS 를 쉽게 만들자~~!

subline Text 라는 툴이 있다.
파이썬으로 개발된 편집기로 매우 막강한 기능을 제공한다.

이 편집기의 기능중 하나인 Zen-coding 이라는게 있다.

이클립스에서는 플러그인으로 이 기능을 사용할 수 있다.


Zen-coding 은 html 또는 css 를 간단한 문법으로 매우 빠르게 생성할 수 있다.


* 설치

이클립스 의 이클립스마켓을 선택한다.(help > Eclipse Marketplace)

Emmet 을 검색한다.




위 그림에 표시된 플러그인을 설치한다.(그림의 경우는 이미 설치된 상태임)


Window > Preferences 를 실행한다.



위그림과 같이 emmet 을 선택후 extensions 부분에 jsp 를 추가한다.(이 부분을 안할 경우 jsp 에서는 동작하지 않는다)


여기까지 했다면 설정은 완료되었다.


이제 간단한 사용법을 살펴보자.

사용법은 css 또는 jquery 의 셀렉터를 생각하면된다.


table>tr>td*3  이와 같이 타이핑후 탭(tab)키를 누르면 아래와 같은 경과가 나온다.

       <table>

<tr>

<td></td>

<td></td>

<td></td>

</tr>

</table>

table 태그 아래 tr 태그 아래 td 태그를 생성하고 td는 3개를 생성하라는 의미이다. 너무나 간단하다.


 태그

 내용

 >

 하위에 태그를 생성한다.

 +

 동등한 위치에 태그를 생성한다.

 * 횟수

 생성할 갯수를 정한다.


이것 이외에 클래스 또는 id 등을 다는 방법은 기본적인 셀렉터와 동일하다.


input:button#btn.btnStyle 이와 같이 입력하면 아래와 같은 결과값이 도출된다.

<input type="button" value="" id="btn" class="btnStyle" />

# 은 id 를  .은 클래스를 생성한다.

또한 input:button 은 input:b 로 줄여서 사용이 가능하다.



그렇다면 역으로 아래와 같은 결과를 뽑기 위해서는 어떻게 작성해야하는가~?


      <table id="list" class="viewList">

<thread>

<tr>

<th></th>

<th></th>

<th></th>

</tr>

</thread>

<tr class="row">

<td class="cell"></td>

<td class="cell"></td>

<td class="cell"></td>

</tr>

<tr class="row">

<td class="cell"></td>

<td class="cell"></td>

<td class="cell"></td>

</tr>

<tr class="row">

<td class="cell"></td>

<td class="cell"></td>

<td class="cell"></td>

</tr>

</table>

  

정답 =>   table#list.viewList>(thread>tr>th*3)+(tr.row*3>td.cell*3)

단 한줄만으로 저러한 table 태그를 생성할 수 있다.

이것 이외에도 매우 많은 기능들이 제공되고 있으며, 아래 사이트에서 확인이 가능하다.



html Zen-coding 문법 확인

css Zen-coding문법 확인


이상~~


저작자표시 비영리 변경금지

javascript 와 css 파일에 대해서는 많은 압축 프로그램들이 있다.

 

yuicommpressor 는 사용결과 다른 압축프로그램보다 압축률이 좋게 나오지는 않았다.

그렇지만 다른압축프로그램에서 발생한 한글문제가 발생하지 않기 때문에 이 압축프로그램을 사용하였다.

 

홈페이지 : http://yui.2clics.net/

 

Usage: java -jar yuicompressor-x.y.z.jar [options] [input file]

 

Global Options

-h, --help                Displays this information(도움말)

--type <js|css>           Specifies the type of the input file(변경하고자 하는 파일의 타입 js 또는 css)

--charset <charset>       Read the input file using <charset>(사용하는 파일의 charset 지정)

--line-break <column>     Insert a line break after the specified column number(특정 컬럼 번호뒤에 줄바꿈 삽입)

-v, --verbose             Display informational messages and warnings(콘솔정보 표시)

-o <file>                 Place the output into <file>. Defaults to stdout.(압축된 파일의 파일명)

 

JavaScript Options

--nomunge                 Minify only, do not obfuscate (난독을 제외한 압축)

--preserve-semi           Preserve all semicolons (세미콜론 유지)

--disable-optimizations   Disable all micro optimizations

                          (foo['bar] => foo.bar and {'bar':x} => {bar:x} 의 형태로 변환을 사용하지 않음)

           

* disable-optimizations 의 추가 설명

disable-optimizations 을 설정하지 않을 경우 아래와 같은 소스로 두가지 메소드가 호출된다.

if (!disableOptimizations) {

        optimizeObjectMemberAccess(this.tokens);

        optimizeObjLitMemberDecl(this.tokens);

    }

optimizeObjectMemberAccess 메소드의 경우 obj["foo"] 를 obj.foo 로 변환하여 3bytes 를 절약한다. 

[]"" 의 4바이트가 제외되고,  . 의 1바이트가 추가된다.

 

optimizeObjLitMemberDecl 의 경우에는 json 내부의 멤버 선언부의 스트링 선언 'foo' 을 foo 로 변환하여

'' 2바이트를 절약한다.

 

사용법>

java -jar yuicompressor-x.y.z.jar myfile.js -o myfile-min.js --charset utf-8

저작자표시 비영리 변경금지

'IT > javascript' 카테고리의 다른 글

String fommat 2  (0) 2015.08.03
javascript 의 arguments  (0) 2014.12.03
javascript 에서 string.format 사용  (0) 2014.11.24
setTimeout , setInterval , clearTimeout , clearInterval 사용  (0) 2014.11.22
setTimeout 에 파라미터를 넘기는 법  (0) 2014.11.22

+ Recent posts

티스토리툴바