개발나라 스용공주

[실습] 웹페이지 탭메뉴 콘텐츠 만들기 본문

WEB/포트폴리오

[실습] 웹페이지 탭메뉴 콘텐츠 만들기

스용공주 2024. 11. 8. 07:24
728x90
728x90

[ 1차 개발 - 기능 작동 구현 ]

* 라디오 버튼 사용, 인접선택자를 사용할 수 있는 구조를 통해 버튼작동과 이미지 변경 구현

=> 버튼 구조 : 라디오 버튼을 label과 연결 후 라디오 버튼 체크 여부에 따라 색상 변경 (최초의 버튼에 선체크)

=> 이미지 변경 구현 : 라디오 버튼과 이미지를 연결한 후 해당 라디오 버튼의 체크 유무에 따라 체크된 버튼과 연동된 이미지의 display 값 변경

 

[ html ]

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="css/style.css">
</head>
  
<body>

  <div class="container">
    <input type="radio" name="tabmenu" id="btn1" checked>
    <input type="radio" name="tabmenu" id="btn2">
    <input type="radio" name="tabmenu" id="btn3">
    
    <div class="content slide1">
      <img src="image/slide-01.jpg">
    </div>
    <div class="content slide2">
      <img src="image/slide-02.jpg">
    </div>
    <div class="content slide3">
      <img src="image/slide-03.jpg">
    </div>
    <div class="btn">
      <label for="btn1"></label>
      <label for="btn2"></label>
      <label for="btn3"></label>
    </div>
  </div>
  
  <script src="script\jquery-1.12.4.js"></script>
  <script src="script\custom.js"></script>

</body>
</html>

 

[ css ]

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

/* css 요소 */
.container {
    border : 1px solid red;
}
input {
    display: none;
}
.content {
    display: none;
    transition : 0.5s;
}
.btn {
    border : 1px solid red;
    width: inherit;
    height: 25px;
    text-align: center;
}
.btn label {
    display: inline-block;
    background-color: gray;
    width: 25px;
    height: 25px;
    border-radius: 50%;
}

/* 버튼 기능 - radio 버튼과 연동 */
input[id=btn1]:checked ~ .btn label[for=btn1] {
    background-color: red;
}
input[id=btn2]:checked ~ .btn label[for=btn2] {
    background-color: red;
}
input[id=btn3]:checked ~ .btn label[for=btn3] {
    background-color: red;
}

/* 이미지 기능 - 버튼 순서에 맞는 이미지 */
input[id=btn1]:checked ~ .slide1 {
    display: block;
}
input[id=btn2]:checked ~ .slide2 {
    display: block;
}
input[id=btn3]:checked ~ .slide3 {
    display: block;
}

 

 

 

 

[ 2차 개발 - 애니메이션 구현 ]

* position을 사용한 애니메이션 구현, position 변화를 인접선택자로 만든 버튼에 추가

=> position 변화 : 슬라이드 이미지의 위치 초기값을 왼쪽으로 치우치게 한 뒤 체크 상태일 경우 left값이 0이 되게 함

=> 버튼 체크 시에만 생성 : opacity의 값을 초기값이 0이 되도록 설정한 후 체크 상태일 경우 opacity의 값이 100%가 되도록 함

=> transition : 이 애니메이션들이 부드럽게 이어지도록 transition을 추가함

 

[ css ]

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.container {
    border : 3px solid green;
    width: 300px;
    height: 330px;
    position: relative;
    overflow: hidden;
}
input {
    display: none;
}
.content {
    visibility: hidden;
    transition : 0.5s;
    animation: ani 0.5s;
}
.slide1, .slide2, .slide3 {
    position: absolute;
    left : -30px;
    opacity: 0;
}
.btn {
    border : 1px solid red;
    width: inherit;
    height: 25px;
    text-align: center;
    position: absolute;
    bottom: 0;
}
.btn label {
    display: inline-block;
    background-color: gray;
    width: 25px;
    height: 25px;
    border-radius: 50%;
}
input[id=btn1]:checked ~ .btn label[for=btn1] {
    background-color: red;
}
input[id=btn2]:checked ~ .btn label[for=btn2] {
    background-color: red;
}
input[id=btn3]:checked ~ .btn label[for=btn3] {
    background-color: red;
}
input[id=btn1]:checked ~ .slide1 {
    left: 0;
    visibility: visible;
    opacity: 100%;
}
input[id=btn2]:checked ~ .slide2 {
    left: 0;
    visibility: visible;
    opacity: 100%;
}
input[id=btn3]:checked ~ .slide3 {
    left: 0;
    visibility: visible;
    opacity: 100%;
}

 

 

 

