'블로그'에 해당되는 글 11건

  1. 마크쿼리 SpiderWeb v3.0.0b 상단네비 고정하기 6
  2. 마크쿼리! 반응형 웹 블로그 스킨 적용하기! 2
  3. 티스토리에 Mixsh 위젯 달기!
  4. 한글2010과 티스토리 연동하기
  5. jQuery를 활용한 스크롤효과(up, down 클릭시 scroll 이동을 천천히)
  6. 티스토리 플로팅 메뉴 만들기(왼쪽 메뉴, 스크롤 메뉴) 1
  7. 티스토리 태그목록 3D형식으로 출력하기
  8. 티스토리 카테고리의 다른글 위치변경하기
  9. 티스토리 이미지에 그림자 효과내기
  10. SyntaxHighlighter(블로그 소스꾸미기, 코드 하이라이터)
  11. Color Scripter(블로그 소스꾸미기, 코드 하이라이터)

최근 기사 시험때문에 공부하느라 오랜만에 들어왔습니다.

마크쿼리의 SpiderWeb이 3.0.0b버전으로 오면서 상단 고정이풀리게 되었는데요.

이번엔 상단 메뉴고정과 글자크기, 인쇄쪽 탭도함께 상단메뉴로 고정시키는 방법에 대해 알아보겠습니다!

 

 

상단 메뉴를 고정하는 방법!

티스토리 관리자 페이지에서

body의 padding-top: 50px;를 감싸고 있는 /* */를 제거해 줍니다!

그후 .skeleton-nav에 다음과같이 포지션과 left,right, top을 0으로 넣어줍니다!

 

 .skeleton-nav {
  /* padding: 0 20px; */
  padding:0 20px;
  border-left:1px solid #ccc;
  border-right:1px solid #ccc;
  border-bottom:1px solid #ccc;
  background-color:#fff;
  z-index:1030;
  position: fixed;
left: 0;
right: 0;
top: 0;
} 

 

 

상단 메뉴 고정상태

 

이번엔 상단 메뉴 밑에있는 T + - 인쇄 버튼을 상단 고정메뉴위치로 끌어 올려보겠습니다!

일단 skin.html 에서 다음 소스를 삭제해 줍니다!

Ctrl + F 로 skeleton-mid-banner를 검색하신후 <div class="container skeleton-mid-banner"> 에서

마지막 주석문으로 .container skeleton-mid-banner까지 지워주시면 됩니다.

지우기전에 메모장 등에 복사하는게 좋습니다. 왜냐하면 지운 인쇄버튼을 상단에 넣어야하거든요..

 

 ㅎㅎ 없어졌죠??

 

이제 skin.html에 인쇄쪽 기능을 넣어주는 메뉴를 만들어 보겠습니다!

skin.html에서 </nav>윗부분에 삭제했던 기능들을 몇개 복사해서 넣어주면 됩니다.

저는그냥 위에서 삭제한 btn-group div의 안에 검색까지 넣어서 추가했습니다.

 

추가후 위치 조정을 해줘야하는데 저같은경우 style.css에 오른쪽 정렬을 추가해주었습니다.

 

 	.btn-group{
		float: right;
		margin-bottom: 3px;
	} 

 

 

적용후! 

 

모바일 에서도! 

 

이번엔 모바일에서 상단메뉴의 위치조정과 버튼 삽입에 대해 알아보겠습니다. 

 

Home버튼 안다실분은 div 추가안해주셔도 되요.. ^^

우선 skin.html에서 btn-group클래스 앞에 다음과 같이 div와 id나 class명을 지정해 줍니다! 저는 move-home이란 아이디로!

  

 

style.css 에서 move-home에 대한 추가!

이 과정은 데스크탑 모드에서 홈버튼을 숨겨주는 것입니다.

 #move-home{	
	display: none;
	padding: 10px 0 0 0;
	float: left;
	font-size: 15pt;
}
#move-home a{
	color: black;
} 

 

 

Ctrl + F로 @media screen and (max-width: 768px)를 찾고 속성값을 변경하면 되는데

@media screen and (max-width: 768px) 이 부분이 모바일 해상도에서의 CSS속성입니다.

 다음과 같이 CSS를 추가해 줍니다. move-home의 경우 안하실분은 추가안하시면 됩니다.

모바일상에서 .btn-group의 위치를 조정해 주고

 

Ctrl + F로 .nav-mobile을 검색해 320px ~ 768px 부분의 .nav클래스의 패딩값도 삭제해줍니다.

적용! 

 

홈 밑의 두줄같이 나오는게 보기싫으 시면 bottom값을 더주면 되는데 .btn-group

padding-bottom: 5px; 정도 주시면됩니다~

 

이상 포스팅을 마치겠습니다!

몇몇 분들께서 스킨 수정법에 대해 알려달라고 하셔서 끄적여 봤습니다.

길고.. 설명하기도 복잡할것 같아 이렇게 글남겼습니다. 혹시나 막히거나 하는부분 있으면 댓글 달아주세요! ^^

 

제 블로그는 처음부터! 마크쿼리의 Skeleton스킨을 적용하고 있었습니다.

이 스킨의 장점으로는 심플하면서도! 무엇보다 부트스트랩(bootstrap)을 기반으로한 반응형 웹 이라는 점입니다.

 

반응형 웹 이란?

페이지의 화면을 해상도의 크기에 맞게 자유자재로 변형하여 표현한 것입니다.

스마트폰을 예로들면 PC의 모니터와 스마트폰의 크기는 다릅니다.

모니터의 화면을 스마트폰에 그대로 나타내려면 스크롤이 길어지겠죠??

하지만 반응형 웹을 적용하면 스마트폰의 해상도에 맞게 메뉴나 본문의 내용을 조정하여 스크롤 없이 표현할 수 있습니다.

 

처음 블로그를 시작했을때 1.2.1버전 이었는데 오늘! 드디어 skeleton 3.0.0b버전을 적용했습니다!

 

공식 홈페이지 : http://markquery.com/

마크쿼리 커뮤니티 : http://markquery.com/community/

 

스킨 다운로드와 적용방법

우선 스킨을 받아야 겠죠?? http://markquery.com/에 접속하여 Download - Tistory 탭을 클릭! 

 

저는 Spider's Web을 사용하고 있습니다.

Doo Be Doo 의경우 사이드바를 없애고 본문 영역이 넓은 스킨입니다. 취향에 맞게 다운로드 해주세요!

다운로드후 과감히 압축을 풀어주고 티스토리의 관리자 화면에 들어갑니다!

 

스킨 - 스킨등록 버튼을 클릭합니다.

스킨을 등록하기전에 이전에 사용중인 스킨은 스킨저장버튼을 눌러 꼭 저장해두세요!

 

추가 버튼을 눌러 스킨이있는 폴더의 내용을 업로드 해주면되는데 grunt를 제외한 모든파일을 올려줍니다.

스킨폴더안에 폴더가 또있는경우 같이 지정해서 올리면 폴더의 내용은 안올라갈 수도 있기때문에

추가 버튼을 눌러 images폴더안에 들어가 images폴더안의 내용도 전부 올려줍니다!

 

추가 버튼을 눌러 스킨폴더안의 images폴더 내용 전부를 추가!

추가후 스킨명을 지정해주고 저장버튼을 누르면 됩니다.

 

저장후 보관함에서 마크쿼리 스킨을 적용버튼을 눌러 적용해주면 끝입니다!

 

v3.0.0을 적용후 v1.2.1과 비교해 봤습니다.

 

PC에서의 v1.2.1 

 

PC에서의 v3.0.0b 

3.0.0버전으로 오면서 상단 HOME쪽의 고정기능이 사라졌습니다. 전 플로팅메뉴가 좋아 다시 넣었습니다. 헤헤

또 상단 메뉴에 마우스오버시 회색으로 색상변경이 되며 드롭다운 메뉴도 만들어졌네요 ㅎㅎ

또한 기존의 글꼴과 글꼴크기 변경 위치가 변경되었고 클립모양의 아이콘을 클릭하게되면 인쇄가 가능합니다!

search바 위치도 카테고리 위로 변경되었네요 상단 이미지는 skin.html인데 title대신 이미지를 넣을수 있게끔 변경되었습니다.

 

모바일 v1.2.1 

 

모바일 v3.0.0b 

 

1.2.1의 경우 상단 홈메뉴가 고정메뉴 이며 ▤ 아이콘을 클릭하면 드롭다운 형식으로 카테고리와 search바가 나타납니다.

3.0.0b의 경우 상단에 ▤ 아이콘만 있으며 고정메뉴는 아닙니다. 아이콘을 클릭하면 드롭다운형태로 나타나게 되며

카테고리 메뉴가 존재할경우 V 아이콘을 눌러 하위메뉴를 드롭다운 형식으로 표현합니다.

 

