안드로이드에서 음성인식 기능을 구현하기 위해서는 구글의 Speech-To-Text(이하 STT)기능을 사용하면 됩니다. SST기능을 사용하는 방법은 2가지가 있습니다. 구글에서 지원하는 UI를 사용하거나, 나만의 커스텀 UI를 만드는 방법이 있습니다. 이 두가지 방법을 사용하는 예제는 인터넷에서 충분히 구할 수 있으나 이 두가지 방법은 제 맘에 드는 방법이 아니었습니다.

 저는 현재 음성녹음 시작과 함께 음성인식(STT)이 가능한 앱을 개발해야 했는데, 저 두가지 방법은 액티비티 전환이 필요하기 때문에 액티비티 전환 없이 음성인식을 하도록 만들어 보았습니다. 음성녹음의 경우 어렵지 않게 예제를 보고 구현할 수 있기 때문에 음성녹음 시작시 액티비티 전환 없이 음성인식을 하는 기능만 구현하면 되겠거니 생각해서 만들어 보았습니다.


액티비티(Activity)전환 없이 음성인식(구글 STT) 사용하기

 일단 프로젝트를 하나 생성한다. 그리고 가장 처음에 퍼미션부터 등록하도록 하겠다. 이 부분은 자칫하면 깜빡하고 넘어가기 쉽기 때문에(글쓴이 같은 경우..) 가장 먼저 등록을 해놓고 시작하겠다.

AndroidManifest.xml

<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.RECORD_AUDIO"/>

 소리를 입력받기 위해 RECORD_AUDIO 권한이 필요하고, 음성인식을 하기위해 인터넷에 접속해야 하기 떄문에 INTERNET 권한이 필요하다.

 음성 인식 시작을 위한 버튼하나정도는 필요할 것이다. 버튼 하나와 결과를 출력할 텍스트뷰를 만들어준다.

 그리고 액티비티가 최초 생성될 때 onCreate시 음성인식을 위한 준비를 한다.

 MainActivity.java

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		
		i = new Intent(RecognizerIntent.ACTION_RECOGNIZE_SPEECH);
		i.putExtra(RecognizerIntent.EXTRA_CALLING_PACKAGE, getPackageName());
		i.putExtra(RecognizerIntent.EXTRA_LANGUAGE, "ko-KR");
	}

i는 전역변수로 설정해주었다. (Intent i)
마지막 줄인 EXTRA_LANGUAGE는 인식할 언어를 설정해주는 코드이다. 글쓴이는 한글을 인식하였다. 영어를 인식하기 위해서는 "ko-KR" 대신 "en-US"를 써주면 된다.

("ko-KR"로 설정해도 abc라고 발음했을 경우 "에이비씨" 보다 "abc"로 나오는 경우가 많은것 같다.)

다음은 버튼 클릭시 작동하는 코드이다.

MainActivity.java

			mRecognizer = SpeechRecognizer.createSpeechRecognizer(this);
			mRecognizer.setRecognitionListener(listener);
			mRecognizer.startListening(i);

mRecognizer역시 전역변수로 설정 해 주었다. (SpeechRecognizer mRecognizer)
위의 두줄은 onCreate에 넣어줘도 상관은 없을것 같다. 마지막 줄은 음성인식 리스너를 불러오기 때문에 버튼 클릭시 실행하도록 한다.

다음은 리스너를 작성하자. 몇줄만 넣으면 자동완성으로 리스너 안의 메소드가 작성된다.

MainActivity.java

private RecognitionListener listener = new RecognitionListener() {
		
		@Override
		public void onRmsChanged(float rmsdB) {
			// TODO Auto-generated method stub
			
		}
		
		@Override
		public void onResults(Bundle results) {
			// TODO Auto-generated method stub
			
		}
		
		@Override
		public void onReadyForSpeech(Bundle params) {
			// TODO Auto-generated method stub
			
		}
		
		@Override
		public void onPartialResults(Bundle partialResults) {
			// TODO Auto-generated method stub
			
		}
		
		@Override
		public void onEvent(int eventType, Bundle params) {
			// TODO Auto-generated method stub
			
		}
		
		@Override
		public void onError(int error) {
			// TODO Auto-generated method stub
			
		}
		
		@Override
		public void onEndOfSpeech() {
			// TODO Auto-generated method stub
			
		}
		
		@Override
		public void onBufferReceived(byte[] buffer) {
			// TODO Auto-generated method stub
			
		}
		
		@Override
		public void onBeginningOfSpeech() {
			// TODO Auto-generated method stub
			
		}
	};

