Seong-Jung's Blog

반응형

크롬 테마 만들기 방법. 자세히~ 알려드릴께요. 저만 따라하시면 참 쉬우실 거에요 ^^


★ 먼저, 크롬 테마를 만들기 위해서는 구글 크롬 테마 생성 사이트로 이동합니다.
http://www.themebeta.com/chrome-theme-creator-online.html

 - Basic 탭 : 테마 배경 이미지에 대한 처리를 할 수 있는 탭

 - Images 탭 : 이미지를 업로드할 수 있는 영역에 대한 설정 탭

 - Colors 탭 : 글씨색을 설정할 수 있는 영역에 대한 설정 탭

 - Pack 탭 : 설정이 완료된 크롬 테마에 대한 packaging 탭


< Basic 탭 설명 >

 - Theme Name : 테마명을 입력합니다.

 - 1. Upload an Image : 배경이미지를 업로드합니다.

 - 2. Generate Colors : 테마배경에 어울리도록 색상을 설정합니다.

 - 3. Pack and Install : 설정한 테마를 패킹하고 설치하도록 합니다.


< Images 탭 설명 >

 - NTP Background : 바탕 색상 및 이미지 설정


 - Frame : 상단 프레임 색상 및 이미지 설정


 - Toolbar : 툴바 색상 및 이미지 설정


 - Tab Background : 탭 배경 색상 및 이미지설정


 - Frame Overlay : 프레임 오버레이 이미지 설정


 - NTP Attribution : 우측 하단 이미지 설정


< Colors 탭 설명 >

 - Status Bar : 이미지 다운로드, 링크 등의 설정바에 대한 글씨색 설정


 - Tab Text : 탭의 글씨색 설정


 - Background Tab Text : 비활성화된 탭의 글씨색 설정


 - Bookmark Text : 북마크 영역의 글씨색 설정


 - NTP Text : 어플리케이션 영역의 글씨색 설정


 - Buttons : 버튼의 색상 설정


 - Control Buttons : 컨트롤 버튼 색상 설정


< Pack 탭 설명 >

 - Pack and Install Theme : 테마 패키징 및 설치

 - Pack and Download Theme : 테마 패키징 및 .crx 확장자를 가진 테마 설정파일을 저장한 파일을 다운로드

 - Pack and Download Zip File : 테마 패키징 및 .crx 확장자를 가진 테마 설정파일을 Zip 파일로 압축한 파일을 다운로드

 - Save Screenshot : 설정한 테마를 스크린 샷으로 저장


< 하단 Background 설명 >

[left/center/right] / [top/bottom] / [no-repeat/repat/repeat-x/repeat-y] / [normal-size/fill-screen/fit-to-screen]

 - left : 이미지를 왼쪽으로 정렬

 - center : 이미지를 가운데로 정렬

 - right : 이미지를 오른쪽으로 정렬

 - top : 이미지를 상단에 배치

 - bottom : 이미지를 하단에 배치

 - no-repeat : 이미지 반복하지 않음

 - repeat : 이미지 반복

 - repeat-x : 이미지를 가로로 반복

 - repeat-y : 이미지를 세로로 반복

 - normal-size : 이미지 원본 사이즈로 설정

 - fill-screen : 이미지 화면에 꽉 차도록 설정

 - fit-to-screen : 이미지를 화면에 맞추어 설정(이미지 크기에 따라 화면에 공백이 생길 수 있음)

반응형

반응형

Aptana Studio 3 설치 방법을 알아보도록 하겠습니다.


Aptana Studio는 오픈소스 기반의 IDE 웹 기반 툴입니다. 무료이며, 이클립스 기반입니다. 또한, 이클립스의 플러그인으로 추가하여 사용할 수도 있습니다. 쉽고 빠르게 웹기반 프로젝트를 구축할 수 있도록 도와줍니다. 또한, 작은 웹서버를 갖추고 있어, 따로 TOMCAT 등의 웹컨테이너를 구축하지 않아도 쉽게 웹프로젝트를 실행할 수 있습니다.


1. http://www.aptana.com/접속하여 PRODUCTS > DOWNLOADS > DOWNLOAD APTANA STUDIO 3 버튼 클릭하여 다운로드


2. 다운로드 받은 파일을 실행 -> Next 클릭


3. 라이선스에 동의할 경우, I Agree 버튼 클릭


4. 설치 경로 설정 후, Next 버튼 클릭


5. 스타트 메뉴에 추가할 이름을 설정(변경 가능) 후, Next 버튼 클릭


6. 지원하는 파일 기본 확장자 선택(이것을 체크할 경우 체크한 확장자는 Aptana Studio로 실행하도록 설정하게 됩니다) -> Next 버튼 클릭 


7. 이제부터 Aptana Studio 3를 설치한다는 문구입니다. 설치를 시작하려면 Install 버튼을 클릭해 주세요.


8. 설치 진행중...


9. 설치를 완료하였습니다. Next 버튼을 클릭해주세요.


10. Aptana Studio 3의 설치를 마칩니다. Close 버튼을 클릭해 주세요.


11. Aptana Studio 3 실행중...


12. workspace를 설정합니다. workspace는 실제 소스가 관리되는 저장공간입니다. 경로 선택 후, OK 버튼을 클릭해 주세요.


13. Aptana Studio 3를 실행한 화면입니다.


14. 새로운 웹프로젝트를 생성해 보겠습니다. FIle -> New -> Web Project를 선택합니다.


15. 프로젝트 템플릿을 선택하는데, 테스트 용도이므로 Default Project를 선택합니다. 템플릿 선택 후, Next 버튼을 클릭합니다.


16. 프로젝트명을 입력합니다. Finish 버튼을 클릭하면 프로젝트가 생성됩니다.


17. 생성된 프로젝트입니다.


18. 이제 생성된 프로젝트에 html파일을 추가하여 실제적으로 실행이 되는지 확인해보겠습니다 ^^ 프로젝트 선택 후 마우스 우클릭 -> New From Template -> HTML -> HTML 5 Template을 선택합니다. HTML5 템플릿을 선택한 이유는, 가장 간단한 템플릿 형태이기 때문에 선택하였습니다. 다른 이유~~ 아~~~무 것도 없어요.


19. 파일명을 입력하고 Finish 버튼을 클릭합니다.


20. 테스트 할 내용을 입력합니다. 최대한 간단~하게..


21. Run -> Run 또는 Ctrl + F11 단축키를 이용하여 테스트 화면을 실행해 봅니다.






22. 정상적으로 실행된 테스트 페이지입니다.

이상으로 Aptana Studio 3 설치 및 테스트 하는 방법까지 설명을 했습니다. 앞으로는 Aptana Studio를 이용해 쉽고 빠르게 개발하실 수 있겠죠? 오늘 밤도 즐프 하세요~~ ^^

반응형