HTML 페이지 및 광고용 Web Designer 소스 파일을 볼 때는 코드 보기와 디자인 보기를 오갈 수 있습니다. 코드 보기에서 수정한 내용은 디자인 보기에 반영되어 있어 코드의 변경사항이 디자인에 미치는 영향을 즉시 테스트할 수 있습니다.
코드 보기로 전환하는 방법:
창의 오른쪽 상단에서 코드 보기
버튼을 클릭합니다.
디자인 보기 패널 및 일부 메뉴 명령은 코드 보기에서 사용할 수 없습니다.
버튼을 클릭합니다.코드 보기 설정
환경설정에서 조정할 수 있는 코드 보기의 서식 지정 및 편집기 옵션은 다음과 같습니다.
- 색상 테마
- 키 맵
- 줄 래핑
- 들여쓰기 간격 크기
- 자동 들여쓰기
- 자동 완성
- 탭에 공백 사용
- 미니맵 표시 여부
전체 옵션 목록은 환경설정 페이지를 참조하세요.
코드 작업하기
다음 기능을 사용하면 코드를 더욱 쉽게 작성하고 수정할 수 있습니다. 문서 내 또는 파일 사이의 코드 보기에서 탐색하는 방법을 알아보세요.
확대/축소
코드 텍스트 크기를 변경하려면 바닥글 막대 오른쪽에 있는 확대/축소 컨트롤(- 및 +)을 사용할 수 있습니다. 기본적으로 Google Web Designer는 코드 보기에 대해 설정한 확대/축소 수준을 저장해 둡니다.
코드 블록 접기
왼쪽 여백의 화살표를 사용하여 코드 블록을 접거나 폅니다.
들여쓰기
기본적으로 Google Web Designer는 입력 시 자동으로 새 행을 들여쓰기합니다. 코드 블록이 제대로 들여쓰기가 되지 않은 경우(예: 다른 파일의 코드를 복사하여 붙여넣은 경우) 해당 코드를 선택하고 Tab 키를 눌러 들여쓰기할 수 있습니다.
코드 자동 완성
기본적으로 Google Web Designer는 입력 시 제안 항목을 표시합니다. 이 환경설정을 사용 중지한 경우 Ctrl+Space 키를 눌러 자동 완성을 트리거할 수 있습니다.
언어 모드
Google Web Designer에서는 파일 확장자를 기준으로 구문 색상을 지정하고 코드를 자동으로 완성합니다. 기본 언어 모드를 재정의하려면 바닥글에서 현재 언어를 클릭하고 팝업 메뉴에서 새 언어를 선택합니다.
GreenSock 자바스크립트 라이브러리
환경이 Display & Video 360으로 설정되어 있거나 프로젝트가 HTML 페이지인 경우 메뉴 명령을 사용하여 자주 사용하는 GreenSock 애니메이션 도구를 바로 추가할 수 있습니다.
GreenSock 라이브러리를 삽입하는 방법:
- 코드 보기 상태인지 확인합니다.
- 파일 메뉴에서 JS 라이브러리 포함 > GreenSock을 선택합니다.
- 목록에서 라이브러리를 선택합니다.
이 프로세스를 반복하여 라이브러리를 여러 개 추가할 수 있습니다.
게시된 코드와의 차이점
문서를 게시했을 때의 코드 형태가 코드 보기에 반영되지 않을 수도 있습니다. 문서 작성 도중에 표시되는 코드는 공간 사용을 줄이기 위해 압축될 수 있으며, 일부 코드는 코드 보기에는 표시되지 않으나 게시된 파일 내에는 포함될 수 있습니다.