이 게시물에서는 CSS 표시 속성을 사용하여 전환을 적용하는 방법을 살펴봅니다.

CSS '디스플레이' 속성에 전환을 적용하는 방법은 무엇입니까?

사용자는 CSS '에서 직접 전환을 적용할 수 없습니다. 표시하다 ' 속성. 그러나 디스플레이 속성에 전환을 적용하는 다른 방법이 있습니다. 이를 위해 아래에 언급된 절차를 수행하십시오.

1단계: '

' 컨테이너 만들기

먼저 '를 사용하여 div 컨테이너를 만듭니다. <사업부> ” 태그는 특정 값을 가진 할당된 클래스와 함께 표시됩니다.

2단계: 제목 추가

다음으로 '

' 에게 '

” 태그. 예를 들어, '

'라는 제목을 추가합니다.

3단계: 목록에 데이터 추가

리스트 형태로 데이터를 삽입하기 위해서는 “ <그> ” 태그:

---

---

< 사업부 수업 = '애완 동물' >

< h1 > 애완 동물 목록 < / h1 >

< 저것 > 암탉 < / 저것 >

< 저것 > 오리 < / 저것 >

< 저것 > 개 < / 저것 >

< 저것 > 고양이 < / 저것 >

< 저것 > 토끼 < / 저것 >

< / 사업부 >

위에서 언급한 코드의 출력은 다음과 같습니다.

이제 목록 스타일을 지정하기 위해 CSS 섹션으로 이동합니다.

4단계: '.pet-animal' 요소 스타일 지정

'에 액세스 <사업부> ' 할당된 클래스 '의 도움으로 요소 .pet 동물 ” 나열된 속성을 적용합니다.

.pet 동물 {

국경 : 2px 점이 찍힌 RGB ( 230 , 열 다섯 , 열 다섯 ) ;

여유 : 50픽셀 ;

배경색 : RGB ( 252 , 239 , 169 ) ;

}

여기:

• “ 국경 ” 속성은 요소 주변의 경계를 지정하는 데 사용됩니다.
• “ 여유 ”는 요소 경계 주변의 공간을 정의합니다.
• “ 배경색 ” 요소의 뒷면에 색상을 할당합니다.

결과 이미지는 위 코드의 출력을 보여줍니다.

5단계: 스타일 추가 목록 'li'

이제 ' 사업부 ' 클래스가 있는 컨테이너 ' 애완 동물 ”를 사용하여 .pet-animal > 리 '를 입력하고 아래에 언급된 속성을 적용합니다.

여기:

• “ 시계 ” CSS는 숨김 또는 보이기와 같이 문서의 레이아웃을 변경하지 않고 요소의 가시성을 설정하는 데 활용됩니다.
• “ 불투명 ” 요소의 투명도를 지정합니다.
• “ 이행 ”를 통해 사용자는 지정된 기간 동안 속성 값을 원활하게 변경할 수 있습니다.

6단계: 'hover' 유사 클래스 적용

이제 '를 적용하십시오. 호버링 ” 목록의 속성:

“ :호버 ” CSS는 마우스 포인터가 요소 위로 움직일 때 런타임에 변경하는 의사 클래스입니다. '를 사용하여 목록을 표시합니다. 시계 ”를 사용하여 투명도를 설정합니다. 불투명 ” 호버의 목록에 대한 CSS 속성:

'에 전환을 성공적으로 적용한 것을 볼 수 있습니다. 표시하다 ' 속성.

결론

CSS 전환은 ' 표시하다 ' 속성. 그러나 다른 방법으로 적용할 수 있습니다. 이렇게 하려면 HTML 문서에 목록 태그를 추가하고 태그 이름으로 목록에 액세스한 다음 ' 이행 ”, “ 불투명 ', 그리고 ' 시계 ” 목록의 CSS 속성. 그런 다음 ' : 호버링 ” 의사 클래스로 설정하고 가시성 값을 “ 보이는 '. 이 게시물은 전환이 CSS 표시 속성에 어떻게 적용되는지 설명했습니다.