각 메소드의 이름만 보면 언제 동작할 것인지 이해할것이라 생각하고 음성인식 결과를 텍스트로 출력하는 부분만 작성하겠다. 

참고로 onRmsChanged 메소드는 입력받는 소리의 크기를 나타내주는데, 소리 크기값인 rmsDb는 디폴트 값이 -2 또는 -2.12 인거 같다. 한번 음성입력을 받고 일정 시간동안 입력이 없으면(rmsDb값이 -2 또는 -2.12일 때) 자동으로 종료되는듯 하다.

음성인식 결과는 onResult 메소드에서 얻을 수 있다.

MainActivity.java

@Override
public void onResults(Bundle results) {
	String key = "";
	key = SpeechRecognizer.RESULTS_RECOGNITION;
	ArrayList<String> mResult = results.getStringArrayList(key);
	String[] rs = new String[mResult.size()];
	mResult.toArray(rs);
	tv.setText(""+rs[0]);		
}

tv는 텍스트뷰이다. tv역시 전역변수로 설정하였다.(TextView tv)
results라는 결과값을 mResult라는 ArrayList에 저장한다. 
rs라는 String배열을 만들어 mResult의 크기만큼 배열을 초기화 하고 그 rs라는 배열에 mResult값을 넣는다.
for루프를 돌려서 인식한 결과값을 모두 볼 수도 있고, rs[0]으로 첫번째 나온 값만 받을수 있다.

액티비티 전환없이 음성인식을해서 결과를 받아왔다. 음성인식 시작코드만 음성녹음 시작시에 실행하도록 하면 음성녹음과 동시에 음성인식을 할 수 있을것 같다. 추가적으로 입맛에 맞게 코드 수정도 자유롭게 할 수 있을것 같다.



제가 설명이 부족한 부분이 있을텐데 댓글로 질문해주시면 감사하겠습니다.


 요즘 많은 어플들이 뒤로가기 버튼을 두번 눌러 앱을 종료시킨다. 
 종료하시겠습니까? 라는 확인창이 뜨고 확인을 눌러야 되는 번거로움이 없고, 잘못 종료버튼을 눌렀을 경우에도 토스트 알림창만 뜰뿐 별다른 방해요소가 없어서 참 좋은것 같다. 요즘 대부분의 앱이 이러한 종료 방식을 선택하고 있기때문에 한번 구현을 해보자.



 구현방법은 간단하다 뒤로가기 버튼 클릭시 현재시간을 저장하며 토스트 알림창을 띄워주고 한번더 눌렀을때 일정시간(예를들면 2초)가 지났는지 확인하고 일정시간이 지나지 않았을 경우 종료, 지났을 경우 알림창을 다시 띄워주면 된다.

0.    시간을 저장하는 변수(t) = 0;
1.    뒤로가기 버튼 (처음)클릭시 시간을 저장하는 변수(t) + 2000(2초)가 현재 시간보다 작다.
2-1. 알림창을 띄운다.('뒤로'버튼을 한번 더 누르시면 종료됩니다.)
2-2. 시간을 저장하는 변수(t)에 현재 시간을 저장한다.
3.    뒤로가기 버튼을 한번더 클릭
4-1. 현재 시간이 변수t + 2000보다 작으면 앱 종료
4-2. 현재 시간이 변수t + 2000보다 크면 t에 현재시간을 저장하고 알림창을 띄운다.


글로 보면 어렵더라도 소스를 보면 아마 바로 이해가 갈 것이다.

먼저 뒤로가기 버튼의 이벤트를 담당하는 클래스를 하나 만들었다.

BackPressCloseHandler.java

