CSS 패널을 사용하여 스타일 변경하기

CSS 패널에는 애니메이션 요소의 keyframes 규칙 등 선택한 요소에 정의된 스타일 규칙이 표시됩니다. CSS 패널의 스타일 탭을 사용하여 요소의 클래스에 대한 스타일을 수정하고, 인라인 스타일을 추가하고, 새 스타일 규칙을 만들 수도 있습니다.

문서에서 새 스타일 규칙을 만드는 방법:

1. 새 스타일 규칙을 적용할 요소를 선택합니다.
2. CSS 패널 하단에서 규칙 추가 버튼 을 클릭합니다.
3. 수정할 수 있는 고유한 클래스 선택기가 생성됩니다. 클래스 선택기를 시작하면 선택한 요소에 해당 클래스가 추가됩니다.
4. 새 규칙 선언을 위한 괄호 사이에서 속성 추가를 클릭하고 CSS 속성 및 값(예: width: 209px;)을 입력합니다.
5. 규칙이 완전히 정의될 때까지 계속해서 새 속성/값 쌍을 추가합니다.

요소에 인라인 스타일을 추가하는 방법:

1. 요소를 선택합니다.
2. CSS 패널의 인라인 스타일 블록에서 속성 추가를 클릭합니다.
3. 속성/값 쌍을 추가하여 요소 스타일을 변경합니다.

스타일을 수정하는 방법:

1. 문서에서 요소를 선택합니다. CSS 패널에는 요소와 연결된 스타일 규칙이 표시됩니다.
2. 속성 또는 값을 클릭하여 수정합니다. 속성을 삭제하려면 속성 이름을 지웁니다.

속성을 전환하는 방법:

1. 속성 이름 옆에 있는 체크박스를 클릭합니다. 체크박스를 선택 해제하면 브라우저 미리보기 및 게시된 파일에 해당 속성이 포함되지 않습니다.
2. 속성을 다시 활성화하려면 체크박스를 다시 클릭합니다.

애니메이션의 키프레임 규칙

CSS 패널에는 CSS를 통해 애니메이션이 적용된 요소의 키프레임 규칙(@keyframes 키워드 사용)이 표시됩니다.

요소의 새 키프레임 규칙을 만드는 방법:

1. 애니메이션이 없는 요소를 선택합니다.
2. CSS 패널 하단에서 키프레임 규칙 추가 버튼 을 클릭합니다. 기본적으로 시작 및 종료 키프레임(0% 및 100%)이 추가되고 애니메이션 재생 시간은 1초로 설정됩니다.
3. 키프레임에 애니메이션 속성을 추가하려면 속성 추가를 클릭하고 CSS 속성 및 값을 입력합니다.
4. 규칙이 완전히 정의될 때까지 계속해서 새 속성/값 쌍을 추가합니다.

키프레임을 추가하는 방법:

1. 애니메이션 요소를 선택합니다.
2. CSS 패널의 기존 키프레임 사이에서 키프레임 삽입을 클릭합니다.
3. 그러면 주변 키프레임 사이의 중간 지점에 키프레임이 자동으로 설정됩니다. 백분율을 클릭하여 키프레임 타이밍을 변경합니다.
4. 애니메이션 속성은 주변 키프레임으로부터 보간됩니다. 새 키프레임의 속성을 추가, 수정 또는 삭제합니다.

기존 애니메이션의 끝을 지나면 키프레임을 추가할 수 없습니다. 대신 타임라인을 사용하세요.