Radio label 이미지 추가하기

 

 

과거의 예시 

지금까지 해온 작업 결과물을 보면 오늘의 운세를 봐주겠다면서 갑자기 대놓고 텍스트로 고르도록 합니다.

글자가 아닌 타로 카드 뒷면이 보이도록 해볼게요.

카드 이미지 추가

<input type = "radio" name = "major" value = "The Fool"><div class="insertCardImg"></div></input>

The Fool 하면서 글자가 써진 부분에 이미지 삽입을 위한 구역을 지정해줄게요.

원래는 <img src = "주소" height = "" width = ""/>해도 괜찮지만 조금이라도 짧게 쓰고 싶었습니다.

 

.insertCardImg{
    content:url(back.jpg);
    height:100px;
    width:70px;
}

카드 이미지는 뜨는데 radio 버튼이 거슬립니다.

아예 안보이도록 지워버리죠.

[type=radio] { 
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

작게 줄여서 안보이도록 숨겼답니다.

단 이렇게만 하면 몇가지 문제점들이 있습니다.

• 카드에 마우스를 올려도 딱히 눌러도 된다는 느낌이 없음(커서 문제)
• 선택한 카드의 정보가 아닌 null이 전달이 됨

 

label 태그 추가

radio 버튼 혹은 그림을 누르면 값이 선택이 되도록 해야 합니다.(원래는 radio 영역만 해당)

그러기 위해서 <div>로 묶었던 부분을 <label>로 바꿉니다.

그러면 둘 중에 하나만 눌러도 제대로 선택이 됩니다.

물론 우리는 지금 radio를 없앴으니 그림을 누르면 선택이 되는 거겠죠.

 

[type=radio] + div {
  cursor: pointer;
}
[type=radio]:checked + div {
  outline: 5px solid indigo;
}

그림 영역에 마우스 커서가 나타나도록 하는 코드 + 선택한 카드 하이라이트 하는 코드입니다.

커서가 캡처에 안 찍혀서 아쉽지만.. 모두 적용하면 이렇게 깔끔해집니다.

원하는 결과물을 얻겠다고 별거 아니지만 이리저리 건드리는 게 재밌네요.