[CSS] 홈페이지 이동 시 button에 기본으로 focus 주기

버튼이 있는 페이지를 만들던 중, 해당 페이지로 이동했을 때

 

특정 버튼에 focus가 되어있는 상태를 기본 값으로 설정하고 싶었다.

 

찾아본 결과 아주 간단한 방법으로 설정할 수 있었다.

 

<div class="button-container">
         <button type="button" class="location-button" autofocus>지역별 매장</button>
         <button type="button" class="search-button">스파 매장 안내</button>
</div>

해당 button태그 안에 autofocus를 적어주는 것이었다 🌟

 

css에도 적을 수 있는 것 같았는데, 그렇게 하면 :focus 스타일과 함께 작성하니 오류가 발생해서

 

html의 button태그 안에 바로 적어주었더니 문제 없이 적용이 되었다.

 

:focus시 배경 색, 글자 색 변경

 

적용 완료😊