CSS-L3-051 / 접근성 스타일

키보드 포커스 표시

중급

문제

button의 키보드로 이동할 수 있는 포커스 상태에 3px solid rgb(0,0,255) outline을 지정하세요. 기본 상태에서는 outline-style이 none입니다.

준비된 HTML은 그대로 사용합니다. 선택자와 스타일을 작성하세요. 결과 화면과 조건을 함께 확인하세요.

준비된 HTML

<!doctype html>
<html lang="ko">
<head><meta charset="utf-8"><title>실습</title></head>
<body>
<button>계속</button>
</body>
</html>

힌트

포커스를 나타내는 :focus 선택자를 사용하세요.

해설·정답 보기

검사 환경은 요소를 키보드 방식으로 포커스한 뒤 스타일을 확인합니다.

button{outline:none}button:focus{outline:3px solid blue;outline-offset:3px}

style.css화면·구조 확인

풀이 코드

코드는 이 브라우저에 자동 저장돼요.

코드를 작성하고 채점하기를 눌러보세요.

학습용으로 제공된 조건을 확인해요. 알고리즘 사용 방식·설계 의도는 해설과 함께 비교해보세요.