import android.app.Activity;
import android.widget.Toast;

public class BackPressCloseHandler {

	private long backKeyPressedTime = 0;
	private Toast toast;

	private Activity activity;

	public BackPressCloseHandler(Activity context) {
		this.activity = context;
	}

	public void onBackPressed() {
		if (System.currentTimeMillis() > backKeyPressedTime + 2000) {
			backKeyPressedTime = System.currentTimeMillis();
			showGuide();
			return;
		}
		if (System.currentTimeMillis() <= backKeyPressedTime + 2000) {
			activity.finish();
			toast.cancel();
		}
	}

	public void showGuide() {
		toast = Toast.makeText(activity,
				"\'뒤로\'버튼을 한번 더 누르시면 종료됩니다.", Toast.LENGTH_SHORT);
		toast.show();
	}
}


다음은 이 기능을 사용하려는 액티비티에서 넣어줘야 되는 소스이다. 사용하려는 액티비티에 onBackPressed()메소드를 생성하고 BackPressCloseHandler 클래스의 onBackPressed()메소드를 불러와주면 된다.

MainActivity.java

public class MainActivity extends Activity {

	private BackPressCloseHandler backPressCloseHandler;
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		
		backPressCloseHandler = new BackPressCloseHandler(this);
	}

	@Override
	public void onBackPressed() {
		//super.onBackPressed();
		backPressCloseHandler.onBackPressed();
	}
}

 안드로이드 블루투스통신 예제는 인터넷에 많이 있을 것이다. 예를들면 블루투스통신 채팅 같은 예제.. 그러나 예제를 수정하여 블루투스 통신을 구현하려고 할 때 연결이 잘 안될수도 있다. 블루투스 프로토콜 종류가 많이 있기 때문에 프로토콜이 맞지 않아서 생기는 원인같다. 아래 리스트에서 사용하는 블루투스 통신의 성격에 맞는 프로토콜을 찾아서 사용하도록 하자.

 블루투스 통신을 찾다보면 BluetoothChat이라는 예제 프로젝트를 볼 수 있는데 이 예제는 스마트폰끼리 채팅하는 예제이기 때문에 다른 블루투스 기기와 연결이 안될것이다. BluetoothChatService.java에 들어가서 UUID를 바꿔주면 아마 될 것이다. 

private static final UUID MY_UUID = UUID.fromString("00001101-0000-1000-8000-00805F9B34FB");

MY_UUID부분을 아래 UUID 리스트에서 찾아서 프로토콜에 맞게 변경해주자!

블루투스 프로토콜 UUID 리스트

BASE UUID
SDP_PROTOCOL_UUID
UDP_PROTOCOL_UUID
RFCOMM_PROTOCOL_UUID
TCP_PROTOCOL_UUID
TCSBIN_PROTOCOL_UUID
TCSAT_PROTOCOL_UUID
OBEX_PROTOCOL_UUID
IP_PROTOCOL_UUID
FTP_PROTOCOL_UUID
HTTP_PROTOCOL_UUID
WSP_PROTOCOL_UUID
BNEP_PROTOCOL_UUID
UPNP_PROTOCOL_UUID
HID_PROTOCOL_UUID
HCCC_PROTOCOL_UUID
HCDC_PROTOCOL_UUID
HN_PROTOCOL_UUID
AVCTP_PROTOCOL_UUID
AVDTP_PROTOCOL_UUID
CMPT_PROTOCOL_UUID
UDI_C_PLANE_PROTOCOL_UUID
L2CAP_PROTOCOL_UUID

