hover

호버(hover)란?

호버는 마우스 커서를 특정 요소 위에 올려놓은 상태를 말한다. 사용자 인터페이스에서 중요한 상호작용 방식 중 하나로, 추가 정보를 제공하거나 시각적 피드백을 주는데 자주 사용된다.

 

 

 

 

CSS에서는 ":hover" 의사 클래스(pseudo-class)를 사용하여 호버 효과를 구현한다. 이를 통해 요소에 마우스를 올렸을 때의 스타일을 정의할 수 있다. 아래는 호버 효과 예시이다.

.hover-button {
            padding: 10px 20px;
            background-color: #3498db;
            color: white;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .hover-button:hover {
            background-color: #2980b9;
        }

        .hover-text {
            font-size: 18px;
            color: #333;
            transition: color 0.3s ease;
        }

        .hover-text:hover {
            color: #e74c3c;
        }

        .hover-box {
            width: 100px;
            height: 100px;
            background-color: #2ecc71;
            transition: all 0.3s ease;
        }

        .hover-box:hover {
            width: 150px;
            height: 150px;
            background-color: #27ae60;
        }

 

• 버튼 호버 효과:
  • .hover-button:hover를 사용하여 마우스를 올렸을 때 배경색이 변경
• 텍스트 호버 효과:
  • .hover-text:hover를 사용하여 마우스를 올렸을 때 텍스트 색상이 변경
• 박스 호버 효과:
  • .hover-box:hover를 사용하여 마우스를 올렸을 때 크기와 배경색이 변경

 

CSS에서 호버 효과를 사용할 때의 주요 포인트:

1. 선택자 뒤에 :hover를 붙여 호버 상태의 스타일을 정의한다.
2. transition 속성을 사용하여 부드러운 전환 효과를 줄 수 있다.
3. 색상, 크기, 위치 등 다양한 속성을 변경할 수 있다.

 

 

 

 

 

 

 

hover에서 자주 쓰이는 transition과 transform

 

transition: css 속성의 변화가 일어날 때 애니메이션 효과를 주는 속성이다. 요소의 상태가 변할 때 부드럽게 전환되도록 한다.

transition: [property] [duration] [timing-function] [delay];

 

• [property]: 전환 효과를 적용할 CSS 속성을 지정한다. all 또는 특정 속성 (예: width, color 등)을 사용할 수 있다.
• [duration]: 전환 효과의 지속 시간을 지정한다. 초(s) 또는 밀리초(ms) 단위를 사용한다.
• [timing-function]: 전환 효과의 속도 곡선을 지정한다. 주요 값으로는 ease, linear, ease-in, ease-out, ease-in-out 등이 있다.
• [delay]: 전환 효과가 시작되기 전의 지연 시간을 지정한다. 초(s) 또는 밀리초(ms) 단위를 사용한다.

예시)

.example {
    transition: width 0.5s ease-in-out 1s, 
                height 0.5s ease-in-out 1s, 
                background-color 0.5s linear;
}

 

 

 

• width와 height는 0.5초 동안 ease-in-out 타이밍 함수로 변화하며, 1초의 지연 시간을 가진다.
• background-color는 0.5초 동안 linear 타이밍 함수로 변화하며, 지연 없이 즉시 시작된다.

 

예시)

.box {
    width: 100px;
    height: 100px;
    background-color: blue;
    transition: transform 0.3s ease;
}

.box:hover {
    transform: scale(1.2) rotate(45deg);
}

 

 

• transform의 의미:
  • transform은 요소의 변형을 제어하는 CSS 속성이다.
  • 이 속성을 통해 요소를 회전, 확대/축소, 기울이기, 이동 등의 2D 또는 3D 변형을 할 수 있다.
  • translate(): 요소를 이동
  • scale(): 요소의 크기를 조절
  • rotate(): 요소를 회전
  • skew(): 요소를 기울임
• transition 선언의 의미:
  • transform 속성에만 전환 효과를 적용한다는 뜻이다.
  • 다른 속성(예: 색상, 크기 등)이 변경될 때는 전환 효과가 적용되지 않는다.
• ease: 전환 효과의 속도 곡선을 지정한다. ease는 시작은 천천히, 중간은 빠르게, 끝은 다시 천천히 진행되는 곡선이다.

 

• 마우스를 올렸을 때 요소가 1.2배 확대되고 45도 회전한다.
• 이 변형(transform)이 0.3초 동안 부드럽게(ease) 진행한다.