a{}
a:link{} 방문하지 않은 링크
a:visited{} 방문기록이 있는 링크
a:hover {} 링크위에 마우스 포인터올렸을 때
a:active {} 링크를 클릭한 상태. 클릭하고있으면 계속 보임
* 링크속성 지정시 속성지정순서를 지키지 않으면 제대로 적용되지 않으니 반드시 기입 순서를 지켜야 한다! *
<a>
크롬 기본 a 태그 스타일은 color:#000 에 hover는 pointer:text (앵커같은곳에 href없이 사용한다함)
여기에 링크가 붙으면(a href="http://~...") color:blue; text-decoration:underline; hover는 cursor:pointer가 됨
href가 없는 애들은 :link 가 적용되지 않는다
:hover 는 pc (1025px~) 에서 사용. 태블릿, 모바일에서는 터치를 하는데 터치화면에서는 포인터를 올려놓을 수 없음
:active 는 pc 에서 굳이 사용할 필요가 없어보인다. 어짜피 모든 클릭요소에는 :hover를 주도록 되어있으니까
그래도 기입하게 된다면 클릭(터치)하고 있으면 보이긴 함. 누르고 있으면 손 떼기 전까진 계속 보인다
일반적으로 클릭은 잠깐 하니까 하는 동안 잠깐 번쩍 보였다가 사라짐
:hover, :active는 특정상황 아닌이상 모바일에서 넣지 않는 것이 좋다
그냥 스타일로 active 되어있도록 넣어두기.
(ex. @media (max-width:1024px){color:#fff;background-color:blue;} )
:active:hover:focus
:focus-within
:focus-visible
:target:visited
:focus
- 양식의 입력 칸 등 포커스를 받은 요소. 보통 사용자가 요소를 클릭 또는 탭하거나, 키보드 Tab 키로 선택했을 때 발동
- 포커스를 받은 요소 자체에만 해당합니다.
- 자손이 포커스를 받았을 때의 요소를 선택해야 하면 :focus-within을 사용
- :focus 특정상황이 아니면 굳이 사용할 필요는 없다. 알아서 outline 생기기 때문 , 잘 안보이거나 하면 바꿀수 있긴할듯 (이미 버튼이 검정색이거나 한다면)
- :focus{outline:none} 과 같이 절대 포커스의 기본 외곽선(시각적 포커스 지시자)을 대체 외곽선 없이 제거하지 말것.
포인터 입력 장치(마우스 등)가 아닌 키보드로 조작하는 사용자를 배제함 (접근성 X)
:focus-visible (*접근성)
- :focus의 경우 마우스 포인터가 클릭했던 요소를 떠나더라도 페이지 상에서 상호작용한 다른 요소를 클릭하기 전까지는 먼저 클릭한 요소에 적용한 스타일이 그대로 남는 현상 발생
- focus-visible을 사용하면 마우스로 포커싱이 아닌 키보드로 해당 엘리먼트 포커싱 했을때 적용
* input 처럼 키보드 조작을 반드시 필요로 하는 엘리먼트에서는 클릭시에도 visible 이 적용된다
지원되는 브라우저가 많이 없어서 타브라우저 사용해야할시 폴리필 사용
:focus-within (*접근성)
숨겨진 엘리먼트에 키보드로 포커싱 했을때 보이게 하는 등 (ex. dropdown menu)에 사용
추가..
가능하다면 tabindex 사용도 고려
:target
활성화된 링크 태그에 사용하며 선택된 영역에만 스타일을 부여할 수 있다
참고
https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-classes
https://www.daleseo.com/css-focus/
'css' 카테고리의 다른 글
| bootstrap grid (0) | 2023.12.27 |
|---|---|
| css !important 의 사용을 자제하자 (0) | 2023.12.27 |
| Sass Scss (0) | 2023.12.21 |
| padding과 margin 에 대하여 (1) | 2023.11.27 |
| 텍스트 속성 관련 word-break, word-wrap, text-overflow ... (0) | 2023.11.24 |
