티스토리 뷰

코딩/오류 노트

[7주 1일차] HTML CSS 코드 수정

ehzim 2023. 11. 20. 22:09

 

오늘 작성한 CSS 코드를 조금 수정해 보았다.

라디오 버튼을 선택하면 연결된 라벨의 백그라운드 색상이 변경되도록 수정하였다.

또한, 라벨의 위에 overline 줄이 생성되도록 수정하였다.

 

label{
    display: inline-block;
    width: 25%;
    text-align: center;
    /* border: 1px solid #f30d0d; */
    padding: 16px 16px;
    font-size: 20px;
    background-color: rgb(252, 236, 252);
    color: rgb(205, 166, 241);
}

#p > div{
    font-size: 20px;
    padding: 0;
    width: 100%;
    display: none;
}

#a:checked ~ #p #b1{display:block; } 
#b:checked ~ #p #b2{display:block; } 
#c:checked ~ #p #b3{display:block; } 
#d:checked ~ #p #b4{display:block; } 

#a:checked ~ #l1 { background-color: white; text-decoration: overline 3px purple;}
#b:checked ~ #l2 { background-color: white; text-decoration: overline 3px purple;}
#c:checked ~ #l3 { background-color: white; text-decoration: overline 3px purple;}
#d:checked ~ #l4 { background-color: white; text-decoration: overline 3px purple;}

 

수정된 부분의 코드이다.

 #a 아이디를 chekced하면 #l1이 실행되는데 배경색과 오버라인을 적용하여 출력되도록 수정하였다.

위의 기존 label의 배경색과 글자색을 주어 구분이 가능하도록 작성하였다.

 

 

 

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="pp.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="title">
        <p>FEATURES</p>
        <h1>Do more with our app</h1>
    </div>
    <div class="container">
        <input type="radio" name="r" id="a">
        <input type="radio" name="r" id="b">
        <input type="radio" name="r" id="c">
        <input type="radio" name="r" id="d">
        <br>
        <label id="l1" for="a"><h3>Communication</h3></label>
        <label id="l2"for="b"><h3>Scheuling</h3></label>
        <label id="l3"for="c"><h3>Messages</h3></label>
        <label id="l4" for="d"><h3>Live Chat</h3></label>
        <div id="p">           
            <div id="b1">
                <div id="text_img">
                    <img src="image/graphic.png" alt="">
                    <div id="text">
                        <h1>Communicate with ease</h1>
                        <p class="p1">Uniquely underwhelm premium outsourcing with proactive leadership skills.</p>
                        <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>
                </div>
            </div>
            <div id="b2">
                <div id="text_img">
                    <div id="text">
                        <h1>Scheduling when you want</h1>
                        <p class="p1">Uniquely underwhelm premium outsourcing with proactive leadership skills.</p>
                        <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>
                    <img src="image/graphic.png" alt="">
                </div>
            </div>
            <div id="b3">
                <div id="text_img">
                    <div id="text">
                        <h1>Realtime Messaging service</h1>
                        <p class="p1">Uniquely underwhelm premium outsourcing with proactive leadership skills.</p>
                        <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>
                    <img src="image/graphic.png" alt="">
                </div>
            </div>
            <div id="b4">
                <div id="text_img">
                    <img src="image/graphic.png" alt="">
                    <div id="text">
                        <h1>Live chat when you needed</h1>
                        <p class="p1">Uniquely underwhelm premium outsourcing with proactive leadership skills.</p>
                        <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>
                </div>
            </div>
        </div>    
    </div>
</body>
</html>

 

 

 

CSS

*{
    padding: 0;
    margin: 0;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
}
#title{
    text-align: center;
}
#title h1{
    padding-bottom: 25px;
}
.container{
    width: 60%;
    margin: 0 auto;
    letter-spacing: 0;
    word-spacing: 0px;
    font-size: 0;
    
}
input{
    display: none;
}
label{
    display: inline-block;
    width: 25%;
    text-align: center;
    /* border: 1px solid #f30d0d; */
    padding: 16px 16px;
    font-size: 20px;
    background-color: rgb(252, 236, 252);
    color: rgb(205, 166, 241);
}

#p > div{
    font-size: 20px;
    padding: 0;
    width: 100%;
    display: none;
}

#a:checked ~ #p #b1{display:block; } 
#b:checked ~ #p #b2{display:block; } 
#c:checked ~ #p #b3{display:block; } 
#d:checked ~ #p #b4{display:block; } 

#a:checked ~ #l1 { background-color: white; text-decoration: overline 3px purple;}
#b:checked ~ #l2 { background-color: white; text-decoration: overline 3px purple;}
#c:checked ~ #l3 { background-color: white; text-decoration: overline 3px purple;}
#d:checked ~ #l4 { background-color: white; text-decoration: overline 3px purple;}

#b1{
    width: 100%;
    height: auto;
}
#text_img{
    display: flex;
    padding: 15px;
    width: 100%;
    /* height: 60%; */
}
#text{
    width: 70%;
    padding: 15px;
}
img{
    width:30%;
    padding: 20px;
    height: auto;
}
h1{
    color: purple;
    padding: 10px;
}
p.p1{
    color: hotpink;
    padding: 10px 0;
}
p{
    padding: 10px 0;
}

 

저작자표시

'코딩 > 오류 노트' 카테고리의 다른 글

[7주 2일차] 코드 수정 및 보충  (0) 2023.11.21
[7주 1일차] HTML CSS 코드 수정  (0) 2023.11.21
public  (0) 2023.11.03
의문점  (0) 2023.10.28
withDayOfYear  (0) 2023.10.27
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday