체크박스형식으로 2가지 버튼을 만들었는데 text가 A,B 모두 같은내용으로 text가 써집니다...

조회수 50회

A타입 B타입 2가지의 버튼을 생성했는데 문제는 안에 text를 쓰면 A는 A의 텍스트내용 B는 B의 텍스트 내용이 나와야하는데 B기준으로 통일되어 출력됩니다 따로 text를 쓸려면 어떤 문제점을 해결해야 할까요...?

//HTML code
<div class="prof-bottom">
    <!-- <1번 Comment> -->
   <input class="modal-btn" type="checkbox" id="modal-btn" name="modal-btn" />
   <label for="modal-btn">A-Comment<i class="uil uil-expand-arrows"></i></label>
   <div class="modal">
     <div class="modal-wrap">
       <img src="https://3.bp.blogspot.com/-piZWCW2uUbg/W2fPXxkWZgI/AAAAAAAAOu0/eydmMjTIqcwLMHEEr2H7imqoRTxMw4o9QCLcBGAs/s1600/among_trees_night_dribbble.png" alt="">
      <p>A type</p>
     </div>
      <a href="#" class="logo" target="_blank"></a>
   </div>


   <!-- <2번 Comment> -->
   <input class="modal-btn" type="checkbox" id="modal-btn" name="modal-btn" />
   <label for="modal-btn">B-Comment<i class="uil uil-expand-arrows"></i></label>
   <div class="modal">
     <div class="modal-wrap">
       <img src="https://3.bp.blogspot.com/-piZWCW2uUbg/W2fPXxkWZgI/AAAAAAAAOu0/eydmMjTIqcwLMHEEr2H7imqoRTxMw4o9QCLcBGAs/s1600/among_trees_night_dribbble.png" alt="">
       <p>B type</p>
   </div>
   <a href="#" class="logo" target="_blank"></a>
 </div> <!-- prof-bottom 닫음 -->

//CSS code
.prof-bottom{
    width: 800px;
    height: 200px;
    font-size: 15px;
    line-height: 1.7;
    color: #1f2029;
    overflow: hidden;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 101%;
    text-align: center;
    margin: 0 auto;
    margin-top: 70px;
  }

.section{
  position: relative;
  width: 100%;
  display: block;

}
.full-height{
  min-height: 100vh;
}

[type="checkbox"]:checked,
[type="checkbox"]:not(:checked){
  position: absolute;
  left: -9999px;
}

.modal-btn:checked + label,
.modal-btn:not(:checked) + label{
  position: relative;
  font-size: 20px;
  line-height: 2;
  height: 50px;
  transition: all 200ms linear;
  border-radius: 4px;
  width: 240px;
  letter-spacing: 1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  align-self: center;
  border: none;
  cursor: pointer;
  background-color: #102770; /* 마우스 not 호버시 기본 배경색 파랑색 */
  color: #ffeba7; /* 마우스 not 호버시 기본 텍스트 아이보리색 */
  box-shadow: 0 12px 35px 0 rgba(16,39,112,.25);
  margin-top: 30px;
}
.modal-btn:not(:checked) + label:hover{
  background-color: #ffeba7; /* 마우스 호버시 배경화면 변경되는코드 */
  color: #102770; /* 마우스 호버시 글자색이 변경되는 코드 */
}
.modal-btn:checked + label .uil,
.modal-btn:not(:checked) + label .uil{
    margin-left: 10px;
    font-size: 18px;
}
.modal-btn:checked + label:after,
.modal-btn:not(:checked) + label:after{
  position: fixed;
  top: 30px; /*top, right 로 오른쪽 상단의 닫기버튼 위치를 조정할수있습니다.*/
  right: 30px;
  z-index: 110;
  width: 40px;
  border-radius: 3px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  font-size: 18px;
  background-color: #ffeba7;
  color: #102770; /* 파랑색 글씨 오른쪽 닫기버튼 글자색상 */
  content: '\2112';  /*닫기버튼 가상요소*/
  box-shadow: 0 12px 25px 0 rgba(16,39,112,.25);
  transition: all 200ms linear;
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
}
.modal-btn:checked + label:hover:after,
.modal-btn:not(:checked) + label:hover:after{
  background-color: #102770; /* 마우스 호버시 배경 파란색으로 변경 */
  color: #ffeba7;
}
.modal-btn:checked + label:after{
  transition: opacity 300ms 300ms ease, transform 300ms 300ms ease, background-color 250ms linear, color 250ms linear;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.modal{
  position: fixed;
  display: block;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 auto;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  overflow-x: hidden;
  background-color: rgba(31,32,41,.75);
  pointer-events: none;
  opacity: 0;
  transition: opacity 250ms 700ms ease;
}
.modal-btn:checked ~ .modal{
  pointer-events: auto;
  opacity: 1;
  transition: all 300ms ease-in-out;
}
.modal-wrap {
  position: relative;
  display: block;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 20px;
  border-radius: 4px;
  overflow: hidden;
  padding-bottom: 20px;
  background-color: #fff;
  align-self: center;
  box-shadow: 0 12px 25px 0 rgba(199,175,189,.25);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 250ms 250ms ease, transform 300ms 250ms ease;
}
.modal-wrap img {
  display: block;
  width: 100%;
  height: auto;
}
.modal-wrap p {
  padding: 20px 30px 0 30px;
}
.modal-btn:checked ~ .modal .modal-wrap{
  opacity: 1;
  transform: scale(1);
  transition: opacity 250ms 500ms ease, transform 350ms 500ms ease;
}


.logo {
    position: absolute;
    top: 25px;
    left: 25px;
    display: block;
    z-index: 1000;
    transition: all 250ms linear;
}
.logo img {
    height: 26px;
    width: auto;
    display: block;
    filter: brightness(10%);
    transition: filter 250ms 700ms linear;
}
.modal-btn:checked ~ .logo img {
    filter: brightness(100%);
    transition: all 250ms linear;
}


  • modal, modal-wrap이 A, B 둘 다 같은 클래스이름을 사용하고 있어서 그런거 아닐까요? 하민수 2020.9.12 20:54

답변을 하려면 로그인이 필요합니다.

Hashcode는 개발자들을 위한 무료 QnA 사이트입니다. 계정을 생성하셔야만 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)

ᕕ( ᐛ )ᕗ
로그인이 필요합니다

Hashcode는 개발자들을 위한 무료 QnA사이트 입니다. 계정을 생성하셔야만 글을 작성하실 수 있습니다.