Cộng đồng Hỏi & Đáp của Inflearn
câu hỏi đã được viết
선생님 project 섹션 2개로 늘렸는데 2개의 섹션중 하나만 checked가 적용됩니다. 이럴땐 어떻게해야할까요?
Đã giải quyết
Viết
·
279
1
<!-- work : responsive -->
<section class="cd-section" id="works1">
<div>
<div class="content">
<article class="work_inner">
<input type="radio" name="tabmenu" id="tab1" checked />
<input type="radio" name="tabmenu" id="tab2" />
<input type="radio" name="tabmenu" id="tab3" />
<input type="radio" name="tabmenu" id="tab4" />
<input type="radio" name="tabmenu" id="tab5" />
<input type="radio" name="tabmenu" id="tab6" />
<div class="r_tabs">
<div class="tab">
<div class="work_info" data-text="01">
<h3>WORK<span>_반응형</span></h3>
<ul>
<li><b>Topic</b> : Food</li>
<li><b>Name of work</b> : <span>육쌈냉면</span></li>
<li><b>Tool</b> : Visual Studio Code / Figma</li>
</ul>
<div class="detail">
<div><span>21.04</span>Completed Date</div>
<div><span>100%</span>Contribution</div>
</div>
<a href="detail_yookssam.html" class="viewmore"
>VIEW MORE <i class="fas fa-arrow-right"></i
></a>
</div>
<div class="work_pic">
<div class="r_pic1"></div>
<div class="r_pic2"></div>
</div>
</div>
<div class="tab">
<div class="work_info" data-text="02">
<h3>WORK<span>_반응형</span></h3>
<ul>
<li><b>Topic</b> : Fashion</li>
<li>
<b>Name of work</b> : <span>메종 마르지엘라</span>
</li>
<li><b>Tool</b> : Visual Studio Code / Figma</li>
</ul>
<div class="detail">
<div><span>21.01</span>Completed Date</div>
<div><span>100%</span>Contribution</div>
</div>
<a href="detail_mm.html" class="viewmore"
>VIEW MORE <i class="fas fa-arrow-right"></i
></a>
</div>
<div class="work_pic">
<div class="r_pic3"></div>
<div class="r_pic4"></div>
</div>
</div>
<div class="tab">
<div class="work_info" data-text="03">
<h3>WORK<span>_반응형</span></h3>
<ul>
<li><b>Topic</b> : Cosmetics</li>
<li><b>Name of work</b> : <span>시드물</span></li>
<li><b>Tool</b> : Visual Studio Code / Figma</li>
</ul>
<div class="detail">
<div><span>21.04</span>Completed Date</div>
<div><span>100%</span>Contribution</div>
</div>
<a href="detail_sidmool.html" class="viewmore"
>VIEW MORE <i class="fas fa-arrow-right"></i
></a>
</div>
<div class="work_pic">
<div class="r_pic5"></div>
<div class="r_pic6"></div>
</div>
</div>
<div class="tab">
<div class="work_info" data-text="04">
<h3>WORK<span>_반응형</span></h3>
<ul>
<li><b>Topic</b> : Art</li>
<li><b>Name of work</b> : <span>성남아트센터</span></li>
<li><b>Tool</b> : Visual Studio Code / Figma</li>
</ul>
<div class="detail">
<div><span>21.04</span>Completed Date</div>
<div><span>100%</span>Contribution</div>
</div>
<a href="detail_seongnam.html" class="viewmore"
>VIEW MORE <i class="fas fa-arrow-right"></i
></a>
</div>
<div class="work_pic">
<div class="r_pic7"></div>
<div class="r_pic8"></div>
</div>
</div>
<div class="tab">
<div class="work_info" data-text="05">
<h3>WORK<span>_반응형</span></h3>
<ul>
<li><b>Topic</b> : Products</li>
<li><b>Name of work</b> : <span>자코모</span></li>
<li><b>Tool</b> : Visual Studio Code / Figma</li>
</ul>
<div class="detail">
<div><span>21.03</span>Completed Date</div>
<div><span>100%</span>Contribution</div>
</div>
<a href="detail_jacomo.html" class="viewmore"
>VIEW MORE <i class="fas fa-arrow-right"></i
></a>
</div>
<div class="work_pic">
<div class="r_pic9"></div>
<div class="r_pic10"></div>
</div>
</div>
<div class="tab">
<div class="work_info" data-text="06">
<h3>WORK<span>_반응형</span></h3>
<ul>
<li><b>Topic</b> : Fashion</li>
<li><b>Name of work</b> : <span>반스</span></li>
<li><b>Tool</b> : Visual Studio Code / Figma</li>
</ul>
<div class="detail">
<div><span>21.04</span>Completed Date</div>
<div><span>100%</span>Contribution</div>
</div>
<a href="detail_vans.html" class="viewmore"
>VIEW MORE <i class="fas fa-arrow-right"></i
></a>
</div>
<div class="work_pic">
<div class="r_pic11"></div>
<div class="r_pic12"></div>
</div>
</div>
</div>
<div class="btn">
<label for="tab1"><!-- tab1 --></label>
<label for="tab2"><!-- tab2 --></label>
<label for="tab3"><!-- tab3 --></label>
<label for="tab4"><!-- tab4 --></label>
<label for="tab5"><!-- tab5 --></label>
<label for="tab6"><!-- tab6 --></label>
</div>
</article>
</div>
</div>
</section>
<!-- work : adaptive -->
<section class="cd-section" id="works2">
<div>
<div class="content">
<article class="work_inner">
<input type="radio" name="tabmenu" id="tab10" checked />
<input type="radio" name="tabmenu" id="tab11" />
<input type="radio" name="tabmenu" id="tab12" />
<input type="radio" name="tabmenu" id="tab13" />
<div class="a_tabs">
<div class="tab">
<div class="work_info" data-text="01">
<h3>WORK<span>_적응형</span></h3>
<ul>
<li><b>Topic</b> : Place</li>
<li><b>Name of work</b> : <span>쌈지길</span></li>
<li><b>Tool</b> : Visual Studio Code / Figma</li>
</ul>
<div class="detail">
<div><span>20.12</span>Completed Date</div>
<div><span>100%</span>Contribution</div>
</div>
<a href="detail_ssamzi.html" class="viewmore"
>VIEW MORE <i class="fas fa-arrow-right"></i
></a>
</div>
<div class="work_pic">
<div class="a_pic1"></div>
<div class="a_pic2"></div>
</div>
</div>
<div class="tab">
<div class="work_info" data-text="02">
<h3>WORK<span>_적응형</span></h3>
<ul>
<li><b>Topic</b> : Person</li>
<li><b>Name of work</b> : <span>데이비드 간디</span></li>
<li><b>Tool</b> : Visual Studio Code / Figma</li>
</ul>
<div class="detail">
<div><span>21.12</span>Completed Date</div>
<div><span>100%</span>Contribution</div>
</div>
<a href="detail_gandy.html" class="viewmore"
>VIEW MORE <i class="fas fa-arrow-right"></i
></a>
</div>
<div class="work_pic">
<div class="a_pic3"></div>
<div class="a_pic4"></div>
</div>
</div>
<div class="tab">
<div class="work_info" data-text="03">
<h3>WORK<span>_적응형</span></h3>
<ul>
<li><b>Topic</b> : Cosmetics</li>
<li><b>Name of work</b> : <span>조 말론 코오롱</span></li>
<li><b>Tool</b> : Visual Studio Code / Figma</li>
</ul>
<div class="detail">
<div><span>20.11</span>Completed Date</div>
<div><span>100%</span>Contribution</div>
</div>
<a href="detail_jm.html" class="viewmore"
>VIEW MORE <i class="fas fa-arrow-right"></i
></a>
</div>
<div class="work_pic">
<div class="a_pic5"></div>
<div class="a_pic6"></div>
</div>
</div>
<div class="tab">
<div class="work_info" data-text="04">
<h3>WORK<span>_적응형</span></h3>
<ul>
<li><b>Topic</b> : Food</li>
<li><b>Name of work</b> : <span>하겐다즈</span></li>
<li><b>Tool</b> : Visual Studio Code / Figma</li>
</ul>
<div class="detail">
<div><span>21.03</span>Completed Date</div>
<div><span>100%</span>Contribution</div>
</div>
<a href="detail_haagan.html" class="viewmore"
>VIEW MORE <i class="fas fa-arrow-right"></i
></a>
</div>
<div class="work_pic">
<div class="a_pic7"></div>
<div class="a_pic8"></div>
</div>
</div>
</div>
<div class="btn">
<label for="tab10"><!-- tab1 --></label>
<label for="tab11"><!-- tab2 --></label>
<label for="tab12"><!-- tab3 --></label>
<label for="tab13"><!-- tab4 --></label>
</div>
</article>
</div>
</div>
</section>/* ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ section : works */
.work_inner {
height: 100%;
border: 2px solid #ddd;
overflow: hidden;
}
/* 속성선택자 */
input[name="tabmenu"] {
display: none;
}
.btn {
/* border: 2px solid #000; */
position: absolute;
left: 0px;
bottom: 100px;
width: 30%;
text-align: center;
}
.btn label {
cursor: pointer;
width: 5px;
height: 5px;
border-radius: 50%;
background-color: #000;
display: inline-block;
margin-right: 15px;
position: relative;
}
.btn label::before {
content: "";
display: inline-block;
border: 1px solid transparent;
width: 15px;
height: 15px;
border-radius: 50%;
position: absolute;
left: -6px;
top: -6px;
transition: 0.3s;
}
.btn label:hover::before {
border: 1px solid #aaa;
}
/* 반응형 */
input[id="tab1"]:checked ~ .btn label[for="tab1"]::before,
input[id="tab2"]:checked ~ .btn label[for="tab2"]::before,
input[id="tab3"]:checked ~ .btn label[for="tab3"]::before,
input[id="tab4"]:checked ~ .btn label[for="tab4"]::before,
input[id="tab5"]:checked ~ .btn label[for="tab5"]::before,
input[id="tab6"]:checked ~ .btn label[for="tab6"]::before {
border: 1px solid #222;
}
input[id="tab1"]:checked ~ .r_tabs {
margin-left: 0;
}
input[id="tab2"]:checked ~ .r_tabs {
margin-left: -100%;
}
input[id="tab3"]:checked ~ .r_tabs {
margin-left: -200%;
}
input[id="tab4"]:checked ~ .r_tabs {
margin-left: -300%;
}
input[id="tab5"]:checked ~ .r_tabs {
margin-left: -400%;
}
input[id="tab6"]:checked ~ .r_tabs {
margin-left: -500%;
}
/* 적응형 */
input[id="tab10"]:checked ~ .btn label[for="tab10"]::before,
input[id="tab11"]:checked ~ .btn label[for="tab11"]::before,
input[id="tab12"]:checked ~ .btn label[for="tab12"]::before,
input[id="tab13"]:checked ~ .btn label[for="tab13"]::before {
border: 1px solid #222;
}
input[id="tab10"]:checked ~ .a_tabs {
margin-left: 0;
}
input[id="tab11"]:checked ~ .a_tabs {
margin-left: -100%;
}
input[id="tab12"]:checked ~ .a_tabs {
margin-left: -200%;
}
input[id="tab13"]:checked ~ .a_tabs {
margin-left: -300%;
}
.r_tabs {
width: 600%;
height: 100%;
/* border: 2px solid green; */
transition: 0.5s;
}
.r_tabs .tab {
height: 100%;
/* width: 100%; 로 하면 안되는이유 : 300의 100을 받아오는거임 그래서 300으로 생각하기
때문에 걍 300의 3등분이라 생각해서 33.3333을 써줘야하는 것 */
width: calc(100% / 6);
float: left;
}
.a_tabs {
width: 400%;
height: 100%;
/* border: 2px solid green; */
transition: 0.5s;
}
.a_tabs .tab {
height: 100%;
/* width: 100%; 로 하면 안되는이유 : 300의 100을 받아오는거임 그래서 300으로 생각하기
때문에 걍 300의 3등분이라 생각해서 33.3333을 써줘야하는 것 */
width: 25%;
float: left;
}
.tab > div {
/* border: 2px solid yellow; */
height: 100%;
float: left;
}
jquery웹 디자인HTML/CSS반응형-웹
Câu trả lời 4
1
강사님은 아니지만 지나가다가 보고 작성합니다
<!-- work : responsive -->
<input type="radio" name="tabmenu" id="tab1" checked />
<input type="radio" name="tabmenu" id="tab2" />
<input type="radio" name="tabmenu" id="tab3" />
<input type="radio" name="tabmenu" id="tab4" />
<input type="radio" name="tabmenu" id="tab5" />
<input type="radio" name="tabmenu" id="tab6" />
<!-- work : adaptive -->
<input type="radio" name="tabmenu" id="tab10" checked />
<input type="radio" name="tabmenu" id="tab11" />
<input type="radio" name="tabmenu" id="tab12" />
<input type="radio" name="tabmenu" id="tab13" />현재 작성하신 코드를 보면 반응형 슬라이드랑 적응형 슬라이드의 input type은 radio로 선언되어 있고 동일한 name으로 명시해주셨는데 이 경우 radio의 특성상 동일한 name을 가진 것들 중 하나만 선택되기 때문에 하나만 노출되는 것이 정상입니다.
만약 별도로 선택되는 것을 원하실 경우 다음과 각각 다른 name을 가지도록 같이 바꿔주셔야하는데요
<!-- work : responsive -->
<input type="radio" name="tabmenu1" id="tab1" checked />
<input type="radio" name="tabmenu1" id="tab2" />
<input type="radio" name="tabmenu1" id="tab3" />
<input type="radio" name="tabmenu1" id="tab4" />
<input type="radio" name="tabmenu1" id="tab5" />
<input type="radio" name="tabmenu1" id="tab6" />
<!-- work : adaptive -->
<input type="radio" name="tabmenu2" id="tab10" checked />
<input type="radio" name="tabmenu2" id="tab11" />
<input type="radio" name="tabmenu2" id="tab12" />
<input type="radio" name="tabmenu2" id="tab13" />이렇게 별도의 name을 지정해서 설정해주시고
/* 속성선택자 */
input[name^="tabmenu"] {
display: none;
}css는 셀렉터를 이렇게 바꿔주시면 name 속성이 tabmenu라는 이름으로 시작하는 경우에 대해 적용됩니다.
0
codingworks
Người chia sẻ kiến thức
0
0
친절한 답변 감사합니다 ㅜㅜㅜㅜ!!!