Editus(에디투스) 프론트앤드 에디터의 숨은 기능. Part 3.

인터넷과 웹 정보

43Gear의 Editus(에디투스) 프론트앤드 에디터 그 세번째 시간으로 “숨은 기능”을 소개하는 블로그 포스트를 작성하려 한다.

1. Editus(에디투스)는, 글 편집에 있어서 먼저 원하는 글, 문장을 마우스로 표시해야 한다.

< 그림 1.마우스로 글을 쓸 부분을 표시한 이미지. >

위 “그림 1″을 살펴보자. 지난 “Editus(에디투스) 프론트앤드 에디터 기능을 알아보자. Part1” 중 ”3. 이제 자유롭게 블로그 포스트 작성을 하면 된다.“의 내용에서 사용한 그림과 동일한 그림이다. 그 내용을 짧게 조금 소개하면 “마우스로 색인한 “Once upon a time…” 부터 블로그 포스트 작성을 시작하면 되겠다” 이다…

Editus(에디투스)는, 작성한 글자 또는 문장을 Bold, Underline, Italic으로 처리하고 싶을때, 아니면 글자 또는 문장의 색상을 바꾸고 싶을때, 그도 아니면 글자 또는 문장에 링크(Link)를 연결하고 싶을때… 어떠한 경우라도, 자신의 블로그 포스트 즉 글의 편집에 있어서 편집할 글, 글자 또는 문장을 먼저 지정한 후 원하는 기능을 선택하여 편집해야 한다. 위 그림 1과 같이 말이다.

Editus는 글의 편집을 할때 편집을 원하는 글, 글자 또는 문장을 먼저 지정한다. 위 그림 1과 같이 말이다.

2. Editus(에디투스) 에디터 살펴보기.

< 그림 2. Editus 에디터 기능. >

• 1. 사진, 이미지, 따옴표(Quote) 삽입: 앞 선 두번의 “Editus”에 관한 블로그 포스팅을 통해서 사진, 이미지, 따옴표(Quote) 삽입 방법은 충분히 설명이 되었다.
• 2. 글자 또는 문장 색상 지정: 먼저 원하는 색상을 지정한다. > 그런 다음, 색상을 바꾸고 싶은 글자 또는 문장을 마우스로 선택한다. > 마지막으로 “A” 아이콘을 클릭하여 글자 또는 문장의 색상을 바꾼다. <추가설명> 위 “그림 2″를 살펴보면 색상 편집을 위한 아이콘이 두(2) 개인것을 볼 수 있다. 하나는 일반적인 여타의 에디터들과 같은 알파벳 “A“가 있고, 그 옆에 “붓(brush)” 아이콘이 있다. “붓(brush)” 아이콘은 원하는 색상을 지정하기 위한 아이콘이고, 알파벳 “A” 아이콘은 지정한 색상을  선택한 글자 또는 문장에 적용시키기 위한 아이콘이다.
• 3. 링크 삽입: 링크를 연결하고 싶을때 사용한다. 만약 특정 글자 또는 문장에 링크를 삽입하고 싶다면, 역시 링크를 삽입하고 싶은 글자 또는 문장을 먼저 선택한 후 “링크 삽입” 아이콘을 클릭하여 원하는 주소를 입력후 “체크” 버튼을 눌러주면 된다.
• 4. UL, OL 삽입: “UL”은 “Unordered List”의 약자다. 그리고 OL은 “Ordered List”의 약자이다. 다시 말해서 순서가 있는 목록(목차) 또는 순서가 없는 목록(목차)를 만들때 사용하는 기능인 것이다. 

< 그림 3. UL, OL 기능 사용 방법. >

본인은 이 블로그 포스트에서 Editus(에디투스) 에디터의 UL, OL 삽입 기능을 통해 “순서가 없는 목록(목차)”를 만들었다. 바로 위 “2. Editus(에디투스) 에디터 살펴보기“의 목록(목차)”이 그것이다. 

위 “그림 3″을 살펴보자. UL 또는 OL, 즉 순서가 있거나 또는 순서가 없는 목록(목차)을 만드는 방법은 아주 간단하다. 1. 먼저 “HTML” 에디터 버튼을 클릭한다. 2. UL 또는 OL 태그 생성 버튼 중 자신이 원하는 목록(목차)를 만들기 위한 버튼을 클릭한다. 내 경우엔 “UL” 즉, 순서가 없는 목록(목차)을 만들기 위해 “UL” 태그 생성 버튼을 클릭했다. 3. 그러면 “그림 3″의 경우처럼 HTML 편집기 “UL” 태그를 생성할 수 있는 태그 “<ul>내용</ul>”가 자동 생성되고,  “내용” 부분 원하는 문장을 작성한 후, 4. “Insert” 버튼을 클릭하면 끝. 5. 그러면 그 결과가 본문에 삽입된다.

중요한 것 한가지! 꼭 한번만 만들면 된다! 무슨 뜻이냐? 위 “2. Editus(에디투스) 에디터 살펴보기”의 목록(목차)을 살펴보자. 1. 사진, 이미지, 따옴표(Quote) 삽입 부터(~) 4. UL, OL 삽입까지 총 4개의 순서가 없는 목록(목차)가 생성되어 있다. 하지만, UL 또는 OL 삽입을 위해 HTML 편집기는 딱 한번만 사용하면 된다. 첫번째 목록(목차)가 생성되었다면 그 다음 이어지는 목록(목차)는 “엔터(Enter)“를 치면 자동으로 생성되기 때문이다.