저는 3.0.0b버전을 사용하면서 폰트와 검색 기능은 상단에 주고 상단메뉴를 고정 메뉴로 주었습니다.

또한 폰트와 검색이있던 태그를 없애 버리면서 최대한 본문의 내용이 많이 보이게끔 수정했죠 ㅎㅎ

상단 배너도 사이즈를 크게 줄였고요.. CSS를 잘알지못해 수정하는데 오랜시간이 걸렸지만..

크롬의 개발자도구(F12)로 하나씩 적용해가면서 하니 공부도 많이 되네요.. ^^

항상 티스토리 블로그를 운영하면서 반응형 스킨을 제공하지 않는점이 안타까웠는데

마크쿼리 스킨은 현재 무료로 배포중인데다 유료 못지않은 뛰어난 퍼포먼스를 자랑하는 반응형 웹 스킨인것 같습니다!

티스토리에 쓴글이 자동으로 다음 뷰에 등록되고 손가락 버튼의 추천하기 기능이 있듯이 믹시또한 회원가입을 하고

블로그를 등록하게 되면 자동으로 믹시에 글이등록되며 추천하기 기능을 구현할 수 있습니다.

이번엔 Mixsh에 블로그를 등록하고 위젯을 다는방법에 대해 알아보겠습니다!


믹시 홈페이지 : http://mixsh.com/


우선 회원가입을 하시고 마이믹시 - 블로그 관리 탭에 들어갑니다.

블로그 접속 주소에 본인의 블로그 주소를 입력하게 되면 블로그 인증 탭으로 이동하게 되며

다음과 같은 인증코드가 나타납니다.



인증코드를 복사후 본인의 블로그에 제목이나 내용에 인증코드를 붙여넣으시면 됩니다.

이 때 비공개로 하시면 인증이 되지않으니 공개로 하셔야만 합니다.


글을 올린후 다시 믹시 창에서 확인버튼을 누르면 본인의 블로그가 등록이 됩니다.

위치조정 없이 카테고리의 다른글 위에 위치하고싶으신 경우는 관리자 페이지의 플러그인 설정에서

믹시사용에 체크후 저장하면 바로 적용이 됩니다.

플러그 인에서 믹시 위젯 적용


적용 후 위치


위젯의 위치를 본문시작하는 위치나 카테고리의 다른글 다음에 표시하고 싶으신 경우 믹시의 마이믹시에서

블로그 도구Mixup 위젯 탭을 클릭해 위젯을 적용할 블로그블로그 서비스를 선택후 확인 버튼을 클릭!



확인 버튼을 누르면 다음과같이 설치코드가 생성됩니다. 소스 코드를 복사후



블로그의 관리자 화면의 HTML/CSS편집 버튼을 누른후 다음과같이 의 위나 아래에

추가하면 되는데 위에 넣을경우 본문이 시작하자마자 위젯이 나타나며 밑에 삽입하게 되면 본문 마지막 카테고리의

다른글 밑에 위치하게 됩니다.

본문 하단에 적용시



위젯에서는 추천하기 버튼과 믹시에 등록된 글의 제목, 조회수를 볼 수 있으며

위젯에 있는 제목을 누를경우 믹시에 등록된 글을 확인할 수 있습니다.

이상 Mixsh 위젯 다는방법에 대해 알아보았습니다. ^^

티스토리는 Blog API의 지원으로 MS office나 한글등의 프로그램에서 글을 작성하고

바로 블로그로 업로드를 할 수 있습니다. office나 한글을 활용하여 글을 작성하면 보다 빠르게 글을 작성할 수 있고

인터넷이 되지않는 곳에서는 글을 작성해두었다가 후에 빠르게 업로드 할 수 있어 외국에서 블로그를 운영하시는

분들에겐 매우 유용하지 않을까 생각합니다. 그중 이번엔 한글 2010을 활용하여 글을 작성하고 

티스토리와 연동하는 방법에 대해 알아보겠습니다. 


우선 티스토리의 관리자 페이지에서 다음과같이 BlogAPI를 사용으로 설정하고 확인버튼을 누릅니다.

한글2010의경우 인증키를 별도로 사용하지 않기때문에 API사용에만 체크합니다!


한글2010을 실행하고 도구 - 블로그의 계정선택을 누르고 위와같이 계정을 등록 해줍니다.

api주소는 본인의 블로그주소 뒤에 /api를 붙이고 티스토리 id비밀번호를 입력후 설정버튼을 누르시면 됩니다.

설정을 누르게 되면 한글2010과 연동할 블로그를 선택해 주시면 됩니다.


계정선택에서 블로그를 선택하고


글을 작성하고 게시물 위치(카테고리)를 지정후 등록버튼을 누르면 글이 업로드 됩니다.


괜찮나요?? ㅎㅎ


한글을 이용해 블로그에 글을 올리는 방법에 대해 알아보았습니다.

글꼴의 경우에는 정확하게 올라가는것 같습니다. 하지만 이미지의 경우 png파일로 업로드 되며

한글에서 가운대정렬로 글을 올려도 왼쪽 정렬로 글이 올라가는것 같습니다. 

태그입력은 불가능하고 글은 공개로 올라가기 때문에 발행하거나 태그를 지정하려면 티스토리에

들어와야 합니다. 한글과 블로그의 연동은 보유 중인 한글파일을 블로그에 업로드 하고 싶거나

인터넷이 되지않는곳에서 활용하면 매우 좋은 방법인것 같습니다.

jQuery란 자바스크립트 라이브러리의 하나로 다양한 브라우저에서 HTML문서조작과 이벤트처리를 간단하게

할 수 있는 API입니다. 이번엔 jQuery를 활용해서 제 블로그의 플로팅 메뉴처럼 UP, Down이미지를 

클릭시 바로 top, footer로 이동하는것이 아닌 천천히 스크롤을 따라 이동하는 효과를 만들어 보겠습니다.



소스

 

 




플로팅메뉴_스크롤.txt


$('body, html')에서 body를 적용하지 않으면 IE에서 먹히지 않아서 두개다 넣어줬습니다.

scrollTop의 경우 세로를 기준으로 나타내며

scrollLeft는 좌우를 나타냅니다. 플로팅 메뉴는 위아래로의 이동을 하기때문에 scrollTop을 사용했습니다.

0값의 경우 페이지의 첫시작이 0px이기때문에 최상단으로 이동합니다.

$(document).height();는 문서의 세로전체화면을 나타냅니다. 이값을 scrollHeight이라는 변수에 저장하고

#homedownscrollTop에 주었습니다. 따라서 Down이미지를 누를경우 문서의 마지막으로 이동 하게 됩니다.

그다음 숫자 800의 경우 0.8초동안에 이동 하겠다는것을 나타냅니다. 이 값을 수정하여 스크롤의 속도를

조절할 수 있겠죠?? 


이상 간단하게 위아래 스크롤 이동을 만들어봤습니다. 순수 자바스크립트로 작성했으면

소스가 많이 길어졌을텐데 jQuery를 활용하니 간단하고 소스 수정도 훨씬 쉽네요 ㅎㅎ


티스토리는 자유로운 HTML/CSS수정으로 다양한 효과와 기능을 추가 할 수 있습니다.

그 중 이번엔 화면상의 스크롤이 이동할때마다 좌측이나 우측에서 따라다니는 메뉴, 

플로팅 메뉴를 만들어 보겠습니다. 다음 사진은 제블로그에서 사용중인 플로팅 메뉴입니다.



소스

플로팅메뉴소스.txt


skin.html

 

저는  위에 플로팅메뉴를 위치했습니다.


style.css


#homeup{
    display:block;
    width: 37px;
    height: 30px;
    background-image:url(./images/arrow-up.png);        
    background-repeat:no-repeat;
}
#homeup:hover{    
    opacity: 0.4;
}
#homedown{
    display:block;
    width: 37px;
    height: 30px;
    background-image:url(./images/arrow-down.png);        
    background-repeat:no-repeat;
}
#homedown:hover{    
    opacity: 0.4;
}


아무곳에나 넣어주시면 되요


플로팅 메뉴 위치

저는 style값을 %로 주었습니다. 저처럼 top:30%, left:3%로 값을 줄시 어떠한 해상도에서도 위에서 30%지점,

왼쪽에서 3%지점에 플로팅메뉴가 위치하게됩니다.  적절한 값을 넣어주어 위치를 지정하시면 되고

%값 대신 px값을 넣어 고정하셔도 됩니다. 플로팅메뉴는 해상도의 영향을 받으므로 다양한 해상도에서

테스트 해보시길 바랍니다.


플로팅메뉴 스타일

border-radius의 경우 곡선 효과를 나타냅니다. 

15px는 왼쪽위, 오른쪽위, 왼쪽하단, 오른쪽하단 모두 15px의 곡선효과를 주는 것이고 만약 오른쪽위,

