ForkLift 에서 Open in terminal 수행

ForkLift 에서 현재 디렉토리 iTerm 으로 열기

개요

MacOS 에서 파인더 대신 ForkLift 를 즐겨 사용하고 있다. 여러가지 유용한 기능 중에 자주 쓰는 기능이 File > Open in Terminal 인데, 이는 현재 패널의 디렉토리를 terminal에서 열어주는 기능을한다.

하지만, terminal 보다 iTerm을 자주 사용하고 있기 때문에 이 기능이 맥 기본 터미널 대신 iTerm을 열게 하고 싶어 아래 방법을 찾았다.

스크립트  찾기

ForkLift는 Open in Terminal 을 수행 할때 앱이 가지고 있는 OpenInTerminal.applescript 스크립트를 수행한다.

그 위치는 아래와 같다.

어플리케이션 디렉토리의 ForkLift.app 을 우클릭 해 "Show Package Contents" 수행
ForkLift 패키지 내용 보기

위 처럼 어플리케이션의 ForkLift.app 을 우 클릭해 “Show Package Contents” 를 수행 한다.

/Applications/ForkLift.app/Contents/Resources/OpenInTerminal.applescript
/Applications/ForkLift.app/Contents/Resources/OpenInTerminal.applescript

Resources 디렉토리를 살펴 보면 OpenInTerminal.applescript 를 찾을 수 있다. 이 스크립트를 수행 하면 맥 터미널 대신 iTerm 이 실행되게 변경할 수 있다.

스크립트 수정

OpenInTerminal.applescript 를 아래 처럼 변경 하고 저장한다.

단축키 지정 및 실행

이 기능을 편하게 사용하기 위해 단축키를 지정하면 좋다. 환경설정 (Command + ,) 을 수행해 아래 처럼 설정 한다.

그냥, ForkLift의 메뉴에서 File > Open in Terminal 을 수행해도 된다.

ForkLift 단축키 지정
ForkLift 단축키 지정

그리고, 실행 하면 아래 처럼 iTerm이 실행되고 현재 패널의 디렉토리로 이동한다. 만약, iTerm이 실행 중이라면 새 탭을 만들고 새탭에서 현재 패널의 디렉토리로 이동한다.

ForkLift 에서 Open in terminal 수행
ForkLift 에서 Open in terminal 수행

 

A5 (A4의 반) 소책자 인쇄 방법

어머니가 성당에서 뭔가 자주 맡아 오시더니 급기야 성지 순례 단장(?)인가를 맡으셔서 여행때 쓸 소책자를 만드셔야 한다고, 그것도 싸게. (그러니까 무료로…)

이 포스트는 A4 프린터를 가지고 A5 소책자를 인쇄 하는 방법을 설명 한다. “A5 소책자”라 하면 이런거다.

http://www.yesprint.co.uk/
http://www.yesprint.co.uk/

A4를 반 접어서 그 가운데를 스테이플러로 찍어 만든 책자이다. (영어로는 Booklet 이라 한다고…)

방법1. 인쇄소에 맡긴다.

가장 추천 하는 방법.

방법2. 소책자 인쇄가 가능한 프린터를 이용해 인쇄한다.

주변 누군가는 갖고 있지 않을까 ?

방법3. 페이지를 적절한 순서로 양면 인쇄한다.

집에 있는 소책자 인쇄가 안되는 프린터로 굳이 인쇄를 해야 한다면 아래 설명을 보고 따라 하자.

우선, 이 방법으로 인쇄 하기위해서는 아래 조건을 만족 해야 한다.

필요 조건

  • 문서의 전체 페이지를 4의 배수가 되도록 작성 한다. (4의 배수가 안되면 그림을 넣든, 빈줄을 넣든 해서 4의 배수가 되도록 맞춘다.)
  • 프린터가 “양면 인쇄”를 지원해야 한다. (자동이든, 수동이든)

1. 문서 작성

문서는 그냥 작성하던 대로 작성 하면 된다. 어쨌든 작성한 대로 책자가 만들어진다.

단, 위에서 언급 했지만 전체 페이지가 4의 배수가 되어야 한다. 4page, 8page, 12page 등 …

만약 4페이지로 떨어지지 않는다면 글자 크기를 조절 하든, 그림을 넣든, 빈줄을 넣든 해서 4의 배수로 페이지를 맞춰야 한다.

