HTML&CSS

비주얼 스튜디오 코드 기초 - 5. 열 선택 모드(Column Selection Mode)와 다중 커서 모드(Multi Cursor Mode) 활용

apost 2020. 10. 20. 05:09

코딩을 하다보면 여러 행에 반복되는 같은 내용을 입력하거나, 여러 행에 있는 같은 위치의 블록 내용을 복사해서 다시 붙여 넣어야 할 필요가 있습니다.

많은 텍스트 에디터, 또는 코드 에디터에서 지원하는 기능으로 열 선택 모드(컬럼 선택 모드-Multi column mode), 열 모드(Column mode), 또는 다중 커서 모드(Multi cursor mode)가 있습니다.

비주얼 스튜디오 코드 또한 열 선택 모드와 다중 커서 모드를 지원합니다.

 

열 선택 모드

비주얼 스튜디오 코드의 열 선택 모드는 다른 에디터와 동일하게 별도로 기능을 켜야 동작합니다.

비주얼 스튜디오에서 열 선택 모드는

 

"선택 영역 > 열 선택 모드"

 

를 선택하면 켜집니다. 열 선택 모드를 선택하면 메뉴 항목 왼쪽에 체크 표시가 되어 열 선택 모드가 동작 중임을 표시합니다.

 

비주얼 스튜디오 코드 "열 선택 모드"

 

 

이제 에디터 창에서 여러 줄에 걸쳐서 반복되는 내용들을 대각선 방향으로 드래그 해 블록으로 선택합니다.

 

여러 행을 컬럼으로 선택

 

선택한 내용은 복사(Ctrl+C)&붙여넣기(Ctrl+V)로 다른 위치에 붙여넣을 수도 있습니다.

 

마우스로 블록을 선택하는 방법 외에 Shift 키를 누른 상태에서 화살표 키를 사용해도 동일하게 열 우선으로 선택할 수 있습니다.

 

 

다중 커서 모드(Multi cursor mode)

다중 커서 모드를 활용하면 여러 행에 같은 내용을 입력해야 할 때, 한 번의 입력으로 같은 내용을 한꺼번에 입력할 수 있습니다.

다중 커서 모드는 원하는 여러 위치에 여러 개의 입력 커서를 생성해서 한번에 입력되도록 합니다.

 

다중 커서는 "Alt + 클릭"으로 커서를 추가할 위치를 클릭해서 생성합니다.

"Alt" 키를 누른 상태에서 입력 커서를 위치할 곳을 여러 군데 클릭하면 여러 개의 입력 커서가 동시에 생성됩니다.

 

다중 커서 생성

 

"선택 영역 > 다중 커서에 Ctrl+를 사용" 메뉴 항목을 선택하면, 다중 커서를 선택하는 커멘드 키를 "Ctrl + 클릭" 으로 변경할 수 있습니다.

 

다중 커서 깜박거리는 상태에서 입력하고 싶은 내용을 입력하면 다중 커서가 깜박거리는 위치에 같은 내용이 입력됩니다.

 

다중 커서 위치에 같은 내용을 입력

 

 

열 선택 모드와 다중 커서 모드의 활용

열 선택 모드와 다중 커서 모드를 함께 사용하면, 반복되는 내용을 열 우선으로 블록으로 선택해 잘라내서 다른 위치에 정확하게 붙여넣을 수 있습니다.

 

열 우선 모드를 켠 후 오려낼 블록을 선택한 후 잘라내기(Ctrl+X) 잘라 냅니다.

 

 

잘라낸 내용을 붙여넣을 위치에 잘라낸 블록의 행 수만큼 다중 커서를 생성한 후 붙여넣기(Ctrl+V)를 하면 잘라낸 내용이 다중 커서 위치에 여러 행으로 정확하게 붙여넣기가 됩니다.