[html, css] label과 radio 연결

정리노트

[html, css] label과 radio 연결

망고고래 2023. 11. 20. 17:52

label과 radio를 연결하여 label을 클릭하면 radio도 클릭되는 기능을 실습했다.

여기에 가상선택자를 더해 라벨을 클릭하면 div가 나타나도록 했다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        label{
            display: inline-block;
            width: 20%;
            border: 1px solid red;
        }
        #p div{
            display: none;
            opacity: 0;
            transition: all 1s;
        }
        #a:checked ~#p #b1{display: block; opacity: 1;}
        #b:checked ~#p #b2{display: block; opacity: 1;}
        #c:checked ~#p #b3{display: block; opacity: 1;}
        #d:checked ~#p #b4{display: block; opacity: 1;}
    </style>
</head>
<body>
    <input type="radio" name="달팽이" id="a">
    <input type="radio" name="달팽이" id="b">
    <input type="radio" name="달팽이" id="c">
    <input type="radio" name="달팽이" id="d">
    <br>
    <label for="a">첫번째</label>
    <label for="b">두번째</label>
    <label for="c">세번째</label>
    <label for="d">네번째</label>
    <div id="p">
        <div id="b1">달팽이1</div>
        <div id="b2">달팽이2</div>
        <div id="b3">달팽이3</div>
        <div id="b4">달팽이4</div>
    </div>
</body>
</html>

radio의 name 통일
radio의 id와 label의 for 통일
display : none;과 가상선택자 checked 활용

그리고 이를 응용하여 탭을 만드는 연습을 했다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="mobapp.css">
</head>
<body>
    <section id="features">
        <div class="container">
            <p>featuers</p>
            <h1>Do more with our app</h1>
            <div id="features_label">
                <input type="radio" name="tab" id="txt1"><label for="txt1">Communication</label>
                <input type="radio" name="tab" id="txt2"><label for="txt2" id="txt2">Scheduling</label>
                <input type="radio" name="tab" id="txt3"><label for="txt3" id="txt3">Messages</label>
                <input type="radio" name="tab" id="txt4"><label for="txt4" id="txt4">Live Chat</label>
                <div class="label_text">
                    <img src="./img/graphic.png" alt="">
                    <div>
                        <h2>Communicate with ease</h2>
                        <h4>Uniquely underwhelm premium outsourcing with proactive leadership skills.</h4>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer rutrum, urna eu pellentesque pretium, nisi nisi fermentum enim, et sagittis dolor nulla vel sapien. Vestibulum sit amet mattis ante. Ut placerat dui eu nulla congue tincidunt ac a nibh. Mauris accumsan pulvinar lorem placerat volutpat. Praesent quis facilisis elit. Sed condimentum neque quis ex porttitor,</p>
                        <p>malesuada faucibus augue aliquet. Sed elit est, eleifend sed dapibus a, semper a eros. Vestibulum blandit vulputate pharetra. Phasellus lobortis leo a nisl euismod, eu faucibus justo sollicitudin. Mauris consectetur, tortor sed tempor malesuada, sem nunc porta augue, in dictum arcu tortor id turpis. Proin aliquet vulputate aliquam.</p>
                    </div>
  
  (이하 생략)

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
#features{
    padding: 120px 0;
    background-color: #faf6fb;
}
.container{
    width: 60%;
    margin: 0 auto;
}
#features .container{
    justify-content: center;
    text-align: center;
