인프런 커뮤니티 질문&답변
작성한 질문수
선생님 project 섹션 2개로 늘렸는데 2개의 섹션중 하나만 checked가 적용됩니다. 이럴땐 어떻게해야할까요?
해결된 질문
작성
·
296
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;
}
퀴즈
45%나 틀려요. 한번 도전해보세요!
프로젝트 섹션의 복잡한 UI를 개발할 때, 별도의 HTML 파일을 만들어 프로토타입을 먼저 제작하는 주된 이유는 무엇일까요?
최종 파일의 CSS 충돌을 방지하기 위해서입니다.
기능 개발에 집중하고 복잡성을 줄이기 위해서입니다.
자바스크립트 코드 작성을 미리 테스트하기 위해서입니다.
이미지 파일 로딩 속도를 최적화하기 위해서입니다.
답변 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
0
0
친절한 답변 감사합니다 ㅜㅜㅜㅜ!!!