지원되는 파일을 엽니다.
- Dreamweaver 사용 안내서
- 소개
- Dreamweaver 및 Creative Cloud
- Dreamweaver 작업 영역 및 보기 옵션
- 사이트 설정
- 파일 관리
- 레이아웃 및 디자인
- CSS
- 페이지 내용 및 에셋
- 페이지 속성 설정
- CSS 머리글 속성 및 CSS 링크 속성 설정
- 텍스트 작업
- 텍스트, 태그, 속성 찾기 및 바꾸기
- DOM 패널
- 라이브 뷰에서 편집
- Dreamweaver에서 문서 인코딩
- 문서 창에서 요소 선택 및 보기
- 속성 관리자에서 텍스트 속성 설정
- 웹 페이지 맞춤법 검사
- Dreamweaver에서 가로줄 사용
- Dreamweaver에서 글꼴 조합 추가 및 수정
- 에셋을 사용하여 작업
- Dreamweaver에서 날짜 삽입 및 업데이트
- Dreamweaver에서 즐겨찾기 에셋 만들기 및 관리
- Dreamweaver에서 이미지 삽입 및 편집
- 미디어 오브젝트 추가
- Dreamweaver에서 비디오 추가
- HTML5 비디오 삽입
- SWF 파일 삽입
- 오디오 효과 추가
- Dreamweaver에서 HTML5 오디오 삽입
- 라이브러리 항목을 사용하여 작업
- Dreamweaver에서 아랍어 및 히브리어 텍스트 사용
- 링크 및 내비게이션
- jQuery 위젯 및 효과
- 웹 사이트 코딩
- Dreamweaver에서의 코딩 정보
- Dreamweaver의 코딩 환경
- 코딩 환경 설정
- 코드 색상 표시 맞춤 설정
- 코드 작성 및 편집
- 코드 힌트 및 코드 완성
- 코드 축소 및 확장
- 스니펫으로 코드 재사용
- 코드 린트
- 코드 최적화
- 디자인 뷰에서 코드 편집
- 페이지의 헤드 내용 작업
- Dreamweaver에 서버측 포함 삽입
- Dreamweaver에서 태그 라이브러리 사용
- Dreamweaver에 사용자 정의 태그 가져오기
- JavaScript 비헤이비어 사용(일반 지침)
- 빌트인 JavaScript 비헤이비어 적용
- XML 및 XSLT 정보
- Dreamweaver에서 서버측 XSL 변환 수행
- Dreamweaver에서 클라이언트측 XSL 변환 수행
- Dreamweaver에서 XSLT의 문자 엔티티 추가
- 코드 서식 지정
- 제품 간 워크플로
- 템플릿
- Dreamweaver 템플릿 정보
- 템플릿 및 템플릿 기반 문서 인식
- Dreamweaver 템플릿 만들기
- 템플릿에서 편집 가능 영역 만들기
- Dreamweaver에서 반복 영역 및 표 만들기
- 템플릿의 옵션 영역 사용
- Dreamweaver에서 편집 가능 태그 속성 정의
- Dreamweaver에서 중첩 템플릿을 만드는 방법
- 템플릿 편집, 업데이트 및 삭제
- Dreamweaver에서 xml 내용 내보내기 및 가져오기
- 기존 문서에서 템플릿 적용 또는 제거
- Dreamweaver 템플릿의 내용 편집
- Dreamweaver에서 템플릿 태그에 대한 구문 규칙
- 템플릿 영역의 강조 표시 환경 설정
- Dreamweaver에서 템플릿 사용 시 이점
- 모바일 및 멀티스크린
- 다이내믹 사이트, 페이지 및 웹 양식
- 웹 애플리케이션 이해
- 애플리케이션 개발용 컴퓨터 설정
- 데이터베이스 연결 문제 해결
- Dreamweaver에서 연결 스크립트 제거
- 다이내믹 페이지 디자인
- 다이내믹 콘텐츠 소스 개요
- 다이내믹 콘텐츠의 소스 정의
- 페이지에 다이내믹 콘텐츠 추가
- Dreamweaver에서 다이내믹 콘텐츠 변경
- 데이터베이스 레코드 표시
- Dreamweaver에서 라이브 데이터 제공 및 문제 해결
- Dreamweaver에서 사용자 정의 서버 비헤이비어 추가
- Dreamweaver를 사용하여 양식 구성
- 양식을 사용하여 사용자 정보 수집
- Dreamweaver에서 ColdFusion 양식 작성 및 활성화
- 웹 양식 제작
- 양식 요소를 위한 HTML5 지원 개선
- Dreamweaver를 사용하여 양식 개발
- 애플리케이션의 시각적 구성
- 웹 사이트 테스트, 미리보기 및 게시
- 문제 해결
파일을 만들거나 편집할 때마다 포맷을 제어하는 환경 설정을 지정할 수 있습니다.
수동으로 코드 서식 지정
-
-
편집 > 코드 > 소스 서식 적용을 선택합니다.
또는 일반 툴바 > 소스 코드 포맷에서 소스 서식 적용을 선택합니다.
수동으로 파일에서 선택한 코드 서식 지정
-
코드를 엽니다.
-
코드의 일부를 선택합니다.
-
편집 > 코드 > 선택 영역에 소스 서식 적용을 선택합니다.
또는 일반 툴바 > 소스 코드 포맷에서 선택 영역에 소스 서식 적용을 선택합니다.
참고:태그 사이에 있는 코드를 선택하고 선택 영역에 소스 서식을 적용하면 해당 서식은 부모 태그까지 적용됩니다.
코드 서식 지정에 대한 기본 규칙 편집
서식 지정 규칙을 추가하여 CSS, JS 및 PHP 코드 서식을 맞춤화할 수 있습니다.(사이트 루트 폴더의 .jsbeautifyrc 파일에서)
.jsbeautifyrc 파일을 추가하려면 다음 단계를 따르십시오.
- 다음 지침은 CSS, JS 및 PHP 문서에만 적용됩니다.
- PHP 문서의 HTML 태그는 태그 라이브러리의 환경 설정에 따라 서식이 지정됩니다. 다음 지침에 따라 PHP 블록 내의 코드에 서식을 지정할 수 있습니다.
-
사이트 루트에서 파일 이름이 .jsbeautifyrc인 파일을 새로 만듭니다.
-
아래의 CSS, JS 및 PHP에 대한 기본 서식 지정 규칙을 복사하여 .jsbeautifyrc에 붙여넣고 파일을 저장합니다.
{ "js": { "eol": "\n", "preserve_newlines": true, "max_preserve_newlines": 3, "space_after_anon_function": true, "keep_array_indentation": false, "space_before_conditional": true, "break_chained_methods": false, "unescape_strings": false, "wrap_line_length": 0, "end_with_newline": true, "comma_first": false, "operator_position": "after-newline" }, "css": { "preserve_newlines": false, "selector_separator_newline" : false, "end_with_newline": false, "newline_between_rules": false, "space_around_selector_separator": true }, "php": { "eol": "\n", "preserve_newlines": true, "max_preserve_newlines": 3, "space_after_anon_function": true, "brace_style": "collapse", "keep_array_indentation": false, "space_before_conditional": true, "break_chained_methods": false, "unescape_strings": false, "wrap_line_length": 0, "end_with_newline": false, "comma_first": false, "space_in_paren":true } }
-
기본 규칙을 편집하여 아래 표에 따라 기본 코드 서식 지정 규칙을 변경하고 변경 내용을 저장합니다.
-
Dreamweaver를 다시 실행하고 CSS, JS 및 PHP 파일에 대한 코드 서식을 적용합니다.
업데이트된 서식 규칙에 따라 코드에 서식이 지정됩니다.
다른 Dreamweaver 사이트에서 PHP, CSS 및 JS 파일에 대한 코드 서식을 맞춤화하려면 사용자 정의된 파일을 사이트 루트 폴더의 .jsbeautifyrc에 배치해야 합니다.
CSS, JS 및 PHP 서식 지정에 대한 규칙:
CSS | 규칙 | Dreamweaver에서의 기본 값 | 설명 |
preserve_newlines | false | 빈 줄을 유지할지 여부를 지정합니다. | |
selector_separator_newline | false | 쉼표로 구분된 선택기 사이에 줄 바꿈을 적용할지 여부를 지정합니다. 예: ".div, .P" |
|
end_with_newline | false | 파일을 빈 줄로 끝낼 것인지 여부를 지정합니다. | |
newline_between_rules | false | 모든 CSS 규칙 뒤에 새 줄을 추가할지 여부를 지정합니다. | |
space_around_selector_separator | true | 선택기 분리 기호 주변 공간을 확보하려면: '>', '+', '~' 예를 들어 소스 서식을 지정할 때 “a>b”는 “a > b”가 됩니다. |
JS | 규칙 | Dreamweaver에서의 기본 값 | 설명 |
“eol” | “\n” | 줄의 끝을 나타내는 데 사용되는 문자입니다. | |
preserve_newlines | true | 빈 줄을 유지할지 여부를 지정합니다. | |
max_preserve_newlines | 3 | “max_preserve_newlines”에 대해: N, JS 파일에 N-1개를 초과하는 빈 줄이 있는 경우 N-1개의 빈 줄은 서식 적용 시 유지됩니다. 참고: max_preserve_newlines는 preserve_newlines가 true로 설정된 경우에만 적용됩니다. |
|
space_after_anon_function | true | 익명 함수의 괄호 앞에 공백을 추가할지 여부를 지정합니다. 예를 들어 소스 서식을 지정할 때 “function()”는 “function ()”가 됩니다. |
|
keep_array_indentation | false | 배열 본문 내에 줄 바꿈 문자를 허용하거나 유지합니다. | |
space_before_conditional | true | 조건문 앞에 공백을 추가할지 여부를 지정합니다. 예를 들어 서식을 적용 시 “if(true)”는 “if (true)”가 됩니다. |
|
break_chained_methods | false | 체인으로 연결된 함수 사이의 줄바꿈을 허용하거나 유지합니다. 예: `foobar().baz()` |
|
unescape_strings | false | \xNN 표기법으로 인코딩된 문자열에서 인쇄 가능한 문자는 이스케이프되지 않아야 합니다. 예: “\x65\x78\x61\x6d\x70\x6c\x65”는 소스 서식 적용 시 “예(example)”가 됩니다. |
|
wrap_line_length | 0 | 이 문자 수 이후로 줄 바꿈이 이루어져야 합니다. | |
end_with_newline | true | 파일 끝에 줄 바꿈이 추가되도록 합니다. |
|
comma_first | false | 쉼표는 줄 바꿈에 사용되지만 이 플래그는 쉼표를 줄의 첫 번째 문자로 사용할 수 있도록 해 줍니다. | |
operator_position | after-newline | 긴 조건부 표현식을 여러 줄로 분할한 경우 이 플래그는 해당 줄에서 연산자의 위치를 정의하는 데 사용됩니다. 아래 값을 사용하여 플래그를 편집할 수 있습니다.
|
PHP 서식 지정에 대한 규칙은 아래에 있는 두 개의 추가 규칙이 있는 JS 서식 지정(위 표에 설명됨)과 동일합니다.
PHP | 규칙 | Dreamweaver에서의 기본 값 | 설명 |
brace_style | collapse | 이 옵션을 사용하여 괄호의 위치를 제어할 수 있습니다. 예: function f() { // code } 또는 function f() { // Code } 아래 값을 할당할 수 있습니다.
|
|
space_in_paren | true | 괄호 안에 공백을 추가할지 여부를 지정합니다. 예: include('header.php') 는 서식 지정 시 include( 'header.php' )가 됩니다. |