[도구] > [글꼴 관리]를 선택합니다.
- 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에서 글꼴 조합을 추가하거나 수정합니다.
2022년 7월 1일부터 Adobe Edge 웹 글꼴은 Dreamweaver 21.2 및 이전 버전에서 사용이 중단됩니다. 웹 사이트에서 Edge 웹 글꼴을 사용 중인 경우 Adobe Fonts 또는 기타 선호하는 글꼴을 사용하여 변경할 수 있습니다.
글꼴 조합은 브라우저에 웹 페이지의 텍스트가 표시되는 모양을 지정합니다. 브라우저는 사용자 시스템에 설치된 글꼴 조합에서 첫 번째 글꼴을 사용합니다. 글꼴 조합에 들어 있는 글꼴 중 설치되어 있는 글꼴이 하나도 없는 경우에는 사용자의 브라우저 환경 설정에 지정된 텍스트가 표시됩니다.
글꼴 목록에 Adobe Edge Web Fonts 추가
웹 페이지에서 Adobe Edge Web Fonts를 사용할 수 있습니다. 페이지에서 Edge 글꼴이 사용되는 경우 JavaScript 파일을 참조하기 위해 추가적인 스크립트 태그가 추가됩니다. 이 파일은 Creative Cloud 서버에서 브라우저의 캐시로 직접 글꼴을 다운로드합니다.
페이지를 표시할 때 사용자 컴퓨터에서 글꼴을 사용할 수 있어도 Creative Cloud 서버에서 글꼴을 다운로드합니다.
예를 들어 “Abel” 글꼴만 사용하는 스크립트 태그의 형식은 다음과 같습니다.
<!--다음 스크립트 태그는 웹 페이지 내에서 사용할 Adobe Edge Web Fonts 서버의 글꼴을 다운로드합니다. 이 태그를 수정하지 않는 것이 좋습니다.-->
<script>var adobewebfontsappname ="dreamweaver"</script>
<script src="http://use.edgefonts.net/abel:n4:default.js" type="text/javascript"></script>
-
Adobe Edge 글꼴 탭은 글꼴 목록에 추가할 수 있는 Adobe Edge Web Fonts를 모두 표시합니다.
-
이 목록에서 글꼴을 찾아 글꼴 목록에 추가하려면 다음을 수행하십시오.
- 글꼴 목록에 추가하려는 글꼴을 클릭합니다.
- 글꼴을 선택 해제하려면 글꼴을 다시 클릭합니다.
- 필터를 사용하여 선호하는 글꼴을 선별합니다. 예를 들어 Serif 유형의 글꼴을 선별하려면 을 클릭합니다.
- 여러 필터를 사용할 수도 있습니다. 예를 들어 문단에 사용할 수 있는 Serif 유형의 필터를 선별하려면 및 를 클릭합니다.
- 글꼴을 이름별로 검색하려면 검색 상자에 이름을 입력합니다.
-
를 클릭하여 선택한 글꼴을 필터링합니다.
-
[완료]를 클릭합니다.
아무 장소에서나 [글꼴] 목록을 엽니다. 예를 들어 [속성] 패널의 CSS 섹션에 있는 글꼴 목록을 사용할 수 있습니다.
글꼴 목록에서 Dreamweaver 글꼴 스택은 웹 글꼴 앞에 열거되어 있습니다. 목록을 아래로 스크롤하여 선택한 글꼴을 찾습니다.
글꼴 목록에 로컬 웹 글꼴 추가
Dreamweaver에서 컴퓨터의 웹 글꼴을 글꼴 목록에 추가할 수 있습니다. 추가한 글꼴은 Dreamweaver의 모든 글꼴 메뉴에 반영됩니다. EOT, WOFF, TTF, SVG 유형의 글꼴이 지원됩니다.
-
[도구] > [글꼴 관리]를 선택합니다.
-
글꼴 관리 대화 상자에서 [로컬 웹 글꼴]을 선택합니다.
-
추가하려는 글꼴 유형에 해당하는 검색 버튼을 클릭합니다. 예를 들어 글꼴이 EOT 포맷일 경우 EOT 글꼴에 해당하는 검색 버튼을 클릭합니다.
-
글꼴이 설치되어 있는 컴퓨터에서 해당 위치로 이동합니다. 해당 파일을 선택하여 엽니다. 이 위치에 글꼴에 대한 다른 포맷이 있는 경우 이들 포맷이 대화 상자에 자동으로 추가됩니다. 글꼴 이름도 글꼴 이름에서 자동으로 선택됩니다.
-
웹 사이트에서 사용할 글꼴에 대한 사용권이 있는지 확인하는 옵션을 선택합니다.
-
[완료]를 클릭합니다.
글꼴 목록은 [로컬 웹 글꼴의 최신 목록]에 표시됩니다.
글꼴 목록에서 웹 글꼴을 삭제하려면 [로컬 글꼴의 최신 목록]에서 글꼴을 선택한 다음 [제거]를 클릭합니다.
사용자 지정 글꼴 스택 생성
글꼴 스택은 CSS 글꼴 선언에 있는 글꼴 목록입니다.
-
[도구] > [글꼴 관리]를 선택한 다음 [사용자 지정 글꼴 스택]을 선택합니다.
-
대화 상자 상단에 있는 목록에서 글꼴 조합을 선택합니다.
선택한 조합에 있는 글꼴은 대화 상자의 왼쪽에 있는 [선택 글꼴] 목록에 표시됩니다. 오른쪽에는 시스템에 설치된 사용 가능한 모든 글꼴 목록이 있습니다.
-
다음 중 하나를 수행합니다.
글꼴 조합에 글꼴을 추가하거나 글꼴 조합에서 글꼴을 제거하려면 [선택 글꼴] 목록과 [사용 가능한 글꼴] 목록 사이에 있는 화살표(<< 또는 >>) 버튼을 클릭합니다.
글꼴 조합을 추가하거나 삭제하려면 대화 상자 상단에 있는 플러스(+) 또는 마이너스(-) 버튼을 클릭합니다.
시스템에 설치되지 않은 글꼴을 추가하려면 [사용 가능한 글꼴] 목록 아래에 있는 텍스트 필드에 글꼴 이름을 입력한 다음 [<<] 버튼을 클릭하여 해당 글꼴을 글꼴 조합에 추가합니다. 예를 들어 시스템에 설치되지 않은 글꼴을 추가하는 기능은 Macintosh에서 페이지를 개발할 때 Windows 전용 글꼴을 지정하는 경우 등에 유용합니다.
목록에서 글꼴 조합을 위나 아래로 이동하려면 대화 상자 상단에 있는 화살표 버튼을 클릭합니다.
글꼴 목록에 새 조합 추가
-
[도구] > [글꼴 관리]를 선택합니다.
-
[사용 가능한 글꼴] 목록에서 글꼴을 선택한 다음 [<<] 버튼을 클릭하여 해당 글꼴을 [선택 글꼴] 목록으로 이동합니다.
-
조합에 포함될 각 글꼴마다 2단계를 반복합니다.
시스템에 설치되지 않은 글꼴을 추가하려면 [사용 가능한 글꼴] 목록 아래에 있는 텍스트 필드에 글꼴 이름을 입력한 다음 [<<] 버튼을 클릭하여 해당 글꼴을 글꼴 조합에 추가합니다. 예를 들어 시스템에 설치되지 않은 글꼴을 추가하는 기능은 Macintosh에서 페이지를 개발할 때 Windows 전용 글꼴을 지정하는 경우 등에 유용합니다.
-
특정 글꼴을 선택했으면 [사용 가능한 글꼴] 메뉴에서 일반 글꼴군을 선택하고 [<<] 버튼을 클릭하여 일반 글꼴군을 [선택 글꼴] 목록으로 이동합니다.
일반 글꼴군에는 cursive, fantasy, monospace, sans-serif 및 serif가 있습니다. [선택 글꼴] 목록에 사용자의 시스템에서 사용할 수 있는 글꼴이 하나도 없는 경우 텍스트는 일반 글꼴군과 관련된 기본 글꼴로 표시됩니다. 예를 들어 대부분의 시스템에서 monospace(고정 폭) 글꼴에 대한 기본값은 Courier입니다.
삽입한 글꼴 미리보기
디자인 뷰에서 Edge 및 웹 글꼴을 미리 볼 수 있습니다. [라이브 뷰]로 전환하거나 브라우저에서 페이지를 미리 봅니다.
파일 전체의 웹 글꼴 스크립트 태그 업데이트
여러 HTML 파일에 연결된 CSS 파일에서 글꼴을 업데이트할 경우 관련 HTML 파일의 스크립트 태그를 업데이트할지 묻는 메시지가 표시됩니다. [업데이트]를 클릭하면 모든 관련 HTML 파일의 스크립트 태그가 업데이트됩니다.
페이지의 웹 글꼴 스크립트 태그 업데이트
[도구] > [웹 글꼴 스크립트 태그 정리(현재 페이지)]를 선택하여 스크립트 태그가 반영되지 않은 웹 페이지의 모든 웹 글꼴을 업데이트할 수 있습니다.