/* 인라인 요소를 붙임 */
    letter-spacing: 0;
    word-spacing: 0;
    font-size: 0;
}
.container p{
    letter-spacing: 0;
    word-spacing: 0;
    font-size: 16px;
}
.container>p{
    font-size: 13px;
    text-transform: uppercase;
    margin-bottom: 5px;
}
#features h1{
    color: #633991;
    font-size: 30px;
    margin-bottom: 50px;
}
#features_label>input[type=radio]{
    display: none;
}
#features label{
    font-size: 18px;
    font-weight: 400;
    width: 25%;
    color: #b5a4c8;
    padding: 20px 50px;
    background-color: #f5eff7;
    display: inline-block;
    margin: 0;
}
.label_text{
    display: none;
    padding: 50px 50px;
    text-align: left;
    background-color: #ffffff;
}
.label_text img{
    padding-right: 50px;
}
.label_text div{
    padding-right: 30px;
}
.label_text h2{
    color: #633991;
    font-size: 40px;
    font-weight: 200;
    margin-bottom: 20px;
}
.label_text h4{
    color: #e38cb7;
    font-size: 18px;
    font-weight: 100;
    margin-bottom: 32px;
}
.label_text p:first-of-type{
    margin-bottom: 20px;
}
.label_text p{
    line-height: 24px;
}
#txt1:checked ~.label_text:first-of-type{
    display: flex;
    background-color: #ffffff;
    color: #777;
}
#txt1:checked+label{
    background-color: #ffffff;
    color: #777;
    border-top: 2px solid rgb(215, 105, 255);
}
#txt2:checked ~.label_text:nth-of-type(2){
    display: flex;
}
#txt2:checked+label{
    background-color: #ffffff;
    color: #777;
    border-top: 2px solid rgb(215, 105, 255);
}
#txt3:checked ~.label_text:nth-of-type(3){
    display: flex;
}
#txt3:checked+label{
    background-color: #ffffff;
    color: #777;
    border-top: 2px solid rgb(215, 105, 255);
}
#txt4:checked ~.label_text:nth-of-type(4){
    display: flex;
}
#txt4:checked+label{
    background-color: #ffffff;
    color: #777;
    border-top: 2px solid rgb(215, 105, 255);
}

원본 사이트: themewagon

https://themewagon.github.io/mobapp/

MobApp - App Landing Page Template

1485 Pacific St, Brooklyn, NY 11216 USA

themewagon.github.io

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="metronic.css">
</head>
<body>
    <section id="new_arrival">
        <div class="container">
            <h2>NEW ARRIVALS</h2>
            <div id="arrival_card">
                <div class="bigbox">
                    <div class="arrival_cards">
                        <div class="ab">
                            <img src="./img/sale.png" alt="" >
                        </div>
                        <div class="card_img">
                            <img src="./img/model1.jpg" alt="">
                            <div class="boxbox">
                                <div class="blackbox"><br></div>
                                <div class="abox">
                                    <a href="">ZOOM</a>
                                    <a href="">VIEW</a>
                                </div>
                            </div>
                        </div>
                        <div class="cards_prod">
                            <a href="">BERRY LACE DRESS</a>
                            <div>
                                <p>$29.00</p>
                                <a href="#">ADD TO CART</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bigbox">
                    <div class="arrival_cards">
                        <div class="card_img">
                            <img src="./img/model2.jpg" alt="">
                            <div class="boxbox">
                                <div class="blackbox"><br></div>
                                <div class="abox">
                                    <a href="">ZOOM</a>
                                    <a href="">VIEW</a>
                                </div>
                            </div>
                        </div>
                        <div class="cards_prod">
                            <a href="">BERRY LACE DRESS</a>
                            <div>
                                <p>$29.00</p>
                                <a href="#">ADD TO CART</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bigbox">
                    <div class="arrival_cards">
                        <div class="card_img">
                            <img src="./img/model6.jpg" alt="">
                            <div class="boxbox">
                                <div class="blackbox"><br></div>
                                <div class="abox">
                                    <a href="">ZOOM</a>
                                    <a href="">VIEW</a>
                                </div>
                            </div>
                        </div>
                        <div class="cards_prod">
                            <a href="">BERRY LACE DRESS</a>
                            <div>
                                <p>$29.00</p>
                                <a href="#">ADD TO CART</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bigbox">
                    <div class="arrival_cards">
                        <div class="abc">
                            <img src="./img/new.png" alt="">
                        </div>
                        <div class="card_img">
                            <img src="./img/model4.jpg" alt="">
                            <div class="boxbox">
                                <div class="blackbox"><br></div>
                                <div class="abox">
                                    <a href="">ZOOM</a>
                                    <a href="">VIEW</a>
                                </div>
                            </div>
                        </div>
                        <div class="cards_prod">
                            <a href="">BERRY LACE DRESS</a>
                            <div>
                                <p>$29.00</p>
                                <a href="#">ADD TO CART</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bigbox">
                    <div class="arrival_cards">
                        <div class="card_img">
                            <img src="./img/model5.jpg" alt="">
                            <div class="boxbox">
                                <div class="blackbox"><br></div>
                                <div class="abox">
                                    <a href="">ZOOM</a>
                                    <a href="">VIEW</a>
                                </div>
                            </div>
                        </div>
                        <div class="cards_prod">
                            <a href="">BERRY LACE DRESS</a>
                            <div>
                                <p>$29.00</p>
                                <a href="#">ADD TO CART</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</body>
