본문 바로가기
연습/JS

JS - 기능 구현 연습

by hyeon1016 2024. 9. 3.

자주 사용할 것 같은 기능

드롭다운, 슬라이드, 탭 기능을 연습했다.

 

HTML

더보기 
<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./test.css">
</head>

<body>
  <!-- 헤더 -->
  <header>
    <div class="container">
      <h1>로고</h1>
      <ul id="header_menu">
        <li><a href="#">HOME</a></li>
        <li><a href="#">SERVICE</a></li>
        <li><a href="#">CONTACTS</a></li>
        <li><a href="#">USER</a></li>
        <li id="page">
          <a href="#">PAGE</a>
          <ul id="page_list">
            <li><a href="#">A</a></li>
            <li><a href="#">N</a></li>
            <li><a href="#">E</a></li>
            <li><a href="#">Y</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </header>
  <!-- 끝 -->

  <!-- 메인 -->
  <main>
    <!-- 슬라이드 -->
    <div class="slideBox">
      <ul>
        <li class="slide">
          <h3>1</h3>
          <p>내용</p>
        </li>
        <li class="slide">
          <h3>2</h3>
          <p>내용</p>
        </li>
        <li class="slide">
          <h3>3</h3>
          <p>내용</p>
        </li>
      </ul>
      <div id="left">왼</div>
      <div id="right">오</div>
    </div>
    <!-- 끝 -->

    <!-- 탭 -->
    <div class="tabBox">
      <div class="container">
        <ul class="tab_menu">
          <li class="tab" id="tab1">탭 1</li>
          <li class="tab" id="tab2">탭 2</li>
          <li class="tab" id="tab3">탭 3</li>
        </ul>
        <hr>
        <ul class="tab_content">
          <li class="content" id="content1">콘텐츠1</li>
          <li class="content" id="content2">콘텐츠2</li>
          <li class="content" id="content3">콘텐츠3</li>
        </ul>
      </div>
    </div>
    <!-- 끝 -->
  </main>
  <!-- 끝 -->
  <script src="./test.js"></script>
</body>

</html>

CSS

더보기 
* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  box-sizing: border-box;
}

.container {
  width: 70%;
  margin: 0 auto;
}

/* 헤더 */

header {
  background-color: brown;
}

header .container {
  height: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

h1 {
  font-size: 30px ;
  color: aliceblue;
}

header a {
  color: aliceblue;
}

#header_menu {
  width: 80%;
  display: flex;
  justify-content: space-between;
  margin: 0px 30px;
}

#page {
  position: relative;
}

#page_list {
  width: 100px;
  border: 2px solid;
  background-color: gray;
  padding: 10px 15px;
  position: absolute;
  transform: translateY(10%);
  z-index: 1;
}

#page_list li{
  margin: 5px 0px;
}
/* 탭끝 */

/* 슬라이드 */

.slideBox {
  height: 500px;
  background-color: rgb(197, 80, 80);
  position: relative;
}

.slideBox ul {
  width: 50%;
  height: 70%;
  border: 2px solid;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  overflow: hidden;
  font-size: 0px;
}

.slide {
  width: 100%;
  height: 100%;
  border: 2px solid;
  padding: 40px;
  display: inline-block;
  transition: all 1s;
}

.slide h3 {
  font-size: 40px;
  color: wheat;
}

.slide p {
  font-size: 20px;
  color: wheat;
  margin-top: 30px;
}

#left {
  width: 60px;
  height: 60px;
  font-size: 30px;
  color: wheat;
  background-color: black;
  border-radius: 50%;
  padding: 10px;
  position: absolute;
  top : 50%;
  left: 4%;
  transform: translateY(-50%);
}

#right {
  width: 60px;
  height: 60px;
  font-size: 30px;
  color: wheat;
  background-color: black;
  border-radius: 50%;
  padding: 10px;
  position: absolute;
  top : 50%;
  right: 4%;
  transform: translateY(-50%);
}
/* 슬라이드 끝 */

/* 탭 */
.tabBox{
  background-color: burlywood;
}