= '{00000000-0000-1000-8000-00805F9B34FB}';
= '{00000001-0000-1000-8000-00805F9B34FB}';
= '{00000002-0000-1000-8000-00805F9B34FB}';
= '{00000003-0000-1000-8000-00805F9B34FB}';
= '{00000004-0000-1000-8000-00805F9B34FB}';
= '{00000005-0000-1000-8000-00805F9B34FB}';
= '{00000006-0000-1000-8000-00805F9B34FB}';
= '{00000008-0000-1000-8000-00805F9B34FB}';
= '{00000009-0000-1000-8000-00805F9B34FB}';
= '{0000000A-0000-1000-8000-00805F9B34FB}';
= '{0000000C-0000-1000-8000-00805F9B34FB}';
= '{0000000E-0000-1000-8000-00805F9B34FB}';
= '{0000000F-0000-1000-8000-00805F9B34FB}';
= '{00000010-0000-1000-8000-00805F9B34FB}';
= '{00000011-0000-1000-8000-00805F9B34FB}';
= '{00000012-0000-1000-8000-00805F9B34FB}';
= '{00000014-0000-1000-8000-00805F9B34FB}';
= '{00000016-0000-1000-8000-00805F9B34FB}';
= '{00000017-0000-1000-8000-00805F9B34FB}';
= '{00000019-0000-1000-8000-00805F9B34FB}';
= '{0000001B-0000-1000-8000-00805F9B34FB}';
= '{0000001D-0000-1000-8000-00805F9B34FB}';
= '{00000100-0000-1000-8000-00805F9B34FB}'; 

ServiceDiscoveryServerServiceClassID_UUID
BrowseGroupDescriptorServiceClassID_UUID
PublicBrowseGroupServiceClass_UUID
SerialPortServiceClass_UUID
LANAccessUsingPPPServiceClass_UUID
DialupNetworkingServiceClass_UUID
IrMCSyncServiceClass_UUID
OBEXObjectPushServiceClass_UUID
OBEXFileTransferServiceClass_UUID
IrMCSyncCommandServiceClass_UUID
HeadsetServiceClass_UUID
CordlessTelephonyServiceClass_UUID
AudioSourceServiceClass_UUID
AudioSinkServiceClass_UUID
AVRemoteControlTargetServiceClass_UUID
AdvancedAudioDistributionServiceClass_UUID
AVRemoteControlServiceClass_UUID
VideoConferencingServiceClass_UUID
IntercomServiceClass_UUID
FaxServiceClass_UUID
HeadsetAudioGatewayServiceClass_UUID
WAPServiceClass_UUID
WAPClientServiceClass_UUID
PANUServiceClass_UUID
NAPServiceClass_UUID
GNServiceClass_UUID
DirectPrintingServiceClass_UUID
ReferencePrintingServiceClass_UUID
ImagingServiceClass_UUID
ImagingResponderServiceClass_UUID
ImagingAutomaticArchiveServiceClass_UUID
ImagingReferenceObjectsServiceClass_UUID
HandsfreeServiceClass_UUID
HandsfreeAudioGatewayServiceClass_UUID

= '{00001000-0000-1000-8000-00805F9B34FB}';
= '{00001001-0000-1000-8000-00805F9B34FB}';
= '{00001002-0000-1000-8000-00805F9B34FB}';
= '{00001101-0000-1000-8000-00805F9B34FB}';
= '{00001102-0000-1000-8000-00805F9B34FB}';
= '{00001103-0000-1000-8000-00805F9B34FB}';
= '{00001104-0000-1000-8000-00805F9B34FB}';
= '{00001105-0000-1000-8000-00805F9B34FB}';
= '{00001106-0000-1000-8000-00805F9B34FB}';
= '{00001107-0000-1000-8000-00805F9B34FB}';
= '{00001108-0000-1000-8000-00805F9B34FB}';
= '{00001109-0000-1000-8000-00805F9B34FB}';
= '{0000110A-0000-1000-8000-00805F9B34FB}';
= '{0000110B-0000-1000-8000-00805F9B34FB}';
= '{0000110C-0000-1000-8000-00805F9B34FB}';
= '{0000110D-0000-1000-8000-00805F9B34FB}';
= '{0000110E-0000-1000-8000-00805F9B34FB}';
= '{0000110F-0000-1000-8000-00805F9B34FB}';
= '{00001110-0000-1000-8000-00805F9B34FB}';
= '{00001111-0000-1000-8000-00805F9B34FB}';
= '{00001112-0000-1000-8000-00805F9B34FB}';
= '{00001113-0000-1000-8000-00805F9B34FB}';
= '{00001114-0000-1000-8000-00805F9B34FB}';
= '{00001115-0000-1000-8000-00805F9B34FB}';
= '{00001116-0000-1000-8000-00805F9B34FB}';
= '{00001117-0000-1000-8000-00805F9B34FB}';
= '{00001118-0000-1000-8000-00805F9B34FB}';
= '{00001119-0000-1000-8000-00805F9B34FB}';
= '{0000111A-0000-1000-8000-00805F9B34FB}';
= '{0000111B-0000-1000-8000-00805F9B34FB}';
= '{0000111C-0000-1000-8000-00805F9B34FB}';
= '{0000111D-0000-1000-8000-00805F9B34FB}';
= '{0000111E-0000-1000-8000-00805F9B34FB}';
= '{0000111F-0000-1000-8000-00805F9B34FB}';