</html>

*{
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
}
#new_arrival{
    background-color: #f7f7f7;
    padding: 130px;
}
.container{
    width: 70%;
    margin: 0 auto;
}
.container>h2{
    margin-bottom: 10px;
    font-weight: 100;
}
#arrival_card{
    display: flex;
    justify-content: space-evenly;
    width: 100%;
}
.bigbox{
    width: 20%;
}
.arrival_cards{
    width: 97%;
    background-color: white;
    position: relative;
    padding: 10px;
}
.arrival_cards img{
    width: 100%;
    margin-bottom: 10px;
    position: relative;
}
.ab img{
    position: absolute;
    top: 0;
    left: 0;
    width: 35%;
    z-index: 2;
}
.abc img{
    position: absolute;
    width: 35%;
    top: 0;
    left: 100%;
    transform: translateX(-100%);
    z-index: 2;
}
.cards_prod>a{
    color: #3e4d5c;
    font-weight: 100;
    font-size: 16px;
}
.cards_prod div{
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}
.card_img{
    width: 100%;
    position: relative;
}
.cards_prod p{
    font-size: 18px;
    color: #e84d1c;
}
.cards_prod>div>a{
    color: #a8aeb3;
    border: 1px #ededed solid;
    padding: 3px 6px;
}
.blackbox{
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    height: 100%;
    z-index: 5;

}
.arrival_cards:hover .blackbox{
    display: block;
    background-color: black;
    opacity: 0.5;
    width: 100%;
    height: 95%;
    z-index: 1;
}
.boxbox .abox{
    display: flex;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
}
.boxbox a{
    display: none;
    padding: 3px 10px;
    color: #fff;
    border: 1px #fff solid;
    margin: 0 5px 0;

}
.arrival_cards:hover .boxbox a{
    display: inline-block;

}
.boxbox a:hover{
    background-color: #e45000;
}
.cards_prod>div>a:hover{
    color: white;
    background-color: #e45000;
}

원본 사이트

https://themewagon.github.io/Metronic-Shop-UI/

-CUSTOMER VALUE-

themewagon.github.io

호버되면 불투명한 검은색 박스가 나오게 할 때 background를 rgba를 사용했으면 됐는데 괜히 div를 하나 더 만들어서 복잡하게 코드를 꼬아버렸다.

rgba 사용 x

div에 background 넣고 opacity 부여>a태그까지 투명해짐>a와 별개 형제 div를 만들어서 배경 넣고 opacity 부여>a태그 띄움

rgba 사용 o

div의 background를 grba 사용해서 불투명도 부여>배경만 투명해짐>a태그 정상 사용

첫 클론코딩에서 background 이미지가 따로 있었는데 그 위에 불투명도가 부여된 div 박스를 띄워야 했었다.(그리고 텍스가 드래그되지 않고 박스 밑에 들어가서 z-index를 따로 부여해 띄웠었다.)

그때의 경험이 강렬해서 이번에도 그렇게 해야 한다고 생각했던 것 같다.

'정리노트' 카테고리의 다른 글

[javascript] 변수와상수, 연산자, 함수, 객체, 이벤트 (0)	2023.11.22
[html, css] 슬라이드 기능, 클론코딩 (0)	2023.11.21
[html, css] Flexbox Froggy, CSS Dinner (0)	2023.11.17
[html, css] 웹사이트 클론코딩 (0)	2023.11.16
[html, css] (0)	2023.11.16

현재글[html, css] label과 radio 연결

Spring, 코딩 오류, 자바, JSP, 파이썬, 스프링, JavaScript, 팀 프로젝트, 코딩, 오블완, java, 자바스크립트, 팀프로젝트, 티스토리챌린지, Python, HTML, CSS, SQL, 코딩 공부, JS,

Today :
Yesterday :

코딩 공부 기록