상태 선택자 -part2-

전 시간에 이어서 이번시간에도 상태 선택자에 대해 설명 하도록 하겠습니다.

START~

focus선택자쪽만 보시기 바랍니다.

각각 input태그로 서로 다른 속성을 가진 네이버와 다음을 코딩 하였습니다.

그리고 CSS 부분에 input:focus+a 라고 입력을 하였습니다.

focus는 초점이 맞추어진 input태그를 선택합니다.

즉, css에서 선택한 곳에 마우스를 클릭하면 css에서 입력한 대로 style이 입혀져요

<초기 상태>

<네이버 radio버튼 클릭시 파랑색으로 됨>

<다음을 선택하니 네이버는 input:checked+a{background-color:yellow;}때문에

노란색으로 되고 다음은 input:focus+a{background-color:blue;}때문에 파란색으로 변경이 됩니다.>

좀더 정확하게 알아보기 위해 내용을 약간 더 추가하도록 할게요

이렇게 속성이 기본값인 type=text인 input 태그를 작성을 해주고

css에다가는 배경색을 갈색으로 해줍니다.

그러면 text입력창에 마우스를 클릭하면 위와같이 갈색으로 배경이 입힙니다.

focus 상태 선택자에 대해 어느정도 이해가 되셧으리라 믿고 다음으로 넘어갈게요

input태그에서 enabled 즉, 사용 가능한 input태그는 배경색을 red로 

disabled 즉, 사용 불가능한 input태그는 배경색을 skyblue 로 한다는 뜻 입니다.

이게 결과값 입니다.

제 생각에는 여기서도 우선 순위가 있는거 같아요

enabled와 disabled가 우선순위가 가장 높은거 같습니다. (저의 생각^^;;)

HTMLPage1.html