DirectPrintingReferenceObjectsServiceClass_UUID
ReflectedUIServiceClass_UUID
BasicPringingServiceClass_UUID
PrintingStatusServiceClass_UUID
HumanInterfaceDeviceServiceClass_UUID
HardcopyCableReplacementServiceClass_UUID
HCRPrintServiceClass_UUID
HCRScanServiceClass_UUID
CommonISDNAccessServiceClass_UUID
VideoConferencingGWServiceClass_UUID
UDIMTServiceClass_UUID
UDITAServiceClass_UUID
AudioVideoServiceClass_UUID
PnPInformationServiceClass_UUID
GenericNetworkingServiceClass_UUID
GenericFileTransferServiceClass_UUID
GenericAudioServiceClass_UUID
GenericAudioServiceClass_UUID
GenericTelephonyServiceClass_UUID
UPnPServiceClass_UUID
UPnPIpServiceClass_UUID
ESdpUPnPIpPanServiceClass_UUID
ESdpUPnPIpLapServiceClass_UUID
EdpUPnpIpL2CAPServiceClass_UUID

= '{00001120-0000-1000-8000-00805F9B34FB}';
= '{00001121-0000-1000-8000-00805F9B34FB}';
= '{00001122-0000-1000-8000-00805F9B34FB}';
= '{00001123-0000-1000-8000-00805F9B34FB}';
= '{00001124-0000-1000-8000-00805F9B34FB}';
= '{00001125-0000-1000-8000-00805F9B34FB}';
= '{00001126-0000-1000-8000-00805F9B34FB}';
= '{00001127-0000-1000-8000-00805F9B34FB}';
= '{00001128-0000-1000-8000-00805F9B34FB}';
= '{00001129-0000-1000-8000-00805F9B34FB}';
= '{0000112A-0000-1000-8000-00805F9B34FB}';
= '{0000112B-0000-1000-8000-00805F9B34FB}';
= '{0000112C-0000-1000-8000-00805F9B34FB}';
= '{00001200-0000-1000-8000-00805F9B34FB}';
= '{00001201-0000-1000-8000-00805F9B34FB}';
= '{00001202-0000-1000-8000-00805F9B34FB}';
= '{00001203-0000-1000-8000-00805F9B34FB}';
= '{00001203-0000-1000-8000-00805F9B34FB}';
= '{00001204-0000-1000-8000-00805F9B34FB}';
= '{00001205-0000-1000-8000-00805F9B34FB}';
= '{00001206-0000-1000-8000-00805F9B34FB}';
= '{00001300-0000-1000-8000-00805F9B34FB}';
= '{00001301-0000-1000-8000-00805F9B34FB}';
= '{00001302-0000-1000-8000-00805F9B34FB}'; 


 나는 디자이너가 아니다. 하지만 간간히 디자인에 신경을 써야할 경우가 생긴다. PPT를 만들거나 간단한 APP을 만들때 약간의 디자인이 필요하다! 하지만 내가 만든 디자인은 내가 봤을때 만족할지 몰라도 다른사람이 보면 완전 꽝이다 ㅠㅠ 나의 이 디자인 실력을 보완해주기 위해 친구가 색상조합 사이트를 추천해줬다. 디자인은 몰라도.. 색상 조합은 이제 완벽하게 할 수 있을것 같다!! 단순히 보색관계를 알려주는 것부터 시작해서 여러가지를 제공해준다. 색상 조합은 이제 고민 끝!!


