CSS Designer

 

 

CSS Designer
CSS Designer 패널(윈도우 > CSS Designer)은 미디어 쿼리와 함께 CSS 스타일과 파일을 “시각적”으로 생성하고 속성을 설정할 수 있는 CSS 속성 관리자입니다.

CSS Designer에서 수행한 모든 작업은 Ctrl/Cmd+Z를 사용하여 실행 취소하거나 Ctrl/Cmd+Y를 사용하여 다시 실행할 수 있습니다. 라이브 뷰에 변경 사항이 자동으로 반영되고 관련 CSS 파일도 새로 고쳐집니다. 관련 파일이 변경되었음을 알려주기 위해 해당 파일의 탭이 잠시 동안(약 8초) 강조 표시됩니다.

CSS Designer 패널(CC)
CSS Designer 패널

CSS Designer 패널은 다음과 같은 창 및 옵션으로 구성되어 있습니다.

전체 창에는 현재 문서와 관련된 모든 CSS, 미디어 쿼리 및 선택기가 나열됩니다. 필요한 CSS 규칙을 필터링하고 속성을 수정할 수 있습니다. 이 모드를 사용하여 선택기 또는 미디어 쿼리를 만들기 시작할 수도 있습니다.

이 모드는 선택에 따라 달라지지 않습니다. 페이지에서 요소를 선택하면 관련 선택기, 미디어 쿼리 또는 CSS가 CSS Designer에 강조 표시됩니다.

현재 창에는 현재 문서의 디자인 또는 라이브 뷰에서 선택된 모든 요소의 계산된 스타일이 열거됩니다. 코드 보기에서 CSS 파일에 대해 이 모드를 사용하는 경우 강조되는 해당 선택기의 모든 속성을 표시합니다.

이 모드는 컨텍스트를 인식합니다. 문서에서 선택한 요소와 연계된 선택기의 속성을 편집하려면 이 옵션을 사용합니다.

소스 창에는 문서와 관련된 모든 CSS 스타일 시트가 나열됩니다. 이 창에서는 CSS를 생성하여 문서에 첨부하거나 문서 내에 스타일을 정의할 수 있습니다.

@미디어를 선택하면 소스 창에 선택된 소스의 모든 미디어 쿼리가 나열됩니다. 특정 CSS를 선택하지 않을 경우 문서와 연계된 모든 미디어 쿼리가 이 창에 표시됩니다.

선택기를 선택하면 소스 창에 선택된 소스의 모든 선택기가 표시됩니다. 미디어 쿼리도 선택할 경우 해당 미디어 쿼리에 대한 선택기만 표시됩니다. CSS 또는 미디어 쿼리를 선택하지 않을 경우 이 창에 문서의 모든 선택기가 표시됩니다.

@미디어 창에서 전역을 선택하면 선택한 소스의 미디어 쿼리에 포함되지 않은 모든 선택기가 표시됩니다.

속성에는 지정한 선택기에 설정할 수 있는 속성이 표시됩니다. 자세한 내용은 속성 설정을 참조하십시오.

CSS Designer의 창을 축소 또는 확장하는 경우 세션 내에서 창의 크기가 기억됩니다. 소스 및 미디어 창은 크기를 다시 변경할 때까지 사용자 정의 크기를 유지합니다.

참고: 페이지 요소를 선택하면 [선택기] 창에서 가장 높은 우선권 선택기가 선택됩니다. 특정 선택기의 속성을 보려면 창에서 선택기의 이름을 클릭합니다.

[소스] 창에서 [모든 소스]를 선택하면 모든 선택기를 볼 수 있습니다. 선택한 소스의 미디어 쿼리에 속하지 않는 선택기를 보려면 [@미디어] 창에서 [전역]을 클릭합니다.

시각적 안내 도구 개요
Dreamweaver는 문서를 디자인하고 브라우저에 나타날 문서 모양을 예측하는 데 유용한 여러 가지 시각적 안내 도구를 제공합니다. 다음과 같은 작업을 수행할 수 있습니다.

문서 창을 원하는 창 크기로 맞추어 페이지에 요소가 배치되는 모양을 확인합니다.

페이지 배경의 바탕 이미지는 Adobe® Photoshop® 또는 Adobe® Fireworks® 등의 일러스트레이션 또는 이미지 편집 애플리케이션에서 만든 디자인을 복제하는 데 사용합니다.

눈금자와 안내선은 페이지 요소의 위치를 지정하고 크기를 조절할 때 정밀한 시각적 기준으로 사용합니다.

그리드는 절대 위치 요소(AP 요소)의 위치를 정확하게 지정하거나 크기를 정확하게 조절하는 데 사용합니다.

