블로그 이미지
내게 능력 주시는 자 안에서 내가 모든것을 할수 있느니라 - 빌립보서 4 : 13 - happydong

카테고리

Happydong (1363)
프로그래밍 (156)
MUSIC (16)
인물 (3)
Utility (10)
세미나 소식&내용 (22)
IT뉴스 (18)
운동 (830)
CAFE (10)
Life (282)
Total
Today
Yesterday



 웹개발을 하다 보면 .js 파일 또는 .css파일들의 크기를 줄이기 위해 여러가지 툴을 이용해서 경량화를 할 것이다. 나와 같이 비쥬얼 스튜디오(Visual Studio)를 이용하여 개발하고 있는 개발자들이라면 좀더 편하고 쉽게 경량화를 할 수 있는 방법에 대해 알아 보도록 하겠다. 


 비쥬얼스튜디오와 잘 통합되어 .js, .css파일들의 min파일로 만들어 주는 "Microsoft Ajax Minifier" 있다. 이는 비쥬얼스튜디오 빌드 작업과의 통합을 시킬수 있으며, 콘솔 커맨드 기능, DLL참조를 통한 프로그래밍이 가능하다.


 ㅁ 사용 방법


 비쥬얼스튜디오 2010이상 설치되어 있다면, 기본적으로 설치가 되어 있을 것이다. 만약 2010이하 버전을 사용하고 있다면 따로 설치 파일을 다운로드 받아 설치해야 한다. (다운로드 주소 : http://ajaxmin.codeplex.com/) 그럼 이제 순서대로 어떻게 적용 할 수 있는지 알아 보자.


 1. 프로젝트 구성 확인


[그림 1 - 프로젝트 구성 화면]


 [그림 1]은 프로젝트 구성 내용을 보여준다.  그림에 보면 .js파일들이 Scripts폴더와 Res 폴더 밑에 js폴더에 있는 것이 확인 되며, .css파일들은 Content폴더와 Res폴더 밑에 css폴더에 있다. 


 2. 프로젝트 언로드 


[그림 2 - 프로젝트 언로드]


 프로젝트 파일에서 우클릭을 해서 [그림2]와 같이 메뉴가 나타나게 한다. 그리고 "프로젝트 언로드" 메뉴을 클릭한다. 그럼 해당 솔루션 파일에서 프로젝트가 비활성화된 상태로 변할 것이다. 


 3. 프로젝트 구성 편집


  

 [그림 3 - 프로젝트 구성 편집]


  비활성화되어 있는 프로젝트를 우클릭해서 "편집 [프로젝트이름].csproj"를 클릭해서 편집 창이 열리도록 한다. 

편집창이 열리면 프로젝트를 구성하는 엘리먼트들이 나타날 것 이다. 그럼 마우스를 쭈욱 내려서 <project>엘리먼트가 끝나는 바로 앞에 아래 설정을 정의 하자.


 <UsingTask TaskName="AjaxMin" AssemblyFile="$(SolutionDir)_Lib\MicrosoftAjax\AjaxMinTask.dll" />  

<Target Name="AfterBuild">

    <ItemGroup>

      <JS Include="**\*.js" Exclude="**\*.min.js;Scripts\*.js" />

      <CSS Include="**\*.css" Exclude="**\*.min.css;Content\*.css" />

    </ItemGroup>

    <AjaxMin JsSourceFiles="@(JS)" JsSourceExtensionPattern="\.js$" JsTargetExtension=".min.js" CssSourceFiles="@(CSS)" CssSourceExtensionPattern="\.css$" CssTargetExtension=".min.css" />

  </Target> 

 [코드 1]


 - UsingTask : UsingTask 엘리먼트는 해당 프로젝트에서 AjaxMinTask.dll을 사용 할 것을 나타낸다. UsingTask 말고 Import 엘리먼트를 사용할 수도 있다. AssemblyFile는 현재 솔류선위치에서 AjaxMinTask.dll의 위치까지 경로를 지정해 준다. 

 - Target : 빌드 타켓을 나타낸다. 이름에서 AfterBuild는 빌드이후에 수행할 것을 의미한다.

 - ItemGroup : ItemGroup 엘리먼트는 JS, CSS 엘리먼트를 하위에 두어 작업을 정의한다.  

 - JS : Include는 작업을 수행할 파일들을 정의 한다. "**\*.js"는 모든 파일을 지정함을 뜻한다. Exclude는 작업에서 제외될 사항을 정의하며, "**\*.min.js;Scripts\*.js"는 .min.js 파일로 되어 있는 것과 Scripts폴더 하위 .js파일은 제외 한다는 뜻이다. 

 - CSS : JS 설정과 동일하다. 

 - AjaxMin : 실행을 위한 속성 타켓들을 지정해 준다. 


 4. 프로젝트 로드


[그림 5 - 프로젝트 다시 로드]


 모든 설정이 끝났다면 프로젝트 파일에서 우클릭, 프로젝트 다시 로드 메뉴를 클리해서 프로젝트를 활성화 시킨다. 


 5. 프로젝트 빌드 


[그림 6 - 프로젝트 빌드]


 프로젝트를 빌드를 진행하다. 빌드가 끝나면 아래 그림과 같이 프로젝트에 포함되지 않은 모든 파일 표시를 해본다. 


[그림 7 - 모든 파일 표시]


 [그림 7]과 같이 모든 파일 표시를 클릭하게되면 프로젝트에 포함되지 못한 파일들이 보일 것이다. 정상적으로 빌드가 되어 AjaxMin이 이루어 졌다면 아래 그림과 같이 Res폴더의 css폴더와 js폴더에 .min파일이 생겼을 것이다. 


[그림 8 - min파일 생성]


해당 min파일들을 우클릭해서 프로젝트에 포함시키도록 한다. 


[그림 9 - 프로젝트 포함]



이상 "Microsoft Ajax Minifier"에 대한 사용 방법에 대해 간단하게 알아 보았다. 



ㅁ 참고 자료

https://thefrontend.wordpress.com/2012/02/02/minify-javascript-and-css-files-when-publishing-web-applications/


https://msdn.microsoft.com/en-us/library/t4w159bs.aspx



Posted by happydong
, |



출처 : http://html5experts.kr/archives/1516

 

css 투명처리 관련. 

 

opacity: 0.75;

filter: alpha(opacity = 75); // IE6,7

-ms-filter: “alpha (opacity=75)”; // IE8

-moz-opacity: 0.75; // Firefox 1.5

-khtml-opacity: 0.75; // Safari 1.x

zoom: 1; 

 

** IE에서는  filter, opacity속성을 사용하려면 width와 height등의 정보가 없으면 안됨. 이를 좀더 자연스럽게
처리하려면 zoom:1을 추가하면 좋음.

Posted by happydong
, |



CSS Sprite Image 도 이 작업을 도와주는 툴이 있다.

CSS Sprite Generator 웹 사이트로 가면 되는데 주소는 아래와 같다.


http://spritegen.website-performance.org/



사용법은 아래 링크를 참고 하자.

출처 : 
http://coronasdk.tistory.com/349


Posted by happydong
, |