코드 보기에서 탐색하기

코드 보기에서 다른 프로젝트 파일을 보고, 문서의 다른 위치로 이동하고, 코드를 검색할 수 있습니다.

파일 찾아보기

Google Web Designer가 코드 보기 모드인 경우 왼쪽의 파일 패널에 프로젝트 폴더의 파일 및 하위 폴더 목록이 표시됩니다. 목록이 변경되면 패널이 자동으로 업데이트됩니다.

파일 열기

패널에서 파일을 선택하여 새 탭에서 엽니다. 열 수 있는 파일 형식은 다음과 같습니다.

Web Designer에서 생성한 .html 소스 파일

기타 .html 파일*

.css*

.js*

.json*

.svg*

.xml*

^{* 코드 보기에서만 수정할 수 있습니다.}

이미지 파일(.jpg/.jpeg, .png, .gif)을 열어서 볼 수도 있습니다. 이미지의 미리보기 이미지를 보려면 파일 패널에서 이미지의 파일 이름 위로 마우스를 가져가세요.

Web Designer에서 열 수 없는 파일은 회색으로 표시됩니다.

다른 프로젝트 또는 다른 폴더에 있는 파일을 열려면 파일> 열기... 메뉴 명령을 사용합니다.

파일 목록 필터링

파일 필터링 입력란에 파일 이름의 일부를 입력하면 일치하는 파일만 표시됩니다.

파일 패널 숨기기

파일 목록을 숨기려면 파일 패널 오른쪽 상단에 있는 접기 버튼을 클릭하고, 패널을 다시 열려면 펼치기 버튼을 클릭합니다.

문서 탐색

디자인 보기에서 요소를 선택하고 코드 보기로 전환하면 선택한 요소와 관련된 코드에 커서가 배치됩니다.

행으로 이동

바닥글 막대에서 행 또는 열 번호를 클릭하여 새 값을 입력한 다음 Enter 키를 누릅니다.

미니맵 사용

창의 오른쪽에 있는 미니맵에는 코드 보기 내 전체 문서의 미니어처 버전이 표시됩니다. 편집기에 표시되는 코드 부분은 미니맵에서 강조표시됩니다.

미니맵 안에서 클릭하면 문서의 해당 부분으로 이동하게 되며, 위나 아래로 드래그하면 문서가 스크롤됩니다.

미니맵은 환경설정에서 사용 중지할 수 있습니다.

코드 검색

텍스트를 찾는 방법:

수정 > 찾기로 이동하거나 Ctrl+F 키(Windows) 또는 ⌘+F 키(Mac)를 눌러 창 하단에서 검색 막대를 엽니다.

찾기... 입력란에서 검색어를 입력합니다.

다음과 같이 원하는 검색 옵션으로 전환합니다.

정규 표현식(.*)

대소문자 구분(Aa)

전체 단어()

선택 항목으로 제한()

Google Web Designer는 일치하는 항목의 총 수를 표시하고 첫 번째 일치 항목을 커서 위치 뒤에 강조 표시합니다.

다음 일치 항목을 찾는 방법: 아이콘을 클릭하거나 Ctrl+G 키(Windows) 또는 ⌘+G 키(Mac)를 누릅니다.

이전 일치 항목을 찾는 방법: 아이콘을 클릭하거나 Shift+Ctrl+G 키(Windows) 또는 Shift+⌘+G 키(Mac)를 누릅니다.

동시에 수정할 수 있도록 모든 일치 항목을 선택하는 방법: 모두 찾기를 클릭합니다.

Esc 키를 누르거나 X를 클릭하여 검색 막대를 닫습니다.

텍스트를 찾아 바꾸는 방법:

수정 > 찾기/바꾸기로 이동하거나 Ctrl+Shift+F 키(Windows) 또는 ⌘+Shift+F 키(Mac)를 눌러 창 하단에서 검색 및 바꾸기 막대를 엽니다.

찾기... 입력란에 검색어를 입력하고 및 바꾸기... 입력란에 대체 텍스트를 입력합니다.

텍스트를 바꿀 때도 텍스트를 찾을 때와 동일하게 다음과 같은 옵션(위 그림 참조)을 사용할 수 있습니다.

현재 일치 항목을 바꾸고 다음 일치 항목을 찾으려면 바꾸기를 클릭합니다.

모든 일치 항목을 바꾸려면 모두 바꾸기를 클릭합니다.