바로가기 -> Color Scheme Designer



 단일색 부터 4가지 색상조합까지 선택해서 볼 수 있다.


 왼쪽 색상표에서 마우스로 원하는 색상 영역을 선택하면 해당하는 색상의 RGB 비율과 색상코드를 볼 수 있다.



 오른쪽에는 내가 색상표에서 선택했던 색의 주변색과 그 외 색상조합(그림은 보색관계 선택 화면)을 보여준다. 색상위에 마우스 커서를 올리면 색상코드를 보여준다. 
 Light page example메뉴와 Dark page example메뉴를 누르면 각각 선택한 색상중 밝은 색상/어두운 색상으로 이루어진 샘플 홈페이지를 보여준다. 


 이 정도로만 사용할 줄 알아도 어디서 디자인 못한다고 욕먹지는 않을것 같다.. 특히 PPT 제작시 어중간한 색조합으로 보기흉한 PPT를 만드는 일은 없을 것 같다.



블루투스(Bluetooth)통신 - 시작, 블루투스 활성화


위의 링크에 다시 작성 하였습니다.

클릭하면 크게 보실 수 있습니다.


 안드로이드 앱을 만들기 전에 가장 기본적으로 이해하고 넘어가야 되는 것이 액티비티의 생명주기이다. 생명주기를 이해하지 못하면 좋은 앱을 만들수 없다. 각 기능이 언제 실행될지 적당한 위치에 코드를 삽입할 수 없기 때문에 앱이 이상하게 작동되는 경우가 생기기 때문이다. 그렇기 때문에 액티비티 생명주기에 대해서 자세히 알아보도록 하겠다.


Activity의 4가지 주요 상태

Activity에는 크게 4가지 주요 상태가 있다.

1. Active/Running 상태

 MainActivity가 화면의 가장 앞(foreground)에 있어서 사용자가 직접 볼 수 있고, focus를 가지고 있는 상태다.
 MainActivity에서 입/출력이 가능한 상태


2. Pause 상태

 활동중인 MainActivity가 화면의 foreground를 새로 점유한 SubActivity에게 포커스를 잃었지만 아직은 MainActivity가 보이는 상태이다.
 SubActivirt가 화면 전체를 사용하지 않거나, 반투명하게 구현 되어 있을 때


3. Stop 상태

 활동중인 MainActivity가 화면 전체를 채우는 SubActivity에게 foreground를 점유당한 상태


4. Killed (Dead) 상태

 MainActivity가 생성되지 않았거나, 생성 후 소멸된 상태


상태 변화에 대한 핸들러 메소드








 개발관련 블로그를 돌아다니다 보면 아래와 같이 이쁘게 소스코드가 있는 블로그들이 있다.

 사실 이러한 기능때문에 티스토리 블로그를 많이 쓰는게 아닐까 생각이 든다. 

 약간 번거롭긴 하지만 블로그를 이쁘게 꾸미기 위해서 소스코드 넣는 기능을 사용해보자!

소스코드를 그냥 붙여 넣는 것보다 읽기 편하고 보기에도 좋다.


1. SyntaxHighlighter파일 다운받기

 아래 홈페이지에 접속하여 현재(2013.12.19) 최신버전인 syntaxhighlighter_3.0.83.zip 파일을 다운받는다.
 → 다운로드 하기


2. 다운받은 파일을 임의의 폴더에 압축해제하기

 압축을 해제하면 scripts 폴더와 styles 폴더가 있을것이다.


3. 티스토리 관리자 페이지에 접속

 관리자 페이지 좌측메뉴 -> HTML/CSS편집 -> 파일업로드


4. 필요한 파일을 추가하기

 추가 버튼을 눌러 파일을 추가한다.
 scripts 폴더shCore.js 파일, styles 폴더shCore.css, shThemeDefault.css 파일은 기본적으로 꼭 추가해줘야 하는 파일이다.

 그리고 scripts폴더에서 모든 파일을 추가해도 상관은 없지만, 주로 사용하는 언어에 대한 파일만 추가해주도록 한다.
 shBrush뒤에 붙은 이름을 보고 필요한 언어만 추가를 해준다.

