Dreamweaver에서 CSS 클래스 스타일 적용, 제거 또는 이름 변경 방법 학습
Dreamweaver의 현재 버전 이후로 CSS 스타일 패널이 CSS Designer로 바뀌었습니다. 자세한 내용은 CSS Designer를 참조하십시오.
클래스 스타일은 텍스트를 제어하는 태그에 관계없이 문서의 모든 텍스트에 적용할 수 있는 유일한 CSS 스타일 유형입니다. 현재 문서와 관련된 모든 클래스 스타일은 [CSS 스타일] 패널(이름 앞에 마침표 [.]가 나옴)과텍스트 속성 관리자의 [스타일] 팝업 메뉴에 표시됩니다.
대부분의 스타일은 즉시 업데이트되어 나타나지만 스타일이 예상대로 적용되었는지 확인하려면 브라우저에서 해당 페이지를 표시해 보아야 합니다. 같은 텍스트에 둘 이상의 스타일을 적용하면 스타일이 충돌하여 예기치 못한 결과가 발생할 수 있습니다.
외부 CSS 스타일 시트에 정의된 스타일을 미리 볼 때는 페이지를 브라우저에서 미리 볼 때 변경 사항이 반영되도록 스타일 시트를 저장하십시오.
CSS 클래스 스타일 적용
-
문서에서 CSS 스타일을 적용할 텍스트를 선택합니다.
전체 단락에 스타일을 적용하려면 해당 단락에 삽입 포인터를 위치시킵니다.
단일 단락 내에서 텍스트 범위를 선택하면 선택한범위에만 CSS 스타일이 적용됩니다.
CSS 스타일을 적용할 정확한 태그를 지정하려면 문서 창의 왼쪽 아래에 있는 태그 선택기에서 태그를 선택합니다.
-
클래스 스타일을 적용하려면 다음 중 하나를 수행합니다.
[CSS 스타일] 패널([윈도우] > [CSS 스타일])에서, [모두] 모드를 선택하고, 적용하려는 스타일의 이름을 마우스 오른쪽 버튼으로 클릭한 다음, 컨텍스트 메뉴에서 [적용]을 선택합니다.
HTML 속성 관리자의 [클래스] 팝업 메뉴에서 적용하려는 클래스 스타일을 선택합니다.
문서 창에서, 선택한 텍스트를 마우스 오른쪽 버튼으로 클릭(Windows)하거나 Ctrl 키를 누른 상태에서 클릭(Macintosh)하고 컨텍스트 메뉴에서[CSS 스타일]을 선택한 다음 적용할 스타일을 선택합니다.
[서식] > [CSS 스타일]을 선택하고 하위 메뉴에서 적용할 스타일을 선택합니다.
선택 영역에서 클래스 스타일 제거하기
-
스타일을 제거할 오브젝트나 텍스트를 선택합니다.
-
HTML 속성 관리자([윈도우] > [속성])의 [클래스] 팝업 메뉴에서 [없음]을 선택합니다.
클래스 스타일 이름 변경하기
-
[CSS 스타일] 패널에서 이름을 변경할 CSS 클래스 스타일을 마우스 오른쪽 버튼으로 클릭하고 [클래스 이름 변경]을 선택합니다.참고:
또는 [CSS 스타일] 패널 옵션 메뉴에서 [클래스 이름 변경]을 선택하여 클래스 이름을 변경할 수도 있습니다.
-
[클래스 이름 변경] 대화 상자에서, 이름을 변경할 클래스가 [클래스 이름 변경] 팝업 메뉴에서 선택한 클래스인지 확인합니다.
-
[새 이름] 텍스트 상자에서 새 클래스의 이름을 새로 입력하고 [확인]을 클릭합니다.
이름을 변경하는 클래스가 현재 문서의 헤드에 포함되어 있으면 Dreamweaver에서는 현재 문서에 있는 클래스 이름의 모든 인스턴스와 함께 클래스 이름을 변경합니다. 이름을 변경하는 클래스가 외부 CSS 파일에 있으면 Dreamweaver에서는 해당 파일을 열어 클래스 이름을 변경합니다. 또한 Dreamweaver에서는 이전 클래스 이름의 모든 인스턴스를 사이트에서 검색할 수 있도록 사이트 범위의 [찾기 및 바꾸기] 대화 상자를 엽니다.