Dreamweaver 코드 작성에 대한 일반 정보

Dreamweaver가 웹 사이트를 빌드하는 데 사용되는 다양한 코딩 언어를 지원하는 방식에 대해 학습합니다.

완벽하게 기능하는 웹 사이트를 디자인하고 개발하는 데 가장 보편적으로 사용되는 프로그래밍 언어로는 프론트엔드의 경우 HTML, HTML5 및 CSS, 백엔드의 경우 PHP, JavaScript, Java 및 jQuery가 있습니다.

CSS를 사용하여 웹 사이트 전반에 걸쳐 웹 사이트의 모양(예: 글꼴 및 색상 등)을 디자인할 수 있습니다. 그런 다음 HTML을 사용하여 이미지, 텍스트, 비디오, 양식 및 기타 다양한 콘텐츠를 삽입하고 이들 콘텐츠가 서로 조화를 이루도록 웹 페이지를 제작할 수 있습니다.

CSS와 HTML을 함께 사용하여 정적 사이트를 빌드할 수 있습니다. 단, 대부분의 웹 사이트는 예를 들어 고객이 양식을 작성하거나 결제를 진행할 때 필요한 일부 인터랙션 양식과 웹 사이트의 모든 데이터를 저장할 데이터베이스를 필요로 합니다.

이러한 커뮤니케이션의 백엔드 채널을 만들려면 데이터베이스와 통신하는 서버 측 프로그래밍 언어(예: PHP)가 필요합니다.

Dreamweaver에서 지원되는 프로그래밍 언어

Adobe Dreamweaver은 텍스트 편집 기능 이외에도 코드 힌트와 같이 다음 언어로 코드를 작성하는 데 도움을 주는 다양한 기능을 제공합니다.

HTML
PHP
CSS
JavaScript

Perl과 같은 그 밖의 언어의 경우에는 Dreamweaver에서 해당 언어에 대한 전용 코드 작성 기능이 지원되지 않습니다. 예를 들어 Perl 파일을 만들고 편집할 수는 있지만 이 언어에는 코드 힌트가 적용되지 않습니다.

자동 코드 수정

수동으로 작성한 코드를 지정한 기준에 따라 Dreamweaver에서 자동으로 정리하도록 옵션을 설정할 수 있습니다. 그러나 코드 다시 작성 옵션을 설정하거나 코드 변경 작업을 수행한 경우가 아니면 코드가 다시 작성되지 않습니다. 예를 들어 [소스 포맷 적용] 명령을 사용하지 않으면 Dreamweaver에서는 코드의 공백이나 대/소문자 속성이 변경되지 않습니다.

이러한 코드 다시 작성 옵션 중 일부만 기본적으로 활성화되어 있습니다.

Dreamweaver에서 Roundtrip HTML 기능을 사용하면 문서의 원본 HTML 소스 코드의 내용 및 구조에 거의 영향을 주지 않고 텍스트 기반 HTML 편집기와 Dreamweaver 간에 문서를 이동할 수 있습니다. 이 기능은 다음을 포함합니다.

타사 텍스트 편집기를 사용하여 현재 문서를 편집할 수 있습니다.
기본적으로 Dreamweaver에서는 코드 다시 작성 옵션을 활성화하지 않으면 다른 HTML 편집기에서 만들었거나 편집한 코드는 코드가 잘못된 경우라도 변경하지 않습니다.
Dreamweaver는 XML 태그를 포함하여 인식할 수 없는 태그는 변경하지 않습니다. 이를 판단할 기준이 없기 때문입니다. 알 수 없는 태그가 다른 태그와 겹친 경우(<MyNewTag><em>텍스트</MyNewTag></em>)에서는 이를 오류로 표시하지만 코드를 다시 작성하지는 않습니다.
원하는 경우 Dreamweaver의 코드 보기에서 잘못된 코드가 노란색으로 강조 표시되도록 설정할 수 있습니다. 강조 표시된 부분을 선택하면 속성 관리자에 오류 수정 방법이 표시됩니다.

XHTML 코드

Dreamweaver에서는 대부분의 XHTML 요구 사항을 충족시키는 방식으로 새 XHTML 코드를 생성하고 기존 XHTML 코드를 정리합니다. 또한, 아직 충족되지 않은 일부 XHTML 요구 사항을 충족시키는 데 필요한 도구도 제공됩니다.

참고:

이러한 요구 사항 중 일부는 여러 버전의 HTML에도 필요합니다.

다음 표에서는 Dreamweaver가 자동으로 충족하는 XHTML 요구 사항에 대해 설명합니다.

XHTML 요구 사항	Dreamweaver에서 수행되는 작업
문서의 루트 요소 앞에는 DOCTYPE 선언이 있어야 하며, 이 선언은 XHTML에 대한 세 DTD(Document Type Definition) 파일(strict, transitional, frameset) 중 하나를 참조해야 합니다.	다음과 같이 XHTML 문서에 XHTML DOCTYPE을 추가합니다. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> XHTML 문서에 프레임세트가 포함된 경우 다음과 같이 추가합니다. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
문서의 루트 요소는 html이 되어야 하며, 이 html 요소는 XHTML 네임스페이스를 지정해야 합니다.	다음과 같이 namespace 속성을 html 요소에 추가합니다. <html xmlns="http://www.w3.org/1999/xhtml">
표준 문서에는 head, title 및 body 구조 요소가 포함되어야 합니다. 프레임세트 문서에는 head, title 및 frameset 구조 요소가 포함되어야 합니다.	표준 문서에는 head, title 및 body 요소를 포함시킵니다. 프레임세트 문서에는 head, title 및 frameset 요소를 포함시킵니다.
문서에 있는 모든 요소는 다음과 같이 적절하게 중첩되어야 합니다. <p>이 경우는 <i>잘못된 예입니다.</p></i> <p>이 경우는 <i>올바른 예입니다.</i></p>	중첩된 코드를 올바르게 생성하며, XHTML을 정리할 때 Dreamweaver에서 생성되지 않은 코드 중첩을 수정합니다.
모든 요소와 속성의 이름은 소문자여야 합니다.	XHTML 코드를 생성하거나 정리할 때 태그 및 속성의 대/소문자 환경 설정에 상관없이 XHTML 코드에서 HTML 요소 및 속성의 이름을 소문자로 강제로 설정합니다.
DTD에서 EMPTY로 선언된 경우를 제외하고 모든 요소에는 닫기 태그가 포함되어야 합니다.	코드를 생성하거나 XHTML을 정리할 때 코드에 닫기 태그를 삽입합니다.
빈 요소에는 종료 태그가 포함되거나 시작 태그가 />로 끝나야 합니다. 예를 들어 <br>은 올바르지 않습니다. 올바른 형식은 <br></br> 또는 <br/>입니다. 빈 요소로 area, base, basefont, br, col, frame, hr, img, input, isindex, link, meta 및 param이 있습니다. XML을 사용할 수 없는 이전 브라우저와의 호환성을 위해 /> 앞에 공백이 있어야 합니다(예: <br/>가 아니라 <br />).	코드를 생성하거나 XHTML을 정리할 때 코드에서 빈 태그에 있는 닫기 슬래시 앞에 공백과 함께 빈 요소를 삽입합니다.
속성은 최소화될 수 없습니다. 예를 들어 <td nowrap>은 잘못된 것이며 <td nowrap="nowrap">이 올바른 형식입니다. 이 형식은 checked, compact, declare, defer, disabled, ismap, multiple, noresize, noshade, nowrap, readonly 및 selected 속성에 적용됩니다.	코드를 생성하거나 XHTML을 정리할 때 코드에 전체 속성 값 쌍을 삽입합니다. 참고: HTML 브라우저에서 HTML 4를 지원하지 않는 경우 불린 속성이 전체 형식으로 표시되면 브라우저에서 이들 속성을 해석하지 못할 수도 있습니다.
모든 속성 값은 인용 부호로 묶어야 합니다.	코드를 생성하거나 XHTML을 정리할 때 코드에서 속성 값을 인용 부호로 묶습니다.
a, applet, form, frame, iframe, img 및 map 요소에는 id 속성과 name 속성이 있어야 합니다. 예를 들어 <a name="intro">Introduction</a>은 올바르지 않습니다. 올바른 형식은 <a id="intro">Introduction</a> 또는 <a id="section1" name="intro"> Introduction</a>입니다.	속성 관리자에서 name 속성을 설정한 경우 XHTML을 정리할 때 Dreamweaver에서 생성한 코드의 name 및 id 속성을 항상 동일한 값으로 설정합니다.
열거형 유형의 값을 가지는 속성의 경우 그 값은 소문자여야 합니다. 열거형 유형의 값은 지정된 목록에 열거되어 있는 사용 가능한 값입니다. 예를 들어 align 속성에 사용 가능한 값은 center, justify, left 및 right입니다.	코드를 생성하거나 XHTML을 정리할 때 코드에서 열거된 유형 값을 소문자로 강제로 설정합니다.
모든 script 및 style 요소에는 type 속성이 포함되어야 합니다. language 속성이 사용되지 않는 HTML 4 이후로는 script 요소의 type 속성을 반드시 지정해야 합니다.	XHTML을 정리할 때, 자동으로 생성한 코드에서 script 요소의 type 및 language 속성을 설정하고 style 요소의 type 속성을 설정합니다.
모든 img 및 area 요소에는 alt 속성이 설정되어야 합니다.	XHTML을 정리할 때, 자동으로 생성한 코드에서 이러한 속성을 설정하고 찾을 수 없는 alt 속성을 보고합니다.

정규식

정규식은 텍스트에서의 문자 결합을 설명하는 패턴입니다. 코드 검색에서 정규식을 사용하면 “var”로 시작되는 행이나 숫자가 포함된 속성 값 등의 개념을 쉽게 정의할 수 있습니다.

다음 표는 정규식에 사용하는 특수 문자, 의미 및 사용 예제입니다. 표의 특수 문자 중 하나를 포함하고 있는 텍스트를 검색하려면 앞에 백슬래시 기호를 넣어서 이스케이프해야 합니다. 예를 들어 some conditions apply*라는 구에서 실제 별표를 검색하려면 검색 패턴은 apply\*와 같아야 합니다. 별표 앞에 백슬래시를 넣지 않으면 “apply” 뒤에 별표가 붙은 단어뿐 아니라 “apply”가 포함된 모든 단어("apply”, “applyy”, “applyyy” 등)가 검색됩니다.

문자	일치	예제
^	입력이나 행의 시작	^T는 “This good earth”의 “T”는 찾지만 “Uncle Tom’s Cabin”에서는 찾지 않습니다.
$	입력 또는 행의 끝	h$는 "teach”의 “h”는 찾지만 “teacher”에서는 찾지 않습니다.
*	앞의 문자가 0개 이상	um*는 “rum”의 “um”, “yummy”의 “umm”, “huge”의 “u”를 찾습니다.
+	앞의 문자가 1개 이상	um+는 “rum”의 “um”과 “yummy”의 “umm”은 찾지만 “huge”에서는 찾지 않습니다.
?	앞의 문자가 최대 한 개(즉, 앞의 문자가 선택적이라는 의미)	st?on은 “Johnson”의 “son”과 “Johnston”의 “ston”은 찾지만 “Appleton” 또는 “tension”에서는 찾지 않습니다.
.	새 행을 제외한 모든 단일 문자	.an은 “bran muffins can be tasty”의 “ran”과 “can”을 찾습니다.
x\|y	x 또는 y	FF0000\|0000FF는 bgcolor=”#FF0000”의 “FF0000”과 font color=”#0000FF”의 “0000FF”를 찾습니다.
{n}	앞의 문자가 정확하게 n개	o{2}는 “loom”의 “oo”, “mooooo”의 처음 두 개의 o를 찾으며 “money”에서는 찾지 않습니다.
{n,m}	앞의 문자가 최소 n개, 최대 m개	F{2,4}는 “#FF0000”의 “FF”, #FFFFFF의 처음 4개의 F를 찾습니다.
[abc]	괄호에 들어 있는 문자 중 하나. 하이픈을 사용하여 문자 범위를 지정할 수도 있습니다. 예를 들어 [a-f]는 [abcdef]와 같습니다.	[e-g]는 “bed”의 “e”, “folly”의 “f”, “guard”의 ”g”를 찾습니다.
[^abc]	괄호에 들어 있지 않은 모든 문자. 하이픈을 사용하여 문자 범위를 지정할 수도 있습니다. 예를 들어 [^a-f]는 [^abcdef]와 같습니다.	[^aeiou]는 “orange”, “book”, “eek!”에서 처음에 나오는 “r”, “b”, “k”를 찾습니다.
\b	경계 단어(스페이스나 캐리지 리턴 등)	\bb는 “book”의 “b”를 찾지만 “goober” 또는 “snob”에서는 아무것도 찾지 않습니다.
\B	경계 단어 이외의 문자	\Bb는 “goober”의 “b”는 찾지만 “book”에서는 아무것도 찾지 않습니다.
\d	임의의 숫자 문자. [0-9]와 같습니다.	\d는 “C3PO”의 “3”, “apartment 2G”의 “2”를 찾습니다.
\D	임의의 숫자가 아닌 문자. [^0-9]와 같습니다.	\D는 “900S”의 “S”, “Q45”의 “Q”를 찾습니다.
\f	폼 피드
\n	라인 피드
\r	캐리지 리턴
\s	스페이스, 탭, 폼 피드 또는 라인 피드 등의 임의의 공백 문자 하나	\sbook은 “blue book”의 ”book”을 찾지만 “notebook”에서는 아무것도 찾지 않습니다.
\S	공백 문자가 아닌 임의의 문자 하나	\Sbook은 “notebook”의 “book”을 찾지만 “blue book”에서는 아무것도 찾지 않습니다.
\t	탭.
\w	영숫자 문자(밑줄도 포함됨). [A-Za-z0-9_]와 같습니다.	b\w*는 “the barking dog”의 “barking”, “the big black dog”의 “big”과 “black”을 찾습니다.
\W	영숫자가 아닌 임의의 문자. [^A-Za-z0-9_]와 같습니다.	\W는 “Jake&Mattie”의 “&”, “100%”의 “%”를 찾습니다.
Control+Enter나 Shift+Enter(Windows) 또는 Control+Return이나 Shift+Return이나 Command+Return(Macintosh)	리턴 문자. 정규식을 사용하지 않는 경우 이 문자를 검색할 때는 [공백 차이 무시] 옵션의 선택을 해제해야 합니다. 이것은 특수 문자를 검색하는 것이며 행 분리 표기를 검색하는 것은 아닙니다. 예를 들어 <br> 태그나 <p> 태그는 검색하지 않습니다. 디자인 뷰에서 Return 문자는 행 분리가 아닌 공백으로 표시됩니다.

정규식에서 나중에 참조될 항목은 괄호를 사용하여 그룹화합니다. 그런 다음 [대체] 필드에 $1, $2, $3 등을 사용하여 괄호로 묶인 첫 번째, 두 번째, 세 번째 및 이후 그룹을 참조합니다.

참고:

검색 전에 정규식에서 괄호로 묶은 그룹을 [검색] 상자에서 참조하려면 $1, $2, $3 대신 \1, \2, \3 등을 사용합니다.

예를 들어 (\d+)\/(\d+)\/(\d+)를 검색하여 $2/$1/$3으로 바꾸면 슬래시로 구분된 날짜의 월과 일을 서로 바꿀 수 있습니다. 즉, 미국식 날짜 형식을 유럽식 날짜 형식으로 변환하거나 그 반대로 변환할 수 있습니다.

서버 비헤이비어 코드

동적 페이지를 개발할 때 [서버 비헤이비어] 패널에서 서버 비헤이비어를 선택하면 Dreamweaver에서는 서버 비헤이비어가 작동하도록 페이지에 하나 이상의 코드 블록을 삽입합니다.

코드 블록 내의 코드를 수동으로 변경하면 [바인딩] 및 [서버 비헤이비어] 등의 패널을 사용하여 서버 비헤이비어를 편집할 수 없게 됩니다. Dreamweaver에서는 페이지 코드에서 특정 패턴을 찾아 서버 비헤이비어를 인식하고 이를 [서버 비헤이비어] 패널에 표시합니다. 따라서 코드 블록의 코드를 어떤 식으로든 변경하면 Dreamweaver에서는 더 이상 서버 비헤이비어를 찾아 [서버 비헤이비어] 패널에 표시할 수 없게 됩니다. 그러나 서버 비헤이비어는 페이지에 그대로 남아 있으며 Dreamweaver의 코드 작성 환경에서 편집할 수 있습니다.

Dreamweaver에서의 코딩 정보

Dreamweaver에서 지원되는 프로그래밍 언어

자동 코드 수정

XHTML 코드

정규식

서버 비헤이비어 코드

유사 검색

쉽고 빠르게 지원 받기

커뮤니티에 질문하기

문의