- 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통해 웹 사이트 및 웹 제품을 시각, 청각 또는 기타 장애가 있거나 거동이 불편한 사람들이 사용할 수 있도록 합니다.
Dreamweaver CC 이상 버전에서 사용자 인터페이스가 간소화되었습니다. 따라서 이 문서에 설명된 옵션 중에 Dreamweaver CC 이상 버전에 없는 옵션이 있을 수 있습니다. 자세한 내용은 이 문서를 참조하십시오.
액세스 가능한 내용 정보
액세스 가능성이란 웹 사이트 및 웹 제품을 시각, 청각 또는 기타 장애가 있거나 거동이 불편한 사람들이 사용할 수 있게 하는 것을 의미합니다. 소프트웨어 제품과 웹 사이트에 사용되는 액세스 가능성 기능으로는 화면 판독기 지원, 그래픽을 대신할 텍스트, 키보드 단축키, 디스플레이 색상의 고대비 변경 등이 있습니다. Dreamweaver에서는 액세스 가능성을 지원하는 데 사용되는 도구 및 액세스 가능성을 지원하는 내용을 작성하는 데 사용되는 도구를 제공합니다.
액세스 가능성 기능을 사용해야 하는 Dreamweaver 개발자를 위해 응용 프로그램에서는 화면 판독기 지원, 키보드 내비게이션 및 운영 체제의 내게 필요한 옵션 지원을 제공합니다.
액세스할 수 있는 내용을 만들어야 하는 웹 디자이너를 위해 Dreamweaver에서는 화면 판독기에 유용한 내용이 들어 있고 정부 지침에 맞는 액세스 가능성 기능 페이지를 만들 수 있도록 지원합니다. 예를 들어 페이지 요소를 삽입할 때 이미지를 대신할 텍스트와 같은 액세스 가능성 속성을 입력하라는 메시지가 대화 상자에 표시됩니다. 이미지가 페이지에 표시되면 시각 장애가 있는 사용자를 위해 화면 판독기가 이미지 설명을 읽어 줍니다.
두 가지 중요한 액세스 가능성 제안에 대한 자세한 내용은 World Wide Web Consortium Web Accessibility Initiative(www.w3.org/wai) 및 미국 Federal Rehabilitation Act, Section 508(www.section508.gov)을 참조하십시오.
Japan Industry Standard 액세스 가능성 지침에 대한 자세한 내용은 JIS X 8341-3(www.jisc.go.jp)을 참조하십시오.
개발 과정을 자동화할 수 있는 제작 도구는 없습니다. 액세스 가능성을 지원하는 웹 사이트를 디자인하려면 액세스 가능성 요구 사항을 파악하고 장애가 있는 사용자가 웹 페이지와 상호 작용하는 방식을 지속적으로 결정해야 합니다. 액세스 가능성을 지원하는 웹 사이트를 만드는 가장 좋은 방법은 신중하게 계획, 개발, 테스트 및 평가 단계를 거치는 것입니다.
Dreamweaver에서 화면 판독기 사용
화면 판독기는 컴퓨터 화면에 표시되는 텍스트를 읽어 줍니다. 또한 응용 프로그램의 버튼 레이블이나 이미지 설명과 같이 제작 과정에서 액세스 가능성 태그나 속성에 제공되는 비텍스트 정보를 읽어 줍니다.
Dreamweaver 디자이너는 웹 페이지 작성에 도움이 되도록 화면 판독기를 사용할 수 있습니다. 화면 판독기는 문서 창의 왼쪽 위부터 읽기 시작합니다.
Dreamweaver에서는 Freedom Scientific(www.freedomscientific.com)의 JAWS for Windows와 GW Micro(www.gwmicro.com)의 Window-Eyes 화면 판독기를 지원합니다.
운영 체제의 내게 필요한 옵션 기능 지원
Dreamweaver에서는 Windows 및 Macintosh 운영 체제 모두에서 액세스 가능성 기능을 지원합니다. 예를 들어 Macintosh에서는 [Universal Access 환경 설정] 대화 상자([Apple] > [시스템 환경 설정])에서 시각적 환경을 설정합니다. 설정 값은 Dreamweaver 작업 영역에 반영됩니다.
Windows 운영 체제의 고대비 설정도 지원합니다. 이 옵션은 Windows 제어판을 통해 활성화할 수 있으며 Dreamweaver에 다음과 같은 영향을 줍니다.
대화 상자와 패널에 시스템 색상 설정이 사용됩니다. 예를 들어 색상을 [검정 바탕에 흰색]으로 설정하면 모든 Dreamweaver 대화 상자와 패널이 흰 전경색과 검정 배경색으로 표시됩니다.
코드 보기에 시스템 및 창 텍스트 색상이 적용됩니다. 예를 들어 시스템 색상을 [검정 바탕에 흰색]으로 설정한 다음 [편집] > [환경 설정] > [코드 색상 표시]에서 텍스트 색상을 변경하면 Dreamweaver에서 이러한 색상 설정을 무시하고 코드 텍스트를 흰 전경색과 검정 배경색으로 표시합니다.
디자인 뷰에는 [수정] > [페이지 속성]에서 설정한 배경색과 텍스트 색상이 사용되므로 디자인하는 페이지에 브라우저와 같은 색상이 렌더링됩니다.
액세스 가능성을 지원하는 페이지 디자인을 위한 작업 영역 최적화
액세스 가능성이 지원되는 페이지를 만들려면 모든 사용자가 내용에 액세스할 수 있도록 페이지의 오브젝트에 레이블 및 설명 등의 정보를 연결해야 합니다.
이렇게 하려면 오브젝트를 삽입할 때 Dreamweaver에서 액세스 가능성 정보를 입력하라는 프롬프트를 표시하도록 각 오브젝트에 대한 [액세스 가능성] 대화 상자를 활성화합니다. [환경 설정]의 [액세스 가능성] 범주에서 오브젝트에 대한 대화 상자를 활성화할 수 있습니다.
-
[편집] > [환경 설정](Windows) 또는 [Dreamweaver] > [환경 설정](Macintosh)을 선택합니다.
-
왼쪽의 [범주] 목록에서 [액세스 가능성]을 선택하고 오브젝트를 선택한 후 다음 옵션을 선택하고 [확인]을 클릭합니다.
삽입할 때 속성 표시
[액세스 가능성] 대화 상자를 활성화할 오브젝트를 선택합니다. 예를 들어 양식 오브젝트, 프레임, 미디어 및 이미지를 선택합니다.
열 때 패널에 포커스 유지
화면 판독기에서 액세스할 수 있도록 포커스를 패널에 유지합니다. 이 옵션을 선택하지 않으면 사용자가 패널을 열 때 포커스가 디자인 뷰 또는 코드 보기에 유지됩니다.
오프스크린 렌더링
화면 판독기를 사용할 때 이 옵션을 선택합니다.
참고:액세스 가능성 속성은 새 표를 삽입할 때 [표 삽입] 대화 상자에 표시됩니다.
키보드를 사용하여 Dreamweaver 탐색
마우스를 사용하지 않고 키보드를 사용하여 패널, 관리자, 대화 상자, 프레임 및 표를 탐색할 수 있습니다.
Windows에서만 Tab 키 및 화살표 키를 사용할 수 있습니다.
패널 탐색
-
문서 창에서 Ctrl+F6를 눌러 패널로 포커스를 이동합니다.
현재 포커스가 있는 패널의 제목 주위에는 점선이 나타납니다. 화면 판독기는 포커스가 있는 패널의 제목 표시줄을 읽습니다.
-
다시 Ctrl+F6를 눌러 작업할 패널로 포커스를 이동합니다. Ctrl+Shift+F6를 누르면 포커스가 이전 패널로 돌아갑니다.
-
작업할 패널이 열려 있지 않으면 [윈도우] 메뉴의 키보드 단축키를 사용하여 해당 패널을 표시한 다음 Ctrl+F6를 누릅니다.
작업할 패널이 열려 있지만 확장되어 있지 않은 경우 포커스를 패널 제목 표시줄에 둔 다음 스페이스바를 누릅니다. 스페이스바를 다시 누르면 패널이 축소됩니다.
-
Tab 키를 눌러 패널에 있는 옵션 간에 이동합니다.
-
필요에 따라 화살표 키를 사용합니다.
옵션에 선택 항목이 있는 경우 화살표 키를 사용하여 항목 사이를 이동한 다음 스페이스바를 눌러 선택합니다.
패널 그룹에 다른 패널을 여는 탭이 있는 경우 해당 탭에 포커스를 둔 다음 왼쪽 또는 오른쪽 화살표 키를 사용하여 다른 탭을 엽니다. 새 탭이 열리면 Tab 키를 눌러 해당 패널의 옵션 간에 이동할 수 있습니다.
속성 관리자 탐색
-
속성 관리자가 표시되지 않은 경우 Ctrl+F3을 눌러 표시합니다.
-
포커스가 속성 관리자로 이동할 때까지 Ctrl+F6(Windows만 해당)을 누릅니다.
-
Tab 키를 사용하여 속성 관리자 옵션 사이를 이동합니다.
-
필요에 따라 화살표 키를 사용하여 옵션 선택 항목 사이를 이동합니다.
-
Ctrl+아래 화살표/위쪽 화살표(Windows) 또는 Command+아래 화살표/위쪽 화살표(Macintosh)를 눌러 필요에 따라 속성 관리자의 확장 영역을 열고 닫거나, 오른쪽 아래의 확장 화살표에 포커스를 두고 스페이스바를 누릅니다.참고:
키보드 포커스는 작업 확장 및 축소를 위해 패널 제목이 아닌 속성 관리자 내에 있어야 합니다.
대화 상자 탐색
-
Tab 키를 눌러 대화 상자의 옵션 간에 이동합니다.
-
화살표 키를 사용하여 옵션의 선택 항목 간에 이동합니다.
-
대화 상자에 [범주] 목록이 있는 경우 Ctrl+Tab(Windows)을 눌러 포커스를 [범주] 목록으로 이동한 다음 화살표 키를 사용하여 목록에서 위아래로 이동합니다.
-
Ctrl+Tab을 다시 눌러 범주 옵션으로 이동합니다.
-
Enter 키를 눌러 대화 상자를 닫습니다.
프레임 탐색
-
프레임이 포함된 문서에서는 화살표 키를 사용하여 포커스를 프레임으로 이동할 수 있습니다.
프레임 선택
-
Alt+아래쪽 화살표를 눌러 삽입 포인터를 문서 창에 둡니다.
-
Alt+위쪽 화살표를 눌러 현재 포커스가 있는 프레임을 선택합니다.
-
Alt 키를 누른 상태에서 위쪽 화살표 키를 눌러 해당 프레임세트로 이동하며, 중첩된 프레임세트가 있는 경우에는 계속해서 부모 프레임세트로 이동합니다.
-
Alt+아래쪽 화살표를 눌러 포커스를 자식 프레임세트 또는 프레임세트 내의 프레임으로 이동합니다.
-
한 프레임에 포커스를 두고 Alt+왼쪽 화살표 또는 Alt+오른쪽 화살표를 누르면 프레임 사이를 이동할 수 있습니다.
표 탐색
-
필요에 따라 화살표 키나 Tab 키를 눌러 표의 다른 셀로 이동합니다.참고:
맨 오른쪽 셀에서 Tab 키를 누르면 표에 행이 하나 추가됩니다.
-
셀을 선택하려면 삽입 포인터가 셀에 놓인 상태에서 Ctrl+A(Windows만 해당)를 누릅니다.
-
표 전체를 선택하려면 삽입 포인터가 셀 안에 있는 경우 Ctrl+A를 두 번 누르고, 셀이 선택되어 있는 경우에는 한 번 누릅니다.
-
표에서 벗어나려면 삽입 포인터가 셀 안에 있는 경우 Ctrl+A를 세 번 누르고, 셀이 선택되어 있는 경우에는 두 번 누르고, 표가 선택되어 있는 경우에는 한 번 누른 다음 위쪽, 왼쪽 또는 오른쪽 화살표 키를 누릅니다.