인프런 커뮤니티 질문&답변

oo !님의 프로필 이미지
oo !

작성한 질문수

반응형 웹사이트 포트폴리오(Architecture Agency)

PC 레이아웃 섹션 상세 퍼블리싱(Project Section) - 탭 콘텐츠 퍼블리싱 #01

선생님 project 섹션 2개로 늘렸는데 2개의 섹션중 하나만 checked가 적용됩니다. 이럴땐 어떻게해야할까요?

해결된 질문

작성

·

200

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반응형 웹

답변 4

1

MostOneBrush님의 프로필 이미지
MostOneBrush

강사님은 아니지만 지나가다가 보고 작성합니다

              <!-- 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라는 이름으로 시작하는 경우에 대해 적용됩니다.

oo !님의 프로필 이미지
oo !
질문자

친절한 답변 감사합니다  ㅜㅜㅜㅜ!!!

0

코딩웍스(Coding Works)님의 프로필 이미지
코딩웍스(Coding Works)
지식공유자

MostOneBrush 님~ 대신 답변 감사합니다.

MostOneBrush 말씀처럼 name을 다르게 해주시면 될 것 같습니다.

oo !님의 프로필 이미지
oo !
질문자

넵! 고쳤습니다 ㅠㅠ! 좋은강의 잘 보고있습니다 선생님!

0

oo !님의 프로필 이미지
oo !
질문자

0

oo !님의 프로필 이미지
oo !
질문자

oo !님의 프로필 이미지
oo !

작성한 질문수

전체 Q&A
질문하기