[CSS] 인터랙션 & 입력 UX

1. 인터랙션 효과

(사용자가 마우스를 올리거나 클릭할 때 생기는 효과들)

🌟 :hover

• 마우스가 요소 위에 올라갔을 때의 상태

button:hover {
  background-color: #ffa94d;
  transform: translateY(-2px);
}

-> 버튼이나 카드 등을 강조할 때 사용!

(오른쪽이 마우스가 올라갔을 때 효과가 적용된 모습이다🦁)

🌟 :active

• 클릭하는 순간(누르고 있는 중)의 상태

button:active {
  transform: scale(0.98);
}

-> 버튼의 크기를 98% 크기로 줄임 (가로, 세로 모두 0.98배). 즉, 버튼을 클릭하면 "툭" 눌리는 듯한 느낌을 주고 싶을 때 사용! (✨ transition과 함께 사용하면 더 자연스러움)

🌟 transition

• 속성이 변할 때의 속도/시간/방식을 지정

transition: all 0.3s ease;

-> 변화가 갑자기 바뀌지 않고 부드럽게 이어짐! 위에서 언급한 :active와 함께 할 때 시너지 굿

🌟 transform

• 요소의 위치/크기/회전 등을 변화

transform: translateY(-3px);  /* 위로 이동 */
transform: scale(1.1);       /* 커지게 */

-> hover, click 시 효과 줄 때 많이 사용함!

🌟 box-shadow

• 요소에 그림자를 줌 (입체감 표현)

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

-> 카드, 버튼 등에 자연스러운 입체감을 줄 때 사용! 그림자 효과!!

2. 입력 UX

(사용자가 입력창을 클릭하거나 작성할 때의 시각적 경험)

🌟 :focus

• input이나 textarea에 커서가 있을 때

input:focus {
  border: 2px solid #ff9216;
  background: #ffffff;
}

-> 사용자가 "여기 작성 중"임을 분명히 보여줌!

🌟 placeholder

• 입력 전 안내 텍스트 (칸에 회색 글씨로 보이는 그것!) 참고로 placeholder은 html에서 바로 적는다!

<input placeholder="이름을 입력하세요" />

-> UX 가이드로, 작성받고자하는 의미를 명확히 전달할 때!
(ex. 위 사진에서 비밀번호 <-)

🌟 border, background

• 사용자가 input 입력창을 클릭해서 커서를 두는 순간(=focus), 시각적으로 바뀌는 효과

input:focus {
  border: 2px solid #ff9216;
  background: #fff;
}

-> 어디를 입력하고 있는지 보여주고 싶을때!

이외에도 자주 쓰는 것이 있다면 그때그때 추가해야겟다😎