Ex) shBrushJava -> java언어
      shBrushJScript -> javascript언어

 styles 폴더에 있는 css파일들은 소스코드 창의 테마를 바꿀때 사용하는듯 한데, 테마를 바꾸고 싶다면 나중에 추가해서 테마를 변경해 줄수 있다.


5. 메뉴에 적용하기

 올려진 파일들을 skin.html에 적용해야한다.
 상단의 HTML/CSS 버튼을 누른 후 skin.html에서 </head> 위 줄에 코드를 추가하여야 한다. 내가 추가한 파일에 대한 코드만 추가하면 된다.

 아래의 소스중 필요한 소스만 골라서 넣는다. 다 넣어도 상관은 없다.

<script src="./images/shCore.js" type="text/javascript"></script>

<script src="./images/shBrushBash.js" type="text/javascript"></script>

<script src="./images/shBrushCpp.js" type="text/javascript"></script>

<script src="./images/shBrushCSharp.js" type="text/javascript"></script>

<script src="./images/shBrushCss.js" type="text/javascript"></script>

<script src="./images/shBrushDelphi.js" type="text/javascript"></script>

<script src="./images/shBrushDiff.js" type="text/javascript"></script>

<script src="./images/shBrushGroovy.js" type="text/javascript"></script>

<script src="./images/shBrushJava.js" type="text/javascript"></script>

<script src="./images/shBrushJScript.js" type="text/javascript"></script>

<script src="./images/shBrushPhp.js" type="text/javascript"></script>

<script src="./images/shBrushPlain.js" type="text/javascript"></script>

<script src="./images/shBrushPython.js" type="text/javascript"></script>

<script src="./images/shBrushRuby.js" type="text/javascript"></script>

<script src="./images/shBrushScala.js" type="text/javascript"></script>

<script src="./images/shBrushSql.js" type="text/javascript"></script>

<script src="./images/shBrushVb.js" type="text/javascript"></script>

<script src="./images/shBrushXml.js" type="text/javascript"></script>

<link href="./images/shCore.css" type="text/css" rel="stylesheet"><link href="./images/shThemeDefault.css" type="text/css" rel="stylesheet">

<script type="text/javascript"> SyntaxHighlighter.config.clipboardSwf = './images/clipboard.swf'; SyntaxHighlighter.all();</script>


6. 저장후 완료?? -> 에러

 저장을 누르면 끝난다!! 이제 한번 사용해보도록 하자
 글쓰기에서 HTML을 체크하고 내용을 적으면 된다.
 C언어 소스를 올려보았다. 사용법은 다음과 같다.

 <pre class ="brush:사용할 언어">
 소스코드
 </pre>



#include 

void main() {
	printf("소스 코드 입력 완료! \n");
}

??? 
맨 끝에 </stdio.h> 라는게 붙었다.. 왜일까?

HTML에서 '<'기호가 충돌하기 때문에 나온다고 한다 해결하기 위해서는 < 대신 &lt; > 대신 &gt;를 입력해준다.

<pre class="brush:c"> #include &lt;stdio.h&gt; void main() { printf("소스 코드 입력 완료! \n"); } </pre>


#include <stdio.h>

void main() {
	printf("소스 코드 입력 완료! \n");
}

 </stdio.h>가 사라졌다!! 

번거로운 작업이긴 하지만.. 이제 소스를 편하게 볼 수 있다.


 간단하게 이미지를 편집하고 싶은데 포토샵이 안깔려 있을경우!! 이 웹사이트에서 이미지를 편집할 수 있다. 

 작업도중 간단히 이미지 크기를 조절하거나, 이미지를 자르고 싶을때 사용하면 정말 편하다. 

 전문적으로 디자인을 하는 사람이 아니라면 포토샵이 필요 없을 정도로 잘 구현을 해놓은 웹사이트다.

 사용법은 포토샵과 동일한것 같다.

바로가기 -> http://pixlr.com/editor/

+ Recent posts