액티브Active
한 줄 정의
액티브는 방문자가 버튼이나 링크를 누르고 있는 바로 그 순간의 상태, 또는 그때 바뀌는 화면 모양을 가리키는 말이에요.
쉽게 말하면
버튼을 누를 때 버튼이 살짝 눌려 들어가거나 색이 더 진해졌다가, 손을 떼면 원래대로 돌아오는 것을 본 적이 있을 거예요. 그 짧은 순간의 모양이 액티브예요. 실제 버튼은 누르면 손끝에 눌리는 느낌이 오지만 화면 속 버튼은 그런 느낌이 없어요. 그래서 화면 속 버튼은 액티브 모양으로 "눌렸어요"를 눈으로 알려 줘요.
어디서 나온 말인가요
액티브는 웹페이지의 모양을 정하는 언어인 CSS의 표준에 :active라는 이름으로 정의된 상태예요. W3C(웹 표준을 만드는 국제 단체)의 선택자 표준 문서는 :active를 활성화된 상태에 있는 요소로 설명해요(W3C Selectors Level 4).
잘 쓰려면
- 변화는 작고 분명하게: 색을 조금 진하게 하거나 그림자를 줄이는 정도로도 눌린 느낌을 줄 수 있어요
- 호버 모양과 다르게: 호버와 액티브 모양이 같으면 방문자는 버튼을 눌렀는지 커서만 올려놓았는지 구분하기 어려워요
헷갈리는 말
| 헷갈리는 말 | 뜻 | 액티브와 다른 점 |
|---|---|---|
| 선택된 상태 | 지금 보고 있는 메뉴나 탭을 다른 것과 다르게 표시해 둔 상태 | 디자인 작업에서는 이것도 '액티브'라고 부르기도 해요. 누르는 순간에만 보이는 액티브와 달리, 선택된 상태는 다른 것을 고를 때까지 계속 남아 있어요 |
| 호버 | 마우스 커서를 올려놓았지만 누르지는 않은 상태 | 호버는 누르기 전이고, 액티브는 누르고 있는 동안이에요 |