2쪽식 모아 찍기를 하기 때문에, 전체 크기가 반으로 줄어든다는 것 정도를 염두에 두고 작성하면 된다.

2. 인쇄 설정

문서 작성이 완료 되었다면 인쇄 창을 열고 아래 처럼 인쇄 설정을 한다.

아래아한글 인쇄 창
아래아한글 인쇄 창
  1. 인쇄 범위를 일부분 으로 설정 하고, 인쇄 순서를 입력한다. (아래에서 설명)
  2. 사용자가 입력한 순서대로 인쇄를 체크 한다.
  3. 인쇄 방식은 모아 찍기 – 2쪽씩 을 선택 한다.
  4. 프린터 설정을 통해 양면 인쇄 를 선택 하다. (이부분은 프린터 마다 다를 수 있다.)

3. 인쇄 순서 설정

만약 문서가 8 페이지 라면 아래 순서로 인쇄가 되어야 한다.

인쇄 순서, http://helpx.adobe.com/kr/indesign/using/printing-booklets.html
인쇄 순서, http://helpx.adobe.com/kr/indesign/using/printing-booklets.html

즉, 8,1,2,7,6,3,4,5 를 인쇄 범위의 일부분 항목에 입력 하면 된다.

말은 쉬운데 이거 계산 하는게 일이다. 12페이지일때는 ? 16페이지 일때는 ?

손으로 계산할 필요 없이 아래 계산 폼을 이용 한다.

페이지수에 전체 페이지 수를 입력하고, “계산하기”를 클릭 하면 아래에 페이지 순서가 표시 된다.이를 복사해서 인쇄 설정 창의 일부분 항목에 붙여넣기 한다.

소책자용 페이지 순서 계산


페이지

4. 인쇄

프린터에 따라 양면 인쇄하는 방법이 다르기 때문에 문서위 위, 아래 방향에 유념하면서 양면 인쇄를 마치고, 반 딱! 접어서 스테이플로 찍는다 (잘~)

끝.

편집 가능한 엘리먼트에 자동 완성으로 링크 추가하기

Q. 자동완성기능 textarea에 <a>태그적용



AJAX를 이용해 자동완성검색기능을 구현하였습니다 그러나 제가원하는 대로 되지않아 이렇게 질문을 올립니다.
페이스북 태그처럼 구현하고있는데 자동완성검색어를 클릭시 textarea태그에 <a>태그가 걸어져서 나오는
즉, 안녕하세요 admin 처럼 나오게하고싶습니다
textarea 태그에 아무리 찾아보아도 안에 태그를 적용할수없다는 지식만나옵니다 정말 textarea 태그안에 <a> 태그를 적용할순없나요
꼭 완성하고싶은데..다른방법이있다면 어떤말법이있을까요 div태그 도 사용해보았지만 글자를 입력할수있는 창이 나오지않아 div 태그도 못쓰고..

A.DIV 태그에 contenteditable 속성을 사용 하세요.

학인하신 것처럼 textarea 에 태그를 입력해봐도 <a>링크</a> 태그가 그대로 보이며, 당연히 이 링크가 동작 하지도 않습니다.

답변을 먼저 드리면, DIV 같은 일반 태그에 contenteditable 속성을 설정 하면 가능합니다.

contenteditable 속성

HTML5 오픈 레퍼런스의 설명을 참고 하세요.

태그에 contenteditable=”true” 라고 속성을 설정 하면 해당 엘리먼트의 내용을 편집할 수 있게 됩니다.

여기를 수정 해보세요 …

contenteditable 엘리먼트에 HTML 추가

그리고, textarea 에서는 불가능하지만 contenteditable=”true” 로된 엘리먼트에서는 HTML 태그도 사용 가능하며 추가된 HTML 엘리먼트의 내용도 수정 가능 합니다.

여기에 링 to the 크 추가

div 에 자동 완성 기능 추가

질문을 보면 jquery-ui 를 이용해 자동 완성을 구현한 것 같은데, div 에도 자동완성 기능을 붙일 수 있습니다.

시도해 봤는데 안된다면 jquery-ui가 지원하지 않는 거니까 다른 라이브러리를 찾아보셔도 될 것 같습니다.