왼쪽 하단만 15px로 주고싶은경우 border-radius: 0 15px 0; 와 같은 형식으로 주면됩니다.


위로가기, 밑으로 가기 버튼

따라서 저같은경우는 <a name="top"></a>을 header부분에, <a name="bottom"></a>를 footer부분에 각각

넣어주었습니다. top의 경우는 <a href="#"></a>로 지정해줘도 최상위로 이동하므로  name="top"태그를

꼭 안넣어줘도 됩니다. 


a태그 스타일

a태그의 #top과 #footer의 경우 버튼을 누를시

<a name="top"></a>, <a name="footer"></a>가 있는 지점으로 이동하게 됩니다. top의경우는

a태그에 id값을 부여후 style.css에서 background-image를 주고 hover로 마우스커서 위치시 opacity로

불투명 효과를 주었습니다.


다음뷰 위젯

저는 다음뷰의 위젯이 구형인데, 신형위젯을 사용하시고 싶으신분은

 


 

 

 

위의 소스에서 본인의 블로그가 숫자값을 사용하는 경우를 추가해주시면 되고

entry/블로그 알아보기 이런 한글로 되어있을 경우 를 추가해 주시면됩니다.

의 경우 tistory.com의 형식으로 /를 빼고 입력해야 합니다.

본인의 개별글주소가 숫자인지, 문자인지 확인하는 방법은 관리자 메뉴의 기본 정보 탭에서

확인할 수 있습니다.


메뉴의 경우 다음뷰의 추천이 아닐까 생각해서 다음뷰 추천위젯버튼만 설명

하였습니다. 페이스북의경우 addthis에서 생성해준 소스를 붙여넣기 한것이고 rss의경우 한rss를 사용했습니다.

다른 메뉴를 추가하거나 수정하고 싶으신분은 <div></div>태그 안에 소스를 넣어 추가해주시면 됩니다.

플로팅 메뉴에 광고를 삽입할 경우 제재를 받을수도 있기 때문에 광고 삽입은 안하는것이 좋으며 

다양한 메뉴를 넣어 긴 플로팅 메뉴보단 간단한 공통메뉴만 보여주는것이 좋다고 생각합니다.

티스토리의 가장큰 장점은 CSS/HTML을 자유롭게 수정하여 다양하게 꾸밀수 있다는 점입니다. 

제 티스토리의 경우는 마크쿼리의 Skeleton스킨을 적용해 제 입맛에 맞게

편집했는데 이런 HTML/CSS를 수정하여 이번에는 태그목록을 3D형식으로, 마우스 커서를 위치했을시

회오리 효과처럼 도는방법에 대해 알려드리겠습니다.


우선 다음 tag_3d.zip 파일을 받아 압축을 푼후 swfobject, tagcloud를 

관리자 페이지의HTML/CSS에 파일업로드를 해줍니다.

tag_3d.zip




그후 관리자 페이지의 HTML/CSS 편집에서 skin.html에서

<s_random_tags>~</s_random_tags>를 지우고 다음 소스를 삽입합니다.

Ctrl + Fs_random_tags를 검색해서 찾으면 쉽게 찾을 수 있습니다.

 



tagsource.txt

최종 CSS 편집 화면

skeleton스킨의 기존 태그의 경우 한줄에 1태그씩 출력되기 때문에 태그 자리를 많이 차지하는데

심플 하면서도 입체감이 넘치네요. 이상 태그목록에 3D효과를 주는 방법에 대해 알아보았습니다!



티스토리를 운영하면 다음뷰나 믹시위젯, 애드센스의 광고 등은 카테고리의 다른글 밑에 출력됩니다.

관리탭에서는 카테고리 다른글의 개수나 색상변경만 가능하지 별다른 치환자도 있지 않아

위치를 변경할 수 없는데 소스를 추가하여 위치변경을 할 수 있습니다. 저의 경우는

카테고리의 다른 글 위에 각종 위젯을 위치하게 하고싶어 다음과 같이 위치를 변경하였습니다.


변경후 모습


소스에대해 알아보겠습니다.

<head>~</head>사이에 다음의 자바스크립트를 삽입합니다.




category.txt


변경후 사용하고 싶은 위치에 적용하면 됩니다. 저의 경우는  다음에 위젯,

위젯 다음의 부분에 카테고리 다른글 소스를 집어넣었습니다. 저와 비슷하게 하고 싶으신분은