.tab_menu {
  height: 100px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.tab_menu li {
  font-size: 30px;
  border: 2px solid;
  margin: 10px 15px;
  padding: 10px 20px;
}

.tab_content {
  height: 150px;
  display: flex;
}

.content {
  width: 200px;
  font-size: 30px;
  color: white;
  border: 2px solid black;
  margin: 10px 15px 50px;
}

.active {
  color: red;
  background-color: blue;
}

 

JS

// 드롭다운

let page = document.querySelector("#page");
let pageList = document.querySelector("#page_list");
pageList.style.display = "none";

page.addEventListener("click", pageClick);

function pageClick(){
  if(pageList.style.display == "none") {
    pageList.style.display = "block"
  }
  else{ 
    pageList.style.display = "none"
  }
}

// 슬라이드

// 버튼
let leftBtn = document.querySelector("#left");
let rightBtn = document.querySelector("#right");

// 슬라이드
let slides = document.querySelectorAll(".slide");

// 슬라이드 초기 값
let index = 0;

// 이벤트 생성

leftBtn.addEventListener("click", leftClick);
rightBtn.addEventListener("click", rightClick);

// 함수

function leftClick(){
  index--;
  if(index < 0){
    index = slides.length - 1; 
  }
  showSlide(index);
}

function rightClick(){
  index++;
  if(index >= slides.length){
    index = 0;
  }
  showSlide(index);
}

function showSlide(index){
  console.log(index);
  slides.forEach(function(slide){
    slide.style.transform = `translateX(-${index * 100}%)`;
  })
}

// 탭

// 탭,콘텐츠들
let tabs = document.querySelectorAll(".tab");
let contents = document.querySelectorAll(".content")

// 초기값
tabActive(tabs[0]);
showTabContent(1);

// 이벤트
for(let i = 0; i < tabs.length; i++) {
  tabs[i].addEventListener("click", tabIdCalculator);
}

// 함수

function tabIdCalculator(){
  let tabId = this.id.charAt(this.id.length - 1);
  tabActive(this);
  showTabContent(tabId);
}

function tabActive(tab){
  for(let i = 0; i < tabs.length; i++) {
    tabs[i].className = "tab";
  }
  tab.className = "tab active";
}

function showTabContent(tabId) {
  for(let i = 0; i < contents.length; i++){
    contents[i].style.display = "none";
  }
  let activeContent = document.querySelector("#content" + tabId);
  if(activeContent) {
    activeContent.style.display = "flex";
  }
}

 

드롭다운 기능

 

최종목표 : 문서에 있는 PAGE를 클릭하면 숨겨진 목록이 보이게 하고, 한번 더 누르면 목록이 숨겨진다.

 

순서

 

1. 사용자가 클릭하는 요소인 "#page"를 선택해 변수(page)에 저장

 

2. 숨겨진 목록인 "#page_list"를 선택해 변수(pageList)에 저장

 

3. "pageList"의 초기값을 "display = "none";"으로 설정

 

4. "page"에 클릭 시 함수를 호출하는 이벤트를 할당

 

5. 호출된 함수에서 if문으로 "pageList"의 속성을 검사함 

 

6. 검사 결과에 따라 숨길지 보일지 스타일을 설정함

 

 

슬라이드 기능

 

최종 목표 : 문서에 있는 "왼", "오" 버튼을 누르면 누른 버튼의 방향으로 슬라이드가 전환된다.

                   해당 방향에 전환될 슬라이드가 없다면 처음, 끝 슬라이드로 전환한다.

 

순서

 

 

1. "왼", "오" 버튼을 선택해 변수 "leftBtn", "rightBtn"에 저장한다.

 

2. 슬라이드 요소들을 모두 선택해 변수 "slides"에 저장한다.

 

3. 슬라이드의 현재 위치를 파악하는 변수 "index"의 초기값을 0으로 설정한다.

 

4. "leftBtn", "rightBtn"에 각각 클릭 시 함수를 호출하는 이벤트를 할당한다.

 

5. 호출된 함수 "leftClick()"과 "rightClick()"는 "index"의 값을 감소 혹은 증가시키고 "index"의 값이 "sldies" 길이보다

    길거나 같다. 혹은 0보다 작다면 "index"의 값을 재설정 후에 "showSlide()" 함수를 호출하며 "index"의 값을 넘긴다.

 

6. 호출된 함수 "showSlide()"는 "index"를 매개변수로 사용한다

    이후 "slides"의 모든 요소에 반목문을 사용해 "transform = translateX()"로 슬라이드가 전환되게 한다.

 

 

탭 기능

 

최종 목표 : 탭 목록 중 하나를 클릭하면 해당 항목의 콘텐츠가 표시된다.

 

순서

 

 

1. 탭 목록과 탭 콘텐츠를 모두 선택해 각각 변수 "tabs", "contents"에 저장한다.

 

2. "tabs"의 모든 요소에 클릭시 함수를 호출하는 이벤트를 할당한다.

 

3. 호출된 함수에서 클릭한 요소(this)의 id에서 마지막 문자를 선택해 "tabId"변수에 저장한다.

 

4. "tabActive()" 함수를 호출해 클릭한 요소(this)를 인자로 넘긴다.

 

5. "showTabContent()" 함수를 호출해 "tabId"를 넘긴다.

 

6. "tabActive()" 함수는 "this"를 인자로 받아 매개변수 "tab"으로 사용한다.

    for문을 사용해 "tabs"의 모든 요소의 class를 초기화하고, "tab"의 클래스를 "tab active"로 설정한다.

 

7. "showTabContent()" 함수는 매개변수로 "tabId"를 사용한다. 

    for문을 사용해 "contents"의 모든 요소의 "display"값을 "none"으로 초기화한다.

    문자열 "#content"에 "tabId"의 값을 더한 것을 변수 "activeContent"에 저장한다.

    "activeContent"의 "display"값을 "flex"로 설정한다.

 

8. "tabActive()"함수의 초기 매개변수를 (tabs[0]), "showTabContent()"함수의 초기 매개변수를 (1);로 설정해

    문서가 로드 되었을 때 첫 번째 탭 목록이 선택된 상태로 보이게 한다.

    

 

'연습 > JS' 카테고리의 다른 글

JS - drag and drop 연습  (0) 2024.09.03
JS - 기초 랠리  (0) 2024.08.29
JS - 탭  (0) 2024.08.27
JS - 슬라이드  (0) 2024.08.26
JS - 배경 색상 변경  (0) 2024.08.23

관련글

티스토리툴바