페이지의 그리드 표시는 AP 요소를 정렬하는 데 유용하며, 스냅 기능을 활성화하면 AP 요소를 이동하거나 크기를 조정할 때 AP 요소가 자동으로 가장 가까운 격자점에 스냅됩니다. 이미지, 단락 등의 오브젝트는 그리드에 스냅되지 않습니다. 스냅은 그리드가 보이는지 여부에 관계없이 작동합니다.

페이지 확대/축소
Dreamweaver에서는 문서 창에서 배율을 증가(확대)하여 그래픽의 픽셀 정밀도를 확인하고 작은 항목을 좀더 쉽게 선택하며, 작은 텍스트로 페이지를 디자인하고 큰 페이지를 디자인하는 등의 작업을 수행할 수 있습니다.

페이지를 확대하거나 축소하려면 [보기] > [디자인 뷰 옵션] > [확대]를 클릭하여 사용 가능한 확대 옵션 중 하나를 선택합니다.

다양한 확대/축소 옵션 중에서 선택할 수 있습니다. 다음과 같은 옵션이 있습니다.

선택물에 맞추기 - 오브젝트 또는 텍스트를 선택하고 문서 창을 선택물로 채우려면 이 옵션을 선택합니다.
모두 맞추기 - 문서 창을 전체 페이지에 맞춥니다.
폭에 맞추기 - 문서 창을 페이지의 전체 폭에 맞춥니다.
참고:

돋보기 도구를 사용하지 않고 Ctrl+= 키(Windows) 또는 Command+= 키(Macintosh)를 눌러 확대할 수도 있습니다. 돋보기 도구를 사용하지 않고 Ctrl+- 키(Windows) 또는 Command+- 키(Macintosh)를 눌러 축소할 수도 있습니다.

Dreamweaver에 대한 일반 환경 설정
편집 > 환경 설정(Windows) 또는 Dreamweaver > 환경 설정(Macintosh)을 선택합니다.

다음 옵션을 설정합니다.

탭에서 문서 열기는 모든 문서가 탭으로 구분된 단일 창에 열리므로 탭을 사용하여 각 문서 사이에서 전환할 수 있습니다(Mac에만 해당).

시작 화면 표시는 Dreamweaver 실행 시나 열려 있는 문서가 없을 때 Dreamweaver 시작 화면을 표시합니다.

시작할 때 문서 다시 열기는 Dreamweaver를 닫을 때 열려 있던 모든 문서를 엽니다. 이 옵션을 선택하지 않으면 Dreamweaver를 시작할 때 시작 화면 표시 설정에 따라 시작 화면 또는 빈 화면이 표시됩니다.

읽기 전용 파일을 열 때 경고는 읽기 전용(잠김) 파일을 열 때 경고 메시지가 표시됩니다. 파일의 잠금 해제/체크아웃, 파일 보기 또는 취소를 선택합니다.

관련 파일 활성화는 현재 문서(예: CSS 또는 JavaScript 파일)와 관련된 파일을 볼 수 있습니다. 문서 위쪽에 각 관련 파일에 대한 버튼이 표시되고, 버튼을 클릭하면 파일이 열립니다.

동적 관련 파일 검색은 동적 관련 파일을 [관련 파일] 툴바에서 자동으로 표시할지 또는 수동 확인 후 표시할지 여부를 선택할 수 있습니다. 동적 관련 파일의 검색을 비활성화하도록 선택할 수도 있습니다.

파일 이동 시 링크 업데이트는 사이트 내에서 문서를 이동, 이름 변경 또는 삭제할 때 링크 업데이트를 처리하는 방법을 지정합니다. 이 환경을 설정하여 링크를 항상 자동으로 업데이트하거나, 링크를 업데이트하지 않거나, 업데이트 수행 여부를 묻도록 할 수 있습니다. (자동으로 링크 업데이트를 참조하십시오.)

오브젝트 삽입 시 대화 상자 표시는 삽입 패널 또는 삽입 메뉴를 사용하여 이미지, 표, Shockwave 동영상 및 다른 특정 오브젝트를 삽입할 때 Dreamweaver에서 추가 정보를 입력할 대화 상자를 표시할지 여부를 결정합니다. 이 옵션이 해제된 경우에는 대화 상자가 나타나지 않으므로 속성 관리자를 사용하여 이미지의 소스 파일, 표의 행 개수 등을 지정해야 합니다. 롤오버 이미지 및 Fireworks HTML의 경우에는 이 옵션의 설정 여부와 관계없이 오브젝트를 삽입할 때마다 대화 상자가 나타납니다. 이 설정을 일시적으로 무시하려면 오브젝트를 만들어서 삽입할 때 Ctrl 키를 누른 상태에서 클릭(Windows)하거나 Command 키를 누른 상태에서 클릭(Macintosh)합니다.