UL 또는 OL 삽입을 위한 HTML 편집기는 꼭 한번만 사용하면 된다. 본인은 2. Editus(에디투스) 에디터 살펴보기의 목록(목차)을 만들기 위해서 Editus(에디투스) 에디터의 HTML 편집기를 이용해 첫번째 목록 “1. 사진, 이미지, 따옴표(Quote) 삽입”을 생성했다. 그 다음 2, 3, 4번은 엔터(Enter)키를 누르면 자동으로 생성된다.

본인은 “2. Editus(에디투스) 에디터 살펴보기“의 목록(목차)을 만들기 위해서 Editus(에디투스) 에디터의 HTML 편집기를 이용해 첫번째 목록 “1. 사진, 이미지, 따옴표(Quote) 삽입“을 생성했다. 그 다음 2, 3, 4번은 “엔터(Enter)키“를 누르면 자동으로 생성된다. 그렇기 때문에 첫번째 목록(목차)를 만들때만 HTML 편집기의 UL, OL 기능을 사용하면 된다는 것이다.

4. Youtube 삽입 방법.

< 그림 4. 유튜브 영상 삽입을 위한 엠베드 코드 복사. >

< 그림 4. 유튜브 영상 삽입을 위한 엠베드 코드 복사. >

위 “그림 4, 5“를 살펴보자. 그리고 순서대로 따라해 보자. 

• 1. 공유하고 싶은 유튜브 영상으로 이동한 뒤 “1번” 공유 버튼 클릭.
• “2번” 링크 공유 중 “퍼가기” 클릭.
• 그러고 나면, “엠베드(Embad Code)” 즉 “iFrame” 코드를 복사할 수 있는 창이 나온다. 그 중 “Embad Video” 즉 “iFrame” 코드를 복사하여 붙혀넣기 하면 끝.

43Gear의 Editus(에디투스) 에디터의 “HTML 편집기“에 복사한 유튜브의 “Embad Video” 즉 “iFrame” 코드를 붙혀넣기 해도 되고, 아니면 자신이 작성중인 블로그 포스트 본문 어디에든지 복사한 “iFrame” 코드를 붙혀넣기 해도 상관 없다. 내 경우, 이 문장 아래에 복사한 유튜브 영상의 “iFrame” 코드를 붙혀넣기 해 보았다.

< 그림 4, 5를 통해 소개한 유뷰트 영상. >

Tip. 문제는 모바일이다. 유뷰트 영상의 “iFrame” 코드를 모바일에서도 복사 할 수 있는지 모르겠다. 내 경우엔, 하지 못했다^^ 모바일에선 숏코드만 복사가 되더라… 혹시 누군가 방법을 알고 있다면 댓글좀…^^

”<iframe width=”560″ height=”315″ src=“유튜브 주소 삽입” frameborder=”0″ allow=”autoplay; encrypted-media” allowfullscreen></iframe>”

이와같은 “iFrame” 코드를 하나 저장해 두면 어떨까. 모바일에서 유뷰트 영상을 공유하기 위해서 말이다. 위 코드를 본문에 삽입한 뒤, 코드 중간의 “유튜브 주소 삽입”에 해당 유튜브 영상의 주소만 입력하면 된다.

이 밖에~ 43Gear의 Editus(에디투스)에는 소개할법한 기능들이 조금더 있지만, 개인적으로는 꼭 소개해야 할 기능과 숨은 기능 위주로 블로그 포스트를 작성해 보았다. 이 후에도 43Gear의 Editus(에디투스) 에디터에 관련된 블로그 포스트는 필요하다 판단이 되면  계속해서 이어나갈 것이다. 또,, 아직까지 발견하지 못한 문제점들이 발견되면,, 그러한 부분에 관해서도 누군가에게 참고가 될 수 있도록 블로그 포스트 작성을 해 보겠다. 

PS: 글쎄… 내가 작성한 블로그 포스트를 보곤, “어렵다”라고 느끼는 친구들이 조금 있는것 같다. 어쩌면 뭐든지 처음은 다 어려울 수도 있을것 같으면서도… 솔직히 내 입장에선 네이버나 티스토리보다, 또는 에버노트 등보다도, 훨씬 정교한 작업이 가능하고, 훨씬 쉽다. 물론,, 어디까지나 내 입장에서다. 분명한 건, Editus(에디투스)는 정말 글쓰는 재미가 쏠쏠하다. 재미있고, 즐겁고, 사용하면 사용할수록 뭐랄까… 진정한 블로거가 된 기분~^^  

또 내가,,, Editus 에디터를 참 많이 좋아하는구나,, 하는 생각도 해보게 되었다. 너~무~ 자잘한 내용까지 다 소개할 수 없는데도, 자잘한 부분까지 다 소개해 보려는 욕심이 있었던것 같고,, 이 블로그 포스트를 작성하면선,, 꼭 작성하고 싶은, 필요하다 생각된 부분만 작성하게 되었다. 그랬더니 생각보다 숨은 기능이 많지는 않더라...

아무조록,, 누군가 자신의 홈페이지에 Editus(에디투스) 에디터를 설치하려는 분들께, 혹은 43Gear의 모든 기어(Gear)들에게 이 블로그 포스트가 도움이 되었으면 좋겠다.

1. Editus(에디투스) 프론트앤드 에디터 기능을 알아보자. Part 1.
2. Editus(에디투스) 프론트앤드 에디터 기능을 알아보자. Part 2.
3. Editus(에디투스) 프론트앤드 에디터의 숨은 기능. Part 3.

-잼-