이미지 라디오 버튼 만들기? css?

이미지 라디오 버튼 만들기? css?

QA

이미지 라디오 버튼 만들기? css?

본문

안녕하세요?

html 도 css도 왕초보입니다. 

이미지 라디오 버튼 만들려고 하는데 구글링 해도.....단편적인 설명 뿐이어서 이해도 안되고.. ㅠㅠ

아래 링크를 보면 - 만들다가 도저히 못 만들겠네요

http://mykepco.com/cs/radio3.html <-- 안되는 링크

아래와 같이 박스 안에 모양처럼 만들고 싶어요~~

3660986277_1617354373.2252.png

테이블 태그는 연습하고 있는 것입니다.

아래 소스는 찾아 모아서 만들다만 것입니다.

도와 주십시오^^


<!DOCTYPE <!DOCTYPE html>
<html>
<head>
    <title>라디오버튼 만들기</title>
    <style>
    body {
.smile { margin-bottom: 28px; overflow: visible; }
.smile b { display: none; }
.smile input { margin-right: 2px; float: left; display: block; margin-top: 9px; }
.smile span { margin-right: 7px; }
.smile.s1 { background: url(./images/s1.png) 0 0 no-repeat; display: block; width: 103px; height: 28px; float: left; }
.smile.s2 { background: url(./images/s2.png) 0 0 no-repeat; display: block; width: 119px; height: 28px; float: left; }
.smile.s3 { background: url(./images/s3.png) 0 0 no-repeat; display: block; width: 113px; height: 28px; float: left; }
.smile.s4 { background: url(./images/s4.png) 0 0 no-repeat; display: block; width: 113px; height: 28px; float: left; }
}
</style>
</head>
<body>
    <h3>먹고 싶은 것 하나만 선택-2</h3>
    <hr>
    <form action="text.html">
        <label for="s1">
            <input type="radio" name="smile" id="s1" value="jja">
            매우만족
            <img src="images/s1.png" alt="매우만족" /><br>
        </label><label for="s2">
            <input type="radio" name="smile" id="s2" value="jjam">
            만족
            <img src="images/s2.png" alt="만족" /><br>
        </label><label for="s3">
            <input type="radio" name="smile" id="s3" value="tangsuyuk">
            보통
            <img src="images/s3.png" alt="보통" /><br>
        </label><label for="s4">
            <input type="radio" name="smile" id="s4" value="tangsuyuk">
            불만
            <img src="images/s4.png" alt="불만" /><br>
        <input type="submit" value="제출스">
    </form>
    
<table class="smile">
<tr>
<td>
        <label for="s1">
            <input type="radio" name="smile" id="s1" value="jja">
           
           <span class="s1"><b>s1</b></span>
        </label>
        </td>
        <td>
        <label for="s2">
            <input type="radio" name="smile" id="s2" value="jjam">
          
            <span class="s2"><b>s2</b></span>
        </label>
            </td>
        <td>
        <label for="s3">
            <input type="radio" name="smile" id="s3" value="tangsuyuk">
        
           <span class="s3"><b>s3</b></span>
        </label>
                    </td>
        <td>
        <label for="s4">
            <input type="radio" name="smile" id="s4" value="tangsuyuk">
       
           <span class="s4"><b>s4</b></span>
           </td>
           </tr>
           
        <input type="submit" value="제출스">
</table>
</body>
</html>

이 질문에 댓글 쓰기 :

답변 1

일단 radio버튼 이미지화하는 부분 codepen에 찾아보시면 

예제들 많이 있습니다.

Radio Button with Image VISA/MASTER (codepen.io)

 

개인적인 생각입니다만, 근데 저 위에 저기능을 구지 radio로 만들어야하나요?

그누보드의 좋아요,싫어요 처럼 만드는게 더 나은거 같은데-.-

 

이유는 답변결과를
--------------------------------------
답변자/매우좋아/좋아/보통/싫어요
--------------------------------------
홍길동 100/80/60/50
무지개 80/100/20/10
:
:
--------------------------------------
이렇게 받기 위함입니다.



==> 아주 간단하네요
      위 소스에서 s1 등 글 대신 그림 <img src="images/s2.png</b>
      링크하면 되네요..
==> 이렇게 쉬운 걸 몰랐다니........... 참 한심하네

답변을 작성하시기 전에 로그인 해주세요.
전체 606
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT