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의 왕복 HTML 기능을 사용하면 텍스트 기반 HTML 편집기와 Dreamweaver 사이에서 문서의 원본 HTML 소스 코드의 콘텐츠와 구조에 거의 영향을 주지 않고 문서를 이동할 수 있습니다. 이 기능은 다음을 포함합니다.
타사 텍스트 편집기를 사용하여 현재 문서를 편집할 수 있습니다.
기본적으로 Dreamweaver는 코드 재작성 옵션을 활성화하지 않는 한 코드가 잘못된 경우에도 다른 HTML 편집기에서 만들거나 편집한 코드를 변경하지 않습니다.
Dreamweaver는 XML 태그를 포함하여 인식하지 못하는 태그를 판단할 기준이 없기 때문에 변경하지 않습니다. 인식하지 못하는 태그가 다른 태그와 겹치는 경우 (예: <MyNewTag><em>text</MyNewTag></em>)) Dreamweaver는 이를 오류로 표시하지만 코드를 다시 작성하지 않습니다.
선택적으로 Dreamweaver가 코드 보기에서 잘못된 코드를 노란색으로 강조 표시하도록 설정할 수 있습니다. 강조 표시된 섹션을 선택하면 속성 관리자에서 오류를 수정하는 방법에 대한 정보를 표시합니다.
XHTML 코드
Dreamweaver는 새로운 XHTML 코드를 생성하고 기존 XHTML 코드를 대부분의 XHTML 요구 사항을 충족하는 방식으로 정리합니다. 남은 몇 가지 XHTML 요구 사항을 충족하는 데 필요한 도구도 제공됩니다.
일부 요구 사항은 다양한 버전의 HTML에서도 필요합니다.
다음 표에서는 Dreamweaver가 자동으로 충족하는 XHTML 요구 사항에 대해 설명합니다.
XHTML 요구 사항 |
Dreamweaver에서 수행되는 작업 |
|---|---|
루트 요소 이전에 문서에 DOCTYPE 선언이 있어야 하며 선언은 XHTML의 세 가지 문서 유형 정의(DTD) 파일 (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 네임스페이스를 지정해야 합니다. |
다음과 같이 html 요소에 namespace 속성을 추가합니다: <html xmlns="http://www.w3.org/1999/xhtml"> |
표준 문서에는 head, title, body 구조적 요소가 있어야 합니다. 프레임셋 문서에는 head, title, frameset 구조적 요소가 있어야 합니다. |
표준 문서에서는 head, title, body 요소를 포함합니다. 프레임셋 문서에서는 head, title, frameset 요소를 포함합니다. |
문서에 있는 모든 요소는 다음과 같이 적절하게 중첩되어야 합니다. <p>이것은 잘못된 예입니다.</p></i> <p>이것은 올바른 예입니다.</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을 정리할 때 속성 값 주위에 따옴표를 배치합니다. |
다음 요소들은 name 속성뿐만 아니라 id 속성도 있어야 합니다: a, applet, form, frame, iframe, img, 및 map. 예를 들어 <a name="intro">Introduction</a>는 유효하지 않으며, 올바른 형식은 <a id="intro">Introduction</a> 또는 <a id="section1" name="intro"> Introduction</a>입니다. |
Dreamweaver가 생성하는 코드와 XHTML을 정리할 때 속성 관리자에서 name 속성이 설정될 때마다 name 및 id 속성을 동일한 값으로 설정합니다. |
열거 유형의 값을 갖는 속성의 경우 값은 소문자여야 합니다. 열거 유형 값은 허용된 값의 지정된 목록에서 나온 값입니다. 예를 들어 align 속성에는 다음과 같은 허용 값이 있습니다: center, justify, left, 및 right. |
생성하는 코드와 XHTML을 정리할 때 열거 유형 값을 강제로 소문자로 변환합니다. |
모든 스크립트 및 스타일 요소에는 type 속성이 있어야 합니다. (script 요소의 type 속성은 language 속성이 더 이상 사용되지 않게 된 HTML 4부터 필수가 되었습니다.) |
script 요소의 type 및 language 속성과 style 요소의 type 속성을 생성하는 코드와 XHTML을 정리할 때 설정합니다. |
모든 img 및 area 요소에는 alt 속성이 있어야 합니다. |
생성하는 코드에서 이러한 속성을 설정하고, XHTML을 정리할 때 누락된 alt 속성을 보고서에 표시합니다. |
정규식
정규 표현식은 텍스트 내 문자 조합을 설명하는 패턴입니다. 코드 검색에서 "var"로 시작하는 줄이나 숫자가 포함된 속성 값 같은 개념을 설명하는 데 도움이 되도록 사용하십시오.
다음 표는 정규 표현식의 특수 문자와 의미, 사용 예를 나열합니다. 표에 있는 특수 문자 중 하나가 포함된 텍스트를 검색하려면 앞에 백슬래시를 붙여 특수 문자를 이스케이프하십시오. 예를 들어, some conditions apply* 구문에서 실제 별표를 검색하려면 검색 패턴을 다음과 같이 사용할 수 있습니다: apply\*. 별표를 이스케이프하지 않으면 별표가 뒤에 오는 것만이 아니라 "apply"의 모든 발생 횟수("appl", "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에서 처음 네 개의 F와 일치합니다 |
[abc] |
대괄호 안에 포함된 문자 중 하나. 하이픈으로 문자 범위를 지정하십시오(예: [a-f]는 [abcdef]와 같음). |
[e-g]는 "bed"에서 "e", "folly"에서 "f", "guard"에서 "g"와 일치합니다 |
[^abc] |
괄호에 들어 있지 않은 모든 문자. 하이픈으로 문자 범위를 지정하십시오(예: [^a-f]는 [^abcdef]와 같음). |
[^aeiou]는 처음에 "orange"의 "r", "book"의 "b", "eek!"의 "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의 코딩 환경에서 편집할 수 있습니다.
