[파일] > [페이지 속성]을 선택하거나 텍스트 [속성 관리자]의 [페이지 속성] 버튼을 클릭합니다.
마지막 업데이트 날짜
2022년 11월 28일
- 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 페이지에 대해 글꼴, 배경색, 배경 이미지 속성 등 HTML 페이지 속성과 CSS 속성을 설정하는 방법을 살펴봅니다.
[페이지 속성] 대화 상자([파일] > [페이지 속성])를 사용하면 Dreamweaver에서 만드는 각 페이지에 레이아웃 및 서식 속성을 지정할 수 있습니다. [페이지 속성] 대화 상자에서는 기본 글꼴 패밀리 및 글꼴 크기, 배경색, 여백, 링크 스타일 및 기타 여러 페이지 디자인 요소를 지정할 수 있습니다. 새로 만드는 각 페이지에 새 페이지 속성을 할당할 수 있으며 기존 페이지의 속성을 수정할 수도 있습니다. [페이지 속성] 대화 상자에서의 변경 내용은 전체 페이지에 적용됩니다.
Dreamweaver에 제공되는 두 가지 페이지 속성 수정 방법은 CSS와 HTML입니다. 배경을 설정하고 페이지 속성을 수정할 때는 CSS를 사용하는 것이 좋습니다.
참고:
선택한 페이지 속성은 활성 문서에만 적용됩니다. 페이지에 외부 CSS 스타일 시트를 사용하는 경우 이 스타일 시트를 사용하는 다른 모든 페이지가 영향을 받기 때문에 Dreamweaver에서는 스타일 시트에 설정되어 있는 태그를 덮어쓰지 않습니다.
CSS 페이지 글꼴, 배경색 및 배경 이미지 속성 설정
[페이지 속성] 대화 상자를 사용하여 글꼴, 배경색, 배경 이미지를 비롯하여 웹 페이지에 사용할 여러 기본 페이지 레이아웃 옵션을 지정합니다.
-
-
[모양(CSS)] 범주를 선택하여 해당 옵션을 설정합니다.
페이지 글꼴
웹 페이지에 사용할 기본 글꼴 패밀리를 지정합니다. Dreamweaver에서는 텍스트 요소에 특별히 다른 글꼴이 설정되어 있지 않으면 사용자가 지정하는 글꼴 패밀리를 사용합니다.
크기
웹 페이지에 사용할 기본 글꼴 크기를 지정합니다. Dreamweaver에서는 텍스트 요소에 특별히 다른 글꼴 크기가 설정되어 있지 않으면 사용자가 지정하는 글꼴 크기가 사용됩니다.
텍스트 색상
글꼴을 렌더링할 기본 색상을 지정합니다.
배경색
페이지의 배경색을 설정합니다. [배경] 색상 상자를 클릭하고 색상 피커에서 색상을 선택합니다.
배경 이미지
배경 이미지를 설정합니다. [검색] 버튼을 클릭한 다음 이미지를 찾아 선택합니다. 또는 [배경 이미지] 상자에 배경 이미지의 경로를 입력합니다.
Dreamweaver에서는 브라우저와 마찬가지로 배경 이미지가 전체 창을 채우지 않을 경우 해당 이미지를 반복해서 바둑판식으로 배열합니다. (배경 이미지를 바둑판식으로 배열하지 않으려면 CSS(겹쳐 놓기 스타일 시트)를 사용하여 이미지의 바둑판식 배열을 비활성화합니다.)
반복
페이지에 배경 이미지를 어떻게 표시할지를 지정합니다.
배경 이미지를 한 번만 표시하려면 [반복 없음] 옵션을 선택합니다.
이미지를 가로/세로 모든 방향의 바둑판식으로 배열하거나 반복하려면 [반복] 옵션을 선택합니다.
이미지를 가로 방향의 바둑판식으로 배열하려면 [x-반복] 옵션을 선택합니다.
이미지를 세로 방향의 바둑판식으로 배열하려면 [y-반복] 옵션을 선택합니다.
왼쪽 여백 및 오른쪽 여백
페이지의 왼쪽 및 오른쪽 여백의 크기를 지정합니다.
위쪽 여백 및 아래쪽 여백
페이지의 위 및 아래 여백의 크기를 지정합니다.
HTML 페이지 속성 설정
[페이지 속성] 대화 상자의 이 범주 속성을 설정하면 페이지의 CSS 서식이 아닌 HTML로 설정됩니다.
-
[파일] > [페이지 속성]을 선택하거나 텍스트 [속성 관리자]의 [페이지 속성] 버튼을 클릭합니다.
-
[모양(HTML)] 범주를 선택하여 해당 옵션을 설정합니다.
배경 이미지
배경 이미지를 설정합니다. [검색] 버튼을 클릭한 다음 이미지를 찾아 선택합니다. 또는 [배경 이미지] 상자에 배경 이미지의 경로를 입력합니다.
Dreamweaver에서는 브라우저와 마찬가지로 배경 이미지가 전체 창을 채우지 않을 경우 해당 이미지를 반복해서 바둑판식으로 배열합니다. (배경 이미지를 바둑판식으로 배열하지 않으려면 CSS(겹쳐 놓기 스타일 시트)를 사용하여 이미지의 바둑판식 배열을 비활성화합니다.)
배경
페이지의 배경색을 설정합니다. [배경] 색상 상자를 클릭하고 색상 피커에서 색상을 선택합니다.
텍스트
글꼴을 렌더링할 기본 색상을 지정합니다.
링크
링크 텍스트에 적용할 색상을 지정합니다.
방문한 링크
방문한 링크에 적용할 색상을 지정합니다.
활성 링크
마우스 또는 포인터로 링크를 클릭했을 때 적용할 색상을 지정합니다.
왼쪽 여백 및 오른쪽 여백
페이지의 왼쪽 및 오른쪽 여백의 크기를 지정합니다.
위쪽 여백 및 아래쪽 여백
페이지의 위 및 아래 여백의 크기를 지정합니다.
페이지의 제목 및 인코딩 속성 설정
[제목/인코딩 페이지 속성] 옵션을 사용하면 웹 페이지를 제작하는 데 사용되는 언어에 고유한 문서 인코딩 유형을 지정할 수 있으며 [제목/인코딩 페이지 속성] 옵션은 해당 인코딩 유형에 사용할 유니코드 표준화 양식을 지정할 수도 있습니다.
-
다음 중 하나를 수행합니다.
- [파일] > [페이지 속성] 클릭
- [윈도우] > [속성]을 클릭한 다음 텍스트 속성 관리자에서 [페이지 속성]을 클릭합니다.
-
[페이지 속성] 패널에서 [제목/인코딩]를 선택합니다. 다음과 같은 옵션을 구성할 수 있습니다.
- 제목: 문서 창과 대부분의 브라우저 창의 제목 표시줄에 표시할 페이지 제목을 지정합니다.
- 문서 형식 (DTD): 문서 유형 정의를 지정합니다. 예를 들어 팝업 메뉴에서 [XHTML 1.0 Transitional]이나 [XHTML 1.0 Strict]를 선택하면 XHTML과 호환되는 HTML 문서를 만들 수 있습니다.
- 인코딩: 문서의 문자에 사용되는 인코딩을 지정합니다. 문서 인코딩으로 [유니코드(UTF-8)]를 선택하면 UTF-8이 모든 문자를 안전하게 표시하므로 엔티티는 인코딩할 필요가 없습니다. 다른 문서 인코딩을 선택하면 일부 문자를 표시하기 위해 엔티티를 인코딩해야 할 수도 있습니다. 문자 엔티티에 대한 자세한 내용은 www.w3.org/TR/REC-html40/sgml/entities.html을 참조하십시오.
- 새로 고침: 기존 문서를 변환하거나 새 인코딩을 사용하여 다시 열 수 있습니다.
- 유니코드 표준화 양식: 문서를 인코딩으로 UTF‑8을 선택한 경우에만 활성화됩니다. 유니코드 표준화 양식에는 네 가지가 있습니다. 표준화 양식 C는 월드 와이드 웹(World Wide Web)의 문자 모델에서 가장 자주 사용되는 양식이기 때문에 가장 중요한 유니코드 표준화 양식입니다. Adobe에서는 서로 다른 세 가지 유니코드 표준화 양식을 제공합니다. 유니코드에서는 비슷하게 보이지만 서로 다른 방식으로 문서 안에 저장될 수 있는 일부 문자들이 있습니다. 예를 들어 "ë"(e-움라우트)는 하나의 문자인 "e-움라우트"를 의미하거나 "정규 라틴 e" + "움라우트 조합"이라는 두 개의 문자를 의미할 수도 있습니다. 유니코드 조합 문자는 이전 문자와 함께 사용되던 문자이므로 움라우트는 “라틴 e” 위에 표시됩니다. 이 두 양식은 시각적으로 동일하게 표기되지만 각 양식은 파일 안에 서로 다른 내용으로 저장됩니다. 표준화는 서로 다른 양식으로 저장될 수 있는 모든 문자를 동일한 양식을 사용하여 저장되도록 하는 과정입니다. 즉, 문서에 있는 모든 “ë” 문자가 하나의 “e-움라우트”나 “e” + “움라우트 조합”으로 저장되며 하나의 문서 안에 두 개의 양식으로 저장되지 않습니다. 유니코드 표준화와 사용 가능한 특정 양식에 대한 자세한 내용은 유니코드 웹 사이트(www.unicode.org/reports/tr15)를 참조하십시오.
- 유니코드 서명 포함(BOM): 문서에 BOM(Byte Order Mark)을 포함합니다. BOM은 텍스트 파일 시작 부분에 위치한 2 ~ 4 바이트이며 해당 파일을 유니코드로 규정하고 그 뒤에 따르는 바이트들의 바이트 순서를 규정합니다. UTF-8에는 바이트 순서가 없으므로 UTF-8 BOM 추가는 선택 사항입니다. UTF-16 및 UTF-32를 사용할 경우에는 필수 사항입니다.
