CSS 클래스 스타일 적용, 제거 또는 이름 변경

마지막 업데이트 날짜 2019년 5월 6일

Dreamweaver에서 CSS 클래스 스타일 적용, 제거 또는 이름 변경 방법 학습

메모

Dreamweaver의 현재 버전 이후로 CSS 스타일 패널이 CSS Designer로 바뀌었습니다. 자세한 내용은 CSS Designer를 참조하십시오.

클래스 스타일은 태그에 관계없이 문서의 모든 텍스트에 적용할 수 있는 유일한 CSS 스타일 유형입니다. 현재 문서와 연결된 모든 클래스 스타일은 [CSS 스타일] 패널(이름 앞에 마침표[.]가 붙음)과 텍스트 [속성] 관리자의 [스타일] 팝업 메뉴에 표시됩니다.

대부분의 스타일이 즉시 업데이트되는 것을 확인할 수 있지만, 스타일이 예상대로 적용되었는지 확인하려면 브라우저에서 페이지를 미리 봐야 합니다.동일한 텍스트에 두 개 이상의 스타일을 적용하면 스타일이 충돌하여 예상치 못한 결과를 낳을 수 있습니다.

메모

외부 CSS 스타일 시트에 정의된 스타일을 미리 볼 때는 스타일 시트를 저장하여 브라우저에서 페이지를 미리 볼 때 변경 사항이 반영되도록 해야 합니다.

CSS 클래스 스타일 적용

문서에서 CSS 스타일을 적용할 텍스트를 선택합니다.

전체 단락에 스타일을 적용하려면 단락에 삽입점을 놓으십시오.

단일 단락 내에서 텍스트 범위를 선택하면 CSS 스타일이 선택한 범위에만 영향을 줍니다.

CSS 스타일을 적용할 정확한 태그를 지정하려면 문서 창의 왼쪽 하단에 있는 태그 선택기에서 태그를 선택합니다.

클래스 스타일을 적용하려면 다음 중 하나를 수행합니다.
  • CSS 스타일 패널([창] > CSS 스타일)에서 [모두] 모드를 선택하고 적용할 스타일 이름을 마우스 오른쪽 버튼으로 클릭한 후 상황에 맞는 메뉴에서 [적용]을 선택합니다.

  • HTML 속성 검사기에서 [클래스] 팝업 메뉴에서 적용하려는 클래스 스타일을 선택합니다.

  • 문서 창에서 선택한 텍스트를 마우스 오른쪽 버튼으로 클릭하거나(Windows) Control 키를 누른 상태에서 클릭하고(Macintosh), 컨텍스트 메뉴에서 [CSS 스타일]을 선택한 다음 적용하려는 스타일을 선택합니다.

  • [포맷] > [CSS 스타일]을 선택하고 하위 메뉴에서 적용하려는 스타일을 선택합니다.

선택 영역에서 클래스 스타일 제거하기

스타일을 제거하려는 개체나 텍스트를 선택합니다.
HTML 속성 검사기([창] > [속성])의 [클래스] 팝업 메뉴에서 [없음]을 선택합니다.

클래스 스타일 이름 변경하기

CSS 스타일 패널에서 이름을 바꾸려는 CSS 클래스 스타일을 마우스 오른쪽 버튼으로 클릭하고 [클래스 이름 바꾸기]를 선택합니다.
메모

CSS 스타일 패널 옵션 메뉴에서 [클래스 이름 바꾸기]를 선택하여 클래스 이름을 바꿀 수도 있습니다.

[클래스 이름 바꾸기] 대화상자에서 [클래스 이름 바꾸기] 팝업 메뉴에서 이름을 바꾸려는 클래스가 선택되어 있는지 확인합니다.
[새 이름] 텍스트 상자에서 새 클래스의 이름을 새로 입력하고 [확인]을 클릭합니다.

이름을 바꾸는 클래스가 현재 문서의 헤드 부분 내부에 있는 경우 Dreamweaver는 클래스 이름과 현재 문서에서 해당 클래스 이름의 모든 인스턴스를 변경합니다. 이름을 바꾸는 클래스가 외부 CSS 파일에 있는 경우 Dreamweaver는 해당 파일을 열고 클래스 이름을 변경합니다.또한 Dreamweaver는 사이트 전체 찾기 및 바꾸기 대화 상자를 실행하여 사이트에서 이전 클래스 이름의 모든 인스턴스를 검색할 수 있도록 합니다.