[ 3차 개발 - 세부사항 구현 ]

* 각 슬라이드마다 디테일 기능 추가 (html 코드 추가)

=> 원형의 세부사항 표시란을 생성 : 슬라이드마다 색과 내용이 달라짐(부모가 슬라이드) ⇨ 부모인 슬라이드의 왼쪽에서 원점으로 오는 코드의 영향을 받지 않는 것처럼 보이기 위해 position값에서 슬라이드의 애니메이션에 사용되는 값만큼을 더 더해준다.

 

[ html ]

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="css/style.css">
</head>
  
<body>

  <div class="container">
    <input type="radio" name="tabmenu" id="btn1" checked>
    <input type="radio" name="tabmenu" id="btn2">
    <input type="radio" name="tabmenu" id="btn3">
    
    <div class="content slide1">
      <div class="circle">
        <div>Sale</div><div>50%</div>
      </div>
      <img src="image/slide-01.jpg">
    </div>
    <div class="content slide2">
      <div class="circle">
        <div>Sale</div><div>40%</div>
      </div>
      <img src="image/slide-02.jpg">
    </div>
    <div class="content slide3">
      <div class="circle">
        <div>Sale</div><div>30%</div>
      </div>
      <img src="image/slide-03.jpg">
    </div>
    <div class="btn">
      <label for="btn1"></label>
      <label for="btn2"></label>
      <label for="btn3"></label>
    </div>
  </div>
  
  <script src="script\jquery-1.12.4.js"></script>
  <script src="script\custom.js"></script>

</body>
</html>

 

[ css ]

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.container {
    /* border : 3px solid green; */
    width: 300px;
    height: 330px;
    position: relative;
    overflow: hidden;
}
input {
    display: none;
}
.content {
    transition : 0.5s;
}
.circle {
    position: absolute;
    left: 40px;
    top : -15px;
    color : white;
    font-weight: bold;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    text-align: center;
    transition: 0.5s;
}
.circle div:nth-child(1) {
    font-size: 35px;
    padding-top : 11px;
}
.circle div:nth-child(2) {
    font-size: 20px;
}
.slide1, .slide2, .slide3 {
    position: absolute;
    left : -30px;
    opacity: 0;
}
.btn {
    /* border : 1px solid red; */
    width: inherit;
    height: 25px;
    text-align: center;
    position: absolute;
    bottom: 0;
}
.btn label {
    display: inline-block;
    background-color: gray;
    width: 25px;
    height: 25px;
    border-radius: 50%;
}

input[id=btn1]:checked ~ .btn label[for=btn1] {
    background-color: red;
}
input[id=btn2]:checked ~ .btn label[for=btn2] {
    background-color: red;
}
input[id=btn3]:checked ~ .btn label[for=btn3] {
    background-color: red;
}

input[id=btn1]:checked ~ .slide1 {
    left: 0;
    opacity: 100%;
}
input[id=btn2]:checked ~ .slide2 {
    left: 0;
    opacity: 100%;
}
input[id=btn3]:checked ~ .slide3 {
    left: 0;
    opacity: 100%;
}

input[id=btn1]:checked ~ .slide1 .circle {
    top : 15px;
    left: 10px;
    background-color: crimson;
}
input[id=btn2]:checked ~ .slide2 .circle {
    top : 15px;
    left: 10px;
    background-color: royalblue;
}
input[id=btn3]:checked ~ .slide3 .circle {
    top : 15px;
    left: 10px;
    background-color: green;
}

 

 

블로그 업로드 : 인접선택자

728x90
728x90

'WEB > 포트폴리오' 카테고리의 다른 글

[실습] hover시 상품 상세 설명  (1) 2024.11.16
[실습] 슬라이드 애니메이션이 적용된 탭메뉴 만들기  (0) 2024.11.08
[실습] 웹페이지 - To Do list 어플리케이션 (실습과정 상세 소개)  (6) 2024.10.09
[실습] 웹페이지 - 다크모드 전환 기능 웹페이지 만들기 (실습과정 상세 소개)  (0) 2024.10.02
'WEB/포트폴리오' Related Articles more
Comments