실제로 페이스북의 답글 다는 영역을 확인해보면 아래 처럼 div에 contenteditable=”true” 를 사용하고 있습니다.

facebook 댓글 영역

그리고, 이 답변을 준비 하면서 실제로 가능한지 직접 div에 자동 완성 기능을 붙여 봤습니다. 데모 보기

추가된 링크 클릭 가능하게 하기

위에서 contenteditable=”true” 엘리먼트에 링크를 추가했는데요, 클릭 해보면 링크 문구를 수정 할 수 있게 커서가 위치하지만, 링크가 동작하지는 않습니다. 만약, 추가된 링크를 동작 하게 하려면 아래 처럼 <a> 태그에는 contenteditable=”false” 를 설정 합니다.

동작하는 링크 추가

추가된 링크는 클릭 할 수는 있지만 수정 할 수는 없습니다. 이게 질문 의도에 가장 부합하는 방식일 것 같네요.

건투를 빕니다.

참고

데모를 만들어 봤습니다.

자동 완성 기능을 직접 만들어 보느라 소스가 길어졌습니다.

데모 보기

시연 영상 입니다.

한글 Lorem Ipsum 생성기

메일이 하나 왔다. 예전 블로그에 있었던 “한글 Lorem Ipsum”을 복원해줬으면 한다는 내용이었다. 디스크 어딘가에 예전 소스가 있으면 살려놓고, 없으면 다른 생성기를 찾아서 소개 해주려 했는데 ~

디스크에는 소스가 없었으며, 살아있는 한글 Lorem Ipsum 생성기를 못 찾았고, 검색 결과에 있는 한글 Lorem Ipsum의 링크 들이 예전 블로그 그 페이지로 걸려 있었다. 잠시 고민하고 새로 만들었다. 당시에는 php로만 만들었던 것 같은데, 이번에는 AngularJS를 써봤다.

Lorem Ipsum 이란 ?

로렘 입숨(lorem ipsum; 줄여서 립숨, lipsum)은 출판이나 그래픽 디자인 분야에서 폰트, 타이포그래피, 레이아웃 같은 그래픽 요소나 시각적 연출을 보여줄 때 사용하는 표준 채우기 텍스트로, 최종 결과물에 들어가는 실제적인 문장 내용이 채워지기 전에 시각 디자인 프로젝트 모형의 채움 글로도 이용된다. 이런 용도로 사용할 때 로렘 입숨을 그리킹(greeking)이라고도 부르며, 때로 로렘 입숨은 공간만 차지하는 무언가를 지칭하는 용어로도 사용된다.

로렘 입숨은 전통 라틴어와 닮은 점 때문에 종종 호기심을 유발하기도 하지만 그 이상의 의미를 담지는 않는다. 문서에서 텍스트가 보이면 사람들은 전체적인 프레젠테이션보다는 텍스트에 담긴 뜻에 집중하는 경향이 있어서 출판사들은 서체나 디자인을 보일 때는 프레젠테이션 자체에 초점을 맞추기 위해 로렘 입숨을 사용한다.

블로거(slowalk) 분의 포스트 『‘한글 입숨(Ipsum)’으로 디자인하세요』 에 내가 이전 블로그에 적었던 글이 인용되어 있어서 해당 문단을 그대로 옮겨본다.

코딩중에 기능 테스트 혹은 레이아웃 테스트를 위해 임의의 데이터를 넣어야 하는데 멀 넣어야 할지 멍~ 하게 고민한적.
이럴때 꼭 센스를 자랑하기 위해 농담도 적어보고 해당 기능과 맥이 통하는 장난스런 글도 넣기도 하지만, 게시판이라도 테스트할 때는 게시물 몇개를 만들어야 하는지 … 지친다.
해서 !! 한글 Lorem Ipsum 생성기를 만들었다.

출처를 어디로 해야하나 ;;

한글 Lorem Ipsum 생성기

한글 Lorem Ipsum 스크린샷

딱히 사용법은 없고, 그냥 옵션 이것저것 건드리면 하단에 무작위 한글 문장이 생성되며 HTML로도 확인 가능하다. 생성된 텍스트 더미나 HTML을 복사해 사용하면 된다.

사용해보기

근데, 이게 내가 만들어놓고도 처음 몇 번 말고는 사용한적이 없는것 같다. ㅎㅎ