2바이트 인라인 입력 활성화는 2바이트 텍스트(예: 일본어 문자)를 허용하는 개발 환경이나 언어 키트를 사용할 때 문서 창에 2바이트 텍스트를 직접 입력할 수 있습니다. 이 옵션을 선택하지 않으면 2바이트 텍스트의 입력 및 변환을 위한 텍스트 입력 창이 나타나며 이 창에 텍스트를 입력해야 문서 창에 표시됩니다.

머리글 다음에 일반 단락으로 전환은 디자인 또는 라이브 뷰에서 머리글 단락의 끝에 Enter(Windows) 또는 Return(Macintosh) 키를 누르면 p 태그를 사용하여 새 단락이 만들어집니다. (머리글 단락은 h1 또는 h2와 같은 머리글 태그가 지정된 단락입니다.) 이 옵션이 해제된 경우 머리글 단락 끝에서 Enter 또는 Return 키를 누르면 동일한 머리글 태그가 지정되는 새 단락이 만들어집니다. 따라서 한 행에 여러 개의 머리글을 입력한 후 되돌아가서 각 머리글 아래에 세부 정보를 입력할 수 있습니다.

연속된 여러 공백 허용은 디자인 또는 라이브 뷰에서 둘 이상의 공백을 입력하는 경우 단어 잘림 방지 공백이 만들어집니다. 이 공백은 브라우저에서 여러 공백으로 표시됩니다. 예를 들어 타자기에서 하는 것처럼 문장 간에 두 개의 공백을 입력할 수 있습니다. 이 옵션은 주로 워드 프로세서에서 입력하는 사용자를 위해 고안된 것입니다. 이 옵션이 해제되어 있으면 여러 개의 공백이 하나의 공백으로 처리됩니다. 브라우저가 여러 개의 공백을 하나의 공백으로 처리하기 때문입니다.

및  대신  및  사용은 Dreamweaver에서 일반적으로 b 태그를 적용하는 작업을 수행할 때마다 strong 태그가 적용되고 일반적으로 i 태그를 적용하는 작업을 수행할 때마다 em 태그가 적용되도록 지정합니다. 이러한 작업에는 HTML 모드로 텍스트 속성 관리자에서 굵게 또는 기울임체 버튼을 클릭하거나 [서식] > [스타일] > [굵게] 또는 [서식] > [스타일] > [기울임체]를 선택하는 경우가 포함됩니다. 문서에 b 및 i 태그를 사용하려면 이 옵션의 선택을 해제합니다.

참고: W3C(World Wide Web Consortium)에서는 b 및 i 태그의 사용을 권장하지 않는데 그 이유는 strong 및 em 태그가 b 및 i 태그보다 더 많은 의미 정보를 제공하기 때문입니다.

 또는 

 - 

 태그 내에 편집 가능 영역을 배치할 경우 경고는 단락이나 머리글 태그 안에 편집 가능 영역이 있는 Dreamweaver 템플릿을 저장할 때마다 경고 메시지를 표시할지 여부를 지정합니다. 이 메시지는 사용자에게 해당 영역에 단락을 더 이상 만들 수 없다는 것을 알려줍니다. 이는 기본적으로 활성화되어 있습니다.

활성 문서에 대한 실행 취소 작업 제한은 실행 취소 작업을 현재 편집 중인 파일로 제한합니다. 예를 들어 CSS 파일을 편집 중인 경우, 해당 CSS 파일에 적용된 변경 내용에 대해서만 실행 취소를 할 수 있습니다.

그러나 이 확인란이 비활성화되면 HTML 소스와 모든 관련 CSS 파일은 단일 실행 취소 내역만 사용하며, 따라서 HTML 코드나 관련 CSS 파일에서의 작업 여부에 상관없이 모든 작업을 실행 취소할 수 있습니다.

최대 작업 내역 단계 수는 Dreamweaver에서 기억되는 단계의 수를 결정합니다. (대부분의 경우 기본값을 사용하면 충분합니다.) 지정된 단계 수를 초과하면 가장 오래된 단계부터 제거됩니다.

맞춤법 사전에는 유효한 맞춤법 사전이 나열됩니다. 사전에 여러 가지 지역어나 맞춤법 규칙(예: 미국식 영어 및 영국식 영어)이 포함된 경우에는 지역어가 [사전] 팝업 메뉴에 별도로 표시됩니다.