- 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를 사용하여 양식 개발
- 애플리케이션의 시각적 구성
- 웹 사이트 테스트, 미리보기 및 게시
- 문제 해결
문서에서 내용을 표시하기 위한 조건을 설정할 때 Dreamweaver에서 템플릿의 옵션 영역을 사용합니다.
옵션 영역은 사용자가 템플릿 기반 문서에서 표시하거나 숨기도록 설정할 수 있는 템플릿의 영역입니다. 문서에 내용을 표시하기 위한 조건을 설정하려면 옵션 영역을 사용합니다.
옵션 영역을 삽입할 때 템플릿 매개 변수에 특정 값을 설정하거나 템플릿 영역에 조건문(If...else문)을 정의할 수 있습니다. 단순한 true/false 연산을 사용하거나 더 복잡한 조건문 및 조건식을 정의합니다. 필요한 경우 나중에 조건 영역을 수정할 수 있습니다. 템플릿 사용자는 정의된 조건에 따라 자신이 만드는 템플릿 기반 문서에서 매개 변수를 편집하고 옵션 영역의 표시 여부를 제어할 수 있습니다.
여러 옵션 영역을 이름이 있는 매개 변수에 링크할 수 있습니다. 템플릿 기반 문서에서는 두 영역 모두를 한 단위로 표시하거나 숨길 수 있습니다. 예를 들어 판매 상품에 대한 “재고 정리” 이미지와 판매 가격 텍스트 영역을 표시할 수 있습니다.
옵션 영역 삽입
템플릿 기반 문서에서 내용의 표시 또는 숨김 여부를 제어하려면 옵션 영역을 사용합니다. 옵션 영역에는 다음과 같은 두 가지 유형이 있습니다.
- 편집 불가능 옵션 영역에서는 템플릿 사용자가 내용은 편집하지 못하더라도 특별히 표시된 영역을 표시하거나 숨길 수 있습니다.
옵션 영역의 템플릿 탭 앞에는 if라는 단어가 표시됩니다. 템플릿 사용자는 템플릿에 설정된 조건에 따라 자신이 만드는 페이지에서 영역의 표시 여부를 정의할 수 있습니다.
- 편집 가능 옵션 영역에서는 템플릿 사용자가 영역의 표시 여부를 설정하고 영역의 내용을 편집할 수 있습니다.
예를 들어 옵션 영역에 이미지나 텍스트가 포함된 경우 템플릿 사용자는 해당 내용의 표시 여부를 설정할 수 있을 뿐만 아니라 필요할 때 내용을 편집할 수도 있습니다. 편집 가능 영역은 조건문에 의해 제어됩니다.
편집 불가능 옵션 영역 삽입
-
문서 창에서 옵션 영역으로 설정할 요소를 선택합니다.
-
다음 중 하나를 수행합니다.
[삽입] > [템플릿] > [옵션 영역]을 선택합니다.
[삽입] 패널 [일반] 범주의 드롭다운 목록에서 [템플릿]을 클릭한 후, [옵션 영역]을 선택합니다.
-
옵션 영역의 이름을 입력하고 [고급] 탭을 클릭하여 옵션 영역에 값을 설정한 다음 [확인]을 클릭합니다.
편집 가능 옵션 영역 삽입
-
문서 창에서 옵션 영역을 삽입할 위치로 삽입 포인터를 가져갑니다.참고:
편집 가능 옵션 영역을 만들기 위해 선택 영역을 래핑할 수는 없습니다. 먼저 영역을 삽입한 다음 영역에 내용을 삽입합니다.
-
다음 중 하나를 수행합니다.
[삽입] > [템플릿] > [편집 가능 옵션 영역]을 선택합니다.
[삽입] 패널의 [템플릿] 범주에서 [편집 가능 옵션 영역]을 선택합니다.
-
옵션 영역의 이름을 입력하고 [고급] 탭을 클릭하여 옵션 영역에 값을 설정한 다음 [확인]을 클릭합니다.
옵션 영역의 값 설정
템플릿에 옵션 영역을 삽입한 후 옵션 영역 설정을 편집할 수 있습니다. 예를 들어 내용에 대한 표시/숨김 설정 기본값을 변경하거나, 기존 옵션 영역에 매개 변수를 링크하거나, 템플릿 표현식을 수정할 수 있습니다.
템플릿 매개 변수를 만들고 템플릿 영역에 대한 조건문(If...else 문)을 정의합니다. 단순한 true/false 연산을 사용하거나 더 복잡한 조건문 및 조건식을 정의할 수 있습니다.
[고급] 탭에서는 여러 옵션 영역을 이름이 있는 매개 변수에 링크할 수 있습니다. 템플릿 기반 문서에서는 두 영역 모두를 한 단위로 표시하거나 숨길 수 있습니다. 예를 들어 판매 상품에 대한 “재고 정리” 이미지와 판매 가격 텍스트 영역을 표시할 수 있습니다.
[고급] 탭을 사용하여 옵션 영역의 값을 평가하고 해당 값에 따라 옵션 영역을 표시하거나 숨기는 템플릿 표현식을 작성할 수도 있습니다.
-
문서 창에서 다음 중 하나를 수행합니다.
디자인 뷰에서 수정할 옵션 영역의 템플릿 탭을 클릭합니다.
디자인 뷰에서 템플릿 영역으로 삽입 포인터를 가져간 다음 문서 창 아래쪽의 태그 선택기에서 템플릿 태그 <mmtemplate:if>를 선택합니다.
코드 보기에서 수정할 템플릿 영역의 주석 태그를 클릭합니다.
-
속성 관리자([윈도우] > [속성])에서 [편집]을 클릭합니다.
-
[기본] 탭에서 [이름] 상자에 매개 변수의 이름을 입력합니다.
-
선택한 영역이 문서에 표시되도록 설정하려면 [기본으로 보기] 체크 상자를 선택합니다. 기본값을 false로 설정하려면 이 체크 상자의 선택을 취소합니다.
참고:매개 변수에 다른 값을 설정하려면 코드 보기에서 문서의 head 섹션에 있는 매개 변수를 찾아 값을 편집합니다.
-
(선택 사항) [고급] 탭을 클릭하고 다음 옵션을 설정합니다.
옵션 영역 매개 변수에 링크를 만들려면 [고급] 탭을 클릭하고 [매개 변수 사용]을 선택한 다음, 팝업 메뉴에서 선택한 내용을 링크할 기존 매개 변수를 선택합니다.
템플릿 표현식을 작성하여 옵션 영역의 표시를 제어하려면 [고급] 탭을 클릭하고 [표현식 입력]을 선택한 후, 상자에 표현식을 입력합니다.
참고:Dreamweaver에서는 사용자가 입력하는 텍스트 양쪽에 큰따옴표가 삽입됩니다.
-
[확인]을 클릭합니다.
[옵션 영역] 템플릿 오브젝트를 사용하는 경우에는 Dreamweaver에서 자동으로 코드에 템플릿 주석을 삽입합니다. 템플릿 매개 변수는 다음 예제에서처럼 head 섹션에서 정의합니다.<!-- TemplateParam name="departmentImage" type="boolean" value="true" -->
옵션 영역을 삽입할 위치에는 아래 코드와 유사한 코드가 나타납니다.
<!-- TemplateParam name="departmentImage" type="boolean" value="true" -->
<!-- TemplateBeginIf cond="departmentImage" --> <p><img src="/images/airfare_on.gif" width="85" height="22"> </p> <!-- TemplateEndIf -->
템플릿 기반 문서의 템플릿 매개 변수에 액세스하여 이를 편집할 수 있습니다.