:focus

focus, focus-visible:focus: 모든 포커스 상황(키보드, 마우스, 터치)에 적용:focus-visible: 키보드 포커스 또는 브라우저에서 포커스 표시가 필요하다고 판단할 때만 적용Tab 키로 포커스 이동 시(키보드 포커스)키보드 입력을 지원하는 요소(텍스트 입력 필드 등)… 일반적으로 마우스 사용자에게 불필요한 외곽선은 숨기면서 키보드 사용자의 접근성을 보장하기 위해 :focus와 :focus-visible 선택자를 조합해서 사용하는 경우가 많다./* 기본 포커스 스타일 리셋 */button:focus { outline: none;}/* 키보드 포커스 시 스타일 적용 */button:focus-visible { outline: 2px solid green;}  outline, r..

요소는 과 함께 사용하여 옵션을 선택할 수 있는 드롭다운을 표시한다. 우측에 있는 드롭다운 화살표 아이콘은 브라우저마다 스타일이 조금씩 다르다. 어떤 브라우저에서든 똑같은 아이콘으로 표시하고 싶다면 background 스타일 속성을 이용해서 변경할 수 있다.Select your device Apple Oppo Xiaomi appearance 속성 수정appearance CSS 속성은 운영체제의 테마를 기반으로 하는 UI 컨트롤의 기본 외형(appearance)을 제어할 때 사용한다. appearance: none 속성을 적용하면 input progress 등의 요소가 기본적으로 가지는 스타일을 해제할 수 있다. select 요소에 사용하면 우측 화살표 아이콘이 사라진다.select[id="sele..

focus-within 살펴보기:focus-within은 포커스를 받은 요소 혹은 포커스를 받은 요소(주로 input 태그)를 포함하는 부모 요소를 가리킨다. input 같은 하위 요소가 focus 됐을 때 부모 요소의 스타일을 변경하고 싶을 때 사용하면 유용하다. 아래 예제에서 input 태그를 자식으로 포함하는 .wrapper 클래스 이름의 부모 요소가 있다. Lorem Ipsum ist ein einfacher Demo-Text für die Print- und Schriftindustrie. Choose text color  input 태그를 선택해서 활성화되면(포커스를 받으면), 해당 input 태그를 포함하는 부모 요소인 .wrapper 클래스에 focus-within 의사클래..