ATOZ CSS 빠른 팁 : 호버와 높이 사용

이 기사는 ATOZ CSS 시리즈의 일부입니다. 이 시리즈의 다른 항목을 여기에서 찾을 수 있습니다. 전체 시리즈보기

호버 효과의 전체 비디오 및 텍스트 레코드보기 > ATOZ CSS 시리즈에 오신 것을 환영합니다! 이 시리즈에서는 알파벳의 문자로 시작하여 다른 CSS 값 (및 속성)을 탐색합니다. 우리는 때때로 스크린 샷이 충분하지 않다는 것을 알고 있으며,이 게시물에서는 호버링의 영향에 대한 새로운 팁을 추가했습니다. h는 호버와 높이를 나타냅니다 호버 효과와 관련하여, 나는 이미 문자 h에 관한 비디오에서 많은 것을 소개 했으므로 여기에서 자세히 설명하지 않을 것입니다. 그러나 호버 상태에 멋진 애니메이션을 적용 할 수 있습니다. Google에서 "CSS 호버 효과"를 검색하면 많은 것을 찾을 수 있습니다. 다음은 영리한 효과를 가진 일부 웹 사이트입니다 <:> codrops : CSS 전환 호버 효과 <:> Design Shack : 복사 페이스트 호버 효과

CSS- 트릭 : 팝 호버

또한 또한 최근에 Hover.css라는 도서관에 관한 Code School에 대한 비디오를 만들었습니다.

다른 CSS H 속성 (이 웹 사이트에서 자세히 설명하지 않음)은 높이 (높이)입니다.

높이 속성은 요소의 내용 높이를 정의하는 데 사용됩니다. 모든 표준 길이 단위 (예 : PX, EM, REM, %, VW, VH 및 기타 장치)를 사용하여 높이를 제어 할 수 있습니다.

요소의 높이가 명시 적으로 설정되지 않은 경우, 포함 된 모든 요소 (기본값 자동에 해당)를 수용하는 최소 높이로 계산됩니다.

요소의 유연성을 제한하기 때문에 일반적으로 모든 요소의 높이를 명시 적으로 설정하지 않는 것이 좋습니다. 즉, 콘텐츠가 변경됨에 따라 성장할 수 없습니다. 이는 가용 너비가 변경 될 때 컨텐츠를 수직으로 재 배열해야 할 때 반응 형 디자인에서 특히 중요합니다.

따라서 이미지와 같은 사전 정의 된 크기의 요소에서만 높이를 설정하는 경향이 있습니다. 또 다른 사용 사례는 절대 또는 고정 위치를 사용할 때 위치 (및 너비)가 포지셔닝 요소 주변에서 줄어든다는 것입니다.

다음 예제는 고정 높이를 설정하는 문제를 보여줍니다.

샘플 코드보기
• 첫 번째 텍스트 세트가 올바르게 보이지만 텍스트가 스타일보다 짧거나 길면 스타일이 더 이상 올바르지 않습니다. 포함 상자가 너무 크거나 텍스트가 상자 밖에 넘쳐납니다.
텍스트 오버 플로우를 수정하는 한 가지 방법은 오버 플로우 속성을 사용하는 것이지만 텍스트를 자르고 읽을 수 없습니다.
• 높이가 처음에 지정되지 않은 경우 완전히 피할 수 있습니다. 아무것도하지 않고 코드의 유연성을 향상시킬 수 있다면 망설임없이 그렇게하도록 선택할 것입니다!
CSS 호버 높이 (FAQS)에 대한 FAQ CSS 호버 효과는 무엇이며 어떻게 작동합니까?

CSS 호버 효과는 마우스 포인터가 요소 위로 떠날 때 스타일을 적용하는 의사 클래스입니다. 마우스가 마우스 위로 떠날 때 버튼의 색상 변경과 같은 웹 페이지에 대화식 효과를 만드는 데 종종 사용됩니다. 호버 효과는 ": 호버"셀렉터를 사용하여 CSS 속성을 변경하여 적용됩니다. 예를 들어, 마우스가 호버링 될 때 버튼의 배경색을 빨간색으로 변경하려면 다음 코드를 사용할 수 있습니다.

CSS 호버 효과를 사용하여 요소의 높이를 변경하는 방법은 무엇입니까?

호버 규칙에서 새로운 높이를 지정하여 CSS 호버 효과를 사용하여 요소의 높이를 변경할 수 있습니다. 예를 들어, 마우스가 div 요소를 가리킬 때 높이를 늘리려면 다음 코드를 사용할 수 있습니다.

이 예에서 마우스가 DIV 위로 가득 차면 DIV의 높이는 200px로 변경됩니다.

미디어 쿼리와 함께 CSS 호버 효과를 사용할 수 있습니까?

예, 미디어 쿼리와 함께 CSS 호버 효과를 사용하여 반응 형 호버 효과를 생성 할 수 있습니다. 예를 들어, 화면에 특정 너비가있는 경우에만 미디어 쿼리를 사용하여 호버 효과를 적용 할 수 있습니다. 예는 다음과 같습니다.

button:hover {
  background-color: red;
}

이 예에서는 화면 너비가 600px 이상인 경우에만 호버 효과가 적용됩니다.

CSS 호버 효과를 사용하여 여러 속성을 변경할 수 있습니까?

예, CSS 호버 효과를 사용하여 한 번에 여러 속성을 변경할 수 있습니다. 예를 들어, DIV 요소의 높이, 너비 및 배경색을 가리킬 때 변경할 수 있습니다. 예는 다음과 같습니다.

이 예에서, 마우스가 div 위로 가로 지르면 DIV의 높이, 너비 및 배경색이 변합니다.

CSS 호버 효과를 사용하여 전환 효과를 만들 수 있습니까?

div:hover {
  height: 200px;
}

예, 전이 특성과 함께 CSS 호버 효과를 사용하여 원활한 전환 효과를 만들 수 있습니다. 예를 들어, 마우스가 DIV 요소 위로 떠오르는 동안 DIV 요소의 높이를 2 초 안에 점차적으로 변경하는 전환 효과를 생성 할 수 있습니다. 예는 다음과 같습니다.

이 예에서, 마우스가 div 위로 가득 차면, div의 높이는 2 초 안에 점차 200px로 변경됩니다.

원본 이미지에 액세스 할 수 없기 때문에 모든 이미지 링크를 자리 표시 자로 바꾸 었습니다. 자리 표시자를 실제 이미지 링크로 교체하십시오. 마찬가지로 기사에서 링크가 필요한 장소도 자리 표시 자로 대체되며 실제 상황에 따라 교체하십시오.

위 내용은 ATOZ CSS 빠른 팁 : 호버와 높이 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!