티스토리 뷰

코딩/오류 노트

label 안의 img 파일 오류

ehzim 2023. 11. 29. 01:48

 

HTML

<!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="ssss.css">
</head>
<body>
    <div class="container">
        <input type="radio" name="ra" id="r1">
        <input type="radio" name="ra" id="r2">
        <input type="radio" name="ra" id="r3">
        <div class="slideall">
            <ul class="slidelist">
                <li>
                    <a>
                       <label for="r3" class="left"><img class="left" src="image/left.png" alt=""></label>
                       <img src="image/Q.jpg" alt="">
                       <label for="r2" class="right"><img class="right" src="image/right.png" alt=""></label> 
                    </a>
                </li>
                <li>
                    <a>
                       <label for="r1" class="left"><img class="left" src="image/left.png" alt=""></label>
                       <img src="image/ju4.jpg" alt="">
                       <label for="r3" class="right"><img class="right" src="image/right.png" alt=""></label> 
                    </a>
                </li>
                <li>
                    <a>
                       <label for="r2" class="left"><img class="left" src="image/left.png" alt=""></label>
                       <img src="image/jju.jpg" alt="">
                       <label for="r1" class="right"><img class="right" src="image/right.png" alt=""></label> 
                    </a>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>

 

 

label에서 바로 img를 주도록 코드를 작성했다.

그런데 right 이미지가 나오지 않는 오류가 발생했다.

 

*{
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
}
/* input{
    display: none;
} */
.slideall{
    margin: 0 auto;
    max-width: 1200px;
    width: 100%;
    overflow: hidden;
}
.slidelist{
    white-space: nowrap;
    font-size: 0;
}
li{
    display: inline-block;
    width: 100%;
}
a{
    display: block;
    position: relative;
}
img{
    width: 100%;
}
label{
    position: absolute;
    z-index: 1;
    top:30%;
    padding: 10px;
    /* transform: translateY(-50%); */
}


#r1:checked ~ .slideall .slidelist > li{
    transform: translate(0%);
}
#r2:checked ~ .slideall .slidelist > li{
    transform: translate(-100%);
}
#r3:checked ~ .slideall .slidelist > li{
    transform: translate(-200%);
}

 

 

 

위와 같은 코드를 작성했을 때 right의 이미지가 보이지않았다.

 

label.left {
    left: 0;
}

label.right {
    right: 0;
}

 

 

위와 같은 코드를 추가하여 

left는 left:0 right는 right=0 값을 주어 각각 슬라이드의 양 끝에 위치하도록 하였다.

absolute를 설정한 요소는 상위 요소를 기준으로 좌표를 정할 수 있는데 이때 상위 요소 기준이라 안보이는 위치에 가 있을 경우가 있어 absolute한 요소에 위치를 주는 것은 필수이다.

위치를 주고나니까 right의 이미지가 보였다.

저작자표시

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

td 오류  (1) 2023.12.07
선언문 위치에 따른 차이점  (1) 2023.11.29
split & replace  (1) 2023.11.28
addeventlistener  (0) 2023.11.27
javascript 코드 위치에 따른 오류  (2) 2023.11.23
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday