focus

focus

input:focus {
	color: red;
}

focus는 타켓 엘리먼트 자체에만 적용된다.
타켓 엘리먼트 내부에도 영향을 미치고 싶다면 focus-within을 사용할 것

• focus pseudo class in CSS is used for styling an element that is currently targeted by the keyboard, or activated by the mouse

1. focus-visible
2. focus-within

tabindex

Reference

• https://webdesign.tutsplus.com/tutorials/css-pseudo-class-focus-visible--cms-37211

• https://css-tricks.com/almanac/selectors/f/focus/

• https://aboooks.tistory.com/308

• https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/

• https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible

• https://developer.mozilla.org/en-US/docs/Web/CSS/:focus

• https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus

• https://www.w3schools.com/jsref/met_html_focus.asp

• https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=ndb796&logNo=221406934376

• http://www.tcpschool.com/html-tag-attrs/input-autofocus

• https://www.google.com/search?q=html+focus&rlz=1C1SQJL_enKR899KR899&sxsrf=ALiCzsZXMJr93O5dlmqu31eoPq9t7xBPhQ%3A1652672386517&ei=gseBYtejH4WjoAT-0ZDoDw&ved=0ahUKEwjX7Jy0jOP3AhWFEYgKHf4oBP0Q4dUDCA4&uact=5&oq=html+focus&gs_lcp=Cgdnd3Mtd2l6EAMyBQgAEJECMgUIABDLATIFCAAQkQIyBQgAEMsBMgQIABBDMgUIABDLATIFCAAQywEyBQgAEMsBMgUIABDLATIFCAAQywE6BAgjECc6CwguEIAEEMcBEKMCOgUIABCABDoLCC4QgAQQxwEQ0QNKBAhBGABKBAhGGABQAFjCDGC8DWgBcAF4AIABpwGIAcQLkgEEMC4xMJgBAKABAcABAQ&sclient=gws-wiz

• https://html.spec.whatwg.org/multipage/interaction.html

• https://homzzang.com/b/css-23