티스토리 뷰

코딩/오류 노트

[7주 2일차] border사용

ehzim 2023. 11. 21. 17:57 
<!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: 0 16px 16px;
    /* margin-top: 16px; */
    font-size: 20px;
    background-color: rgb(252, 236, 252);
    color: rgb(205, 166, 241);
}
h3{
    margin-top: 16px;
}

#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; border-top: 2px solid hotpink;}
#b:checked ~ #l2 { background-color: white; border-top: 2px solid hotpink;}
#c:checked ~ #l3 { background-color: white; border-top: 2px solid hotpink;}
#d:checked ~ #l4 { background-color: white; border-top: 2px solid hotpink;}

#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;
}

 

 

 

 

 

 

 

 

이전 코드에서는 라벨 위의 선 위치에 대한 문제가 발생했다.

 

이전의 코드에서는 overline을 사용하여 글자 위에 선을 주기 위해 overline을 사용하였다.

#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;}

 

 

border를 사용하여 선을 만들어주도록 코드를 수정하였다.

#a:checked ~ #l1 { background-color: white; border-top: 2px solid hotpink;}
#b:checked ~ #l2 { background-color: white; border-top: 2px solid hotpink;}
#c:checked ~ #l3 { background-color: white; border-top: 2px solid hotpink;}
#d:checked ~ #l4 { background-color: white; border-top: 2px solid hotpink;}

 

저작자표시

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

addeventlistener  (0) 2023.11.27
javascript 코드 위치에 따른 오류  (2) 2023.11.23
[7주 2일차] 코드 수정 및 보충  (0) 2023.11.21
[7주 1일차] HTML CSS 코드 수정  (0) 2023.11.21
[7주 1일차] HTML CSS 코드 수정  (0) 2023.11.20
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday