현재 티스토리는 마이크로소프트에서 개발한 오픈소스 에디터인 Monaco Editor를 사용 중이죠
Monaco 에디터는 VS Code를 기반으로 하기 때문에 Monaco 에디터에서도 VS Code의 단축키 사용이 가능합니다 이 단축키들을 알면 코드 작성 또는 수정시에 요긴하게 쓸 수 있어요
아래는 제가 애용하는 단축키 몇 가지만 정리해보았습니다
예시는 전부 CSS창에서 작성했지만, HTML창에서도 똑같이 사용이 가능합니다 (주석 단축키 제외)
CTRL+D 또는 Cmd+D
CTRL+D 또는 Cmd+D는 현재 내가 드래그한 글자와 일치하는 다음 문자열을 자동으로 선택해줍니다 따라서 같은 문자열을 한번에 선택해 수정이 가능합니다
보통 중복되는 클래스명이나 프로퍼티를 전부 지우거나 수정해야 할 때 사용합니다
Alt+Click 또는 Option+Click
Alt+클릭은 커서를 여러 군데에 추가해줍니다 따라서 한번에 다수의 코드를 수정·삭제할 수 있습니다
이 기능은 주로 여러 군데에 같은 내용을 추가해줘야 할 때 사용합니다
Alt+↑/↓ 또는 Option+↑/↓
커서가 위치한 곳을 기준으로 방향키에 따라 위로 이동하거나 아래로 이동하는 단축키입니다 사진에서와 같이 여러 줄을 드래그하면 해당 내용 전체가 움직이고, 한 줄에만 커서를 두면 그 줄만 이동합니다
CTRL+/ 또는 Cmd+/
자동으로 주석을 설정해주는 단축키입니다 이미 주석 처리된 내용에 해당 단축키를 누르면 반대로 주석이 해제됩니다
※ (예외) VS Code와는 달리, 주석 단축키는 티스토리의 HTML 편집창에서 사용이 불가합니다
CTRL+Shift+↑/↓ 또는 Cmd+Shift+↑/↓
방향키에 따라 커서로 찍어둔 곳의 내용을 위 또는 아래에 똑같이 복사해줍니다 여러 줄의 내용을 드래그하면 해당 내용 전체가 복사됩니다