다음과 같은 형식으로 소스를 삽입하시면 됩니다.


- 위젯소스 - - 카테고리 다른글 보기 -


이런 순 입니다.최상단에 표시하고 싶으신분은  위에 표시하시면 됩니다.


카테고리 다른글 보기 소스



darn.txt


이상 티스토리에서 카테고리의 다른 글 위치변경 하는 방법에 대해 알아보았습니다.

티스토리는 설치형 블로그로써 다양한 스킨의 제작과 

사용자 입맛에 맞게 HTML/CSS를 수정 할 수 있는 장점이 있습니다.

그 중 간단한 CSS수정으로 이미지에 다음과 같이 그림자 효과를 넣는 방법에 대해 알려드리겠습니다.

관리자 페이지의 HTML/CSS 편집 탭으로 들어가게 되면 style.css가 존재하는데 

다음과 같이 imageblock클래스에 box-shadow를 추가해주시면 됩니다.

상세 설명을 드리면

5px - 가로길이 양수인경우 오른쪽, -숫자인경우 왼쪽으로

5px - 세로 양수인경우 밑으로, -숫자인경우 위로

10px - 그림자 길이인데 숫자가 낮으면 그림자의 흐림효과가 적으면서 길이가 짧고

    높을수록 많이 흐려지고 거리도 멀어집니다. -숫자 값은 인식되지 않습니다.

rgba - 순서대로 r, g, b, 불투명도 입니다. 지금은 rgb값을 사용안하므로 0으로 지정하고 

    0.3의 불투명도 입니다. 값이 높을수록 그림자가 진해지며 -값은 적용되지 않습니다.


값을 수정하면서 마음에 드는 그림자 효과를 만들어보세요. ^^

앞서 리뷰한 Color Scripter와 비슷한 블로그 소스 꾸미는 툴입니다.

Color Scripter는 네이버에서도 사용이가능하지만 SyntaxHighlighter는 설치형 블로그에서 사용 가능합니다.

Color Scripter보다 더 화려하게 표현하는것이 가능하며 사용자 입맛에 맛게 수정 가능합니다.

다운로드 경로 : http://alexgorbatchev.com/SyntaxHighlighter/download/

다운로드 받으신후 압축을 푸시고 다음과 같이 관리자 페이지에서 Script와 Style폴더의 내용을 전부 업로드 해줍니다.


업로드가 완료되었으면 다시 HTML/CSS에서 <head>~</head>사이에 다음과 같은 코드를 입력해줍니다.

// 주석문은 적용하시려는 부분에 맞게 설정해주시면 됩니다.

Syntaxhighlighter_Script추가.txt

메모장 다운받으셔서 넣으셔도 됩니다.

사용법

글쓰기의 HTML체크후

다음과 같이 pre나 textarea를 사용해서 적용하시면 됩니다.




블로그에 HTML이나 CSS등 다양한 언어들의 소스를 꾸미고 올릴수 있는 Color Scripter입니다.

SyntaxHighlighter가 더 기능도 뛰어나지만 SyntaxHighlighter의경우 HTML코드에서 작성해야 하며

<pre>~</pre>나 <textarea>~</textarea>를 써서 작성해야 하므로 아무래도 글을 작성하면서 보기가 어렵더군요..

또한 Color Scripter의 장점으로는 웹에서도 실행이 가능한점과 포터블 버전도 지원이 되고 있는점입니다.

저는 크롬에 즐겨찾기 해놓고 탭하나 더띄워서 사용하는데 아주 명기라고 생각하네요 ㅎㅎ

주소 : http://prev.kr/apps/ColorScripter

저는주로 JAVA를 했기때문에 JAVA나 HTML, CSS를 주로 사용합니다. 설정탭에 들어가게되면

다음과같이 글꼴과 스타일속성을 사용자 정의로 지정해놓으면 색상설정도 가능합니다.

저는 이클립스를 주로써온터라 녹색 주석이 마음에들어 녹색으로 지정해놓고 사용합니다.

설정 저장이 그당시에만 적용이되서 다른사이트로 이동했다가 다시 Color Scripter를 들어가면 설정이 초기화 되는 단점이 존재하기도 합니다.


아무튼 코드를 입력후 복사버튼을 누르고 적당한 위치에 Ctrl + V를 하면 다음과 같이 나타나게 됩니다.

1
2
3
4
5
6
7
8
package{
  public class {
    public static void main(String arg[]) {
      
    }
  }
}