사용 안내서 취소

Dreamweaver에서 CSS3 전환 효과 만들기 및 편집

 

 

[CSS 전환] 패널을 사용하여 CSS3 전환을 생성, 수정 및 삭제할 수 있습니다.

CSS3 전환을 생성하려면 요소의 전환 속성 값을 지정하여 전환 클래스를 생성하십시오. 전환 클래스를 생성하기 전에 요소를 선택한 경우 선택한 요소에 전환 클래스가 자동으로 적용됩니다.

생성된 CSS 코드를 현재 문서에 추가하거나 외부 CSS 파일을 지정하도록 선택할 수 있습니다.

CSS3 전환 효과 생성 및 적용

  1. (선택 사항) 전환을 적용할 요소(단락, 머리글 등)를 선택합니다. 또는 전환을 생성한 후 나중에 요소에 적용하는 방법도 있습니다.

  2. [] > [CSS 전환]을 선택합니다.

  3. 를 클릭합니다.

  4. [새 전환] 대화 상자의 옵션을 사용하여 전환 클래스를 생성합니다.

    대상 규칙

    선택기의 이름을 입력합니다. 선택기는 태그, 규칙, ID 또는 복합 선택기와 같은 모든 CSS 선택기가 될 수 있습니다. 예를 들어 모든 <hr> 태그에 전환 효과를 추가하려면 hr을 입력합니다.

    전환 설정

    전환을 적용할 상태를 선택합니다. 예를 들어 포인터를 요소 위로 옮길 때 전환을 적용하려면 [커서 놓기] 옵션을 사용합니다.

    모든 속성에 대한 동일한 전환 사용

    전환할 모든 CSS 속성에 대해 동일한 [지속 기간], [지연] 및 [타이밍 기능] 을 지정하려면 이 옵션을 선택합니다.

    각 속성에 대해 다른 전환 사용

    전환할 각 CSS 속성에 대해 다른 [지속 기간], [지연] 및 [타이밍 기능]을 지정하려면 이 옵션을 선택합니다.

    속성

    CSS 속성을 전환에 추가하려면 를 클릭합니다.

    지속 시간

    전환 효과의 지속 시간을 초 또는 밀리초 단위로 입력합니다.

    지연

    전환 효과가 시작되기 전의 시간입니다(초 또는 밀리초 단위).

    타이밍 기능

    사용 가능한 옵션 중에서 전환 스타일을 선택합니다.

    끝 값

    전환 효과의 끝 값입니다. 예를 들어 전환 효과가 끝날 때 글꼴 크기가 40px로 늘어나도록 하려면 글꼴 크기 속성에 40px를 지정합니다.

    전환을 만들 위치를 선택하십시오.

    현재 문서에 스타일을 포함시키려면 [이 문서만]을 선택합니다.

    CSS3 코드용 외부 스타일시트를 생성하려면 [새 스타일 시트 파일]을 선택합니다. 전환 생성을 클릭하면 새 CSS 파일을 저장할 위치를 묻는 메시지가 표시됩니다. 스타일시트가 생성되면 [전환을 생성할 위치를 선택하십시오] 메뉴에 추가됩니다.

CSS3 전환 효과 편집

  1. [CSS 전환] 패널에서 편집할 전환 효과를 선택합니다.

  2. 을 클릭합니다.

  3. [전환 편집] 대화 상자를 사용하여 이전에 입력한 전환 값을 변경합니다.

전환의 CSS 대표 속성 비활성화

  1. [편집] > [환경 설정]을 선택합니다.

  2. [CSS 스타일]을 선택합니다.

  3. [대표 속성 사용]에서 [전환]을 선택 취소합니다.


쉽고 빠르게 지원 받기

신규 사용자이신가요?