자바스크립트 슬라이딩 퍼즐

Q. 자바스크립트 랜덤게임 질문이요!

1. Math.random()함수를 이용한 램던 숫자 풀 구현

2. 3×3 배열 생성하기 하고 웹페이지에 테이블 생성하기

3. 3×3 배열에 랜덤 숫자 넣어 퍼즐 테이블 완성하기

4. 키 이벤트를 활용하여 퍼즐 조작 구현하기

이 4가지 조건을 충족하는 자바코드를 만들려고 하는데요 현재 요 아래까지밖에 못했어요ㅠㅠ어떻게 해야할까요?

A. 자바스크립트로 슬라이더 퍼즐 만들기.

아래 답변은 몇 가지를 전제 합니다.

1. 위 질문에서 말하는 퍼즐을 “슬라이딩 퍼즐” 로 간주 합니다.

2. 대충의 자바스크립트 문법을 알고 있다고 가정 합니다.

3. 아래에서 소개하는 스크립트에는 jQuery를 사용했습니다.

슬라이더 퍼즐은 어릴 때 한 번쯤 해봤을만한 그… 숫자 조각을 이리 저리 밀어서 순서대로 맞추는 퍼즐입니다. 아래 사진을 보면 “아~” 할겁니다.

sliding puzzle
sliding puzzle (by eko https://www.flickr.com/photos/ekosystem/1653442249)

1. 이런 보드 게임류를 만들때는 2차원 배열을 이용합니다.

2. 2차원 배열은 그 값들에 array[y][x] 와 같이 접근할 수도 있고, array[y * X-length + x] 와 같이 1차원 적으로도 접근할 수 있습니다.

2차원 배열을 1차원 인덱스로 접근

2. 데이터와 화면표시를 분리합니다. 데이터만 조작 하는 함수를 만들고 데이터가 변경 될때마다 화면이 업데이트 되도록 합니다.

1. 화면

sliding puzzle - display

이런 모양이 되도록 할 예정입니다. 아래 테이블에는 내용이 빠져 있는데 나중에 스크립트로 채워 넣습니다.

2. 데이터

3. 초기화

board 배열을 초기화 합니다. 초기화에는 2가지 방법이 있습니다.

1. 전체 배열에 무작위로 1 ~ 8 숫자를 집어 넣는다.
쉽게 구현 할 수 있고 빠르지만, 게임이 불가능한 형태로 초기화 될 수 있습니다.

2. 1 ~ 8의 숫자를 순서대로 집어 넣고 게임 규칙에 따라 무작위로 섞는다.
조금 복잡해지며 게임의 규칙을 먼저 만들고 나서 해야 하지만 게임이 불가능해지는 경우는 없습니다.

여기서는 2번째 방법을 사용하도록 하겠습니다.

일단, 이렇게 실행 하면 위의 퍼즐 그림 처럼 숫자가 순서대로 표시되고 맨 마지막 칸이 빈칸으로 설정 됩니다. 이제, 이동하는 함수를 만들고 초기화 해서 무작위로 이동을 수행 하도록 합니다.

move(d, human) 은 이동 방향과 사람이 이동 시켰느지 여부를 받습니다. 초기화 시에는 human 을 false 로 사람이 직접 움직일 떄는 true 로 해서 나중에 사람이 움직일 때는 별도의 액션을 취하도록 할 수 있을 겁니다. 소리를 재생 한다든지, 게임이 끝났는지 체크 한다든지 …

이동 하는 함수가 만들어 졌으니 초기화 함수를 다시 작성 합니다. 아주 여러번 무작위로 좌/우/위/아래 중에 하나를 골라 이동 시키는 겁니다.

실행 하면 아래와 같이 무작위로 이동 된 모습을 볼 수 있습니다.

초기화 후
초기화 후
4. 키보드 입력 받기

키보드 입력은 간단합니다. 눌린 키를 검사해 이동 함수를 호출 합니다.

5. 게임 완료

사용자의 키보드 입력을 받고 이동이 일어 난 후에 모든 숫자가 순서대로 배치 되었는지 검사해 게임 완료 여부를 결정 합니다. 이동 함수에서 사람이 움직였다면 이 검사를 수행 하는 코드도 추가 합니다.

다 됐습니다.

구동 화면 입니다.

참고