지혀니의 알쏭달쏭 지식

[Javascript] 자바스크립트로 카운팅 해보기 / count 세어보기

지얌이 — Sun, 17 Dec 2023 00:01:16 +0900

결과물

사진은 멈춰있지만, 숫자를 정해놓은 단위로 올리는 방법이다.

HTML

<div class="counting">
  <div class="cut-box">
    <p>개인정보유출</p>
    <p>피해 재산</p>
    <p>피해건수</p>
  </div>
  <div class="cut-num">
    <p class="c1">1,557억원</p>
    <p class="c2">19,000만명</p>
    <p class="c3">4,443건</p>
  </div>
 </div>

CSS

.counting {display: flex; justify-content: center; align-items: center; height: 500px; background: green; font-size: 82px; color: #fff; }
.cut-num {margin-left: 50px;}

Javascript

function counting(name, max, step, unit){ //counting이라는 함수를 정의하고, 네 개의 매개 변수를 받겠다는 뜻이다.
//▲여기서 name은 count할 요소의 선택자, max는 최대값, step은 증가 단위, unit는 단위이다. (달러나.. 원 등등)
        let count = 0; // count라는 변수를 0으로 초기화하고, 이 변수는 숫자를 나타내며 증가할 값을 뜻한다.
        const element = document.querySelector(name); //메서드를 사용하여 전달될 name(요소)에 해당하는 HTML요소를 선택하고 이 것을 엘리먼트 상수에 저장한다.

        const interval = setInterval(function(){ //주기적으로 함수를 실행하는 것을 셋인터벌이라고 한다.
          if(count >= max){ //만약 COUNT가 MAX 이상이 되면 클리어인터벌을 호출하여 인터벌을 종료하고 함수를 종료할 것이라는 뜻
            clearInterval(interval);
            return false;
          }
          count += step; // COUNT에 STEP을 더하고, 엘리먼트의 innerHTML을 현지화된 숫자 형식으로 업데이트한다.
          element.innerHTML = new Intl.NumberFormat().format(count) + unit; //NumberFormat는 천 단위 구분 기호를 쉼표로 나타내주는 것이다. ex) 1000 -> 1,000 각 나라별로 숫자 형식에 맞게 표시해주는 함수임.
        },20); // 20ms초마다 실행되는 함수의 끝을 나타낸다. 
      }

//counting 함수를 호출하여 각각의 HTML 요소에 대해 숫자를 증가시키고 표시한다. 
counting('.c1', 5000, 100, '억원');
counting('.c2', 19000, 300, '만명');
counting('.c3', 4443, 100, '억원');

자세한 설명은 자바스크립트 주석으로 달아놨으니 확인할 것.

[Javascript] 슬라이드 배너 자바스크립트로 다뤄보기 (fadeIn, top, left..)

지얌이 — Sat, 9 Dec 2023 16:25:46 +0900

출처: 웹스토리보이

1. fadeIn/out 슬라이드 배너

//css
/* 슬라이더 */
.sliderWrap {position: relative;}
.sliderWrap > div {display: none;}
.sliderWrap > div:first-child {display: block;}
.sliderWrap > .slider {
    position: absolute;
    left: 0; top: 0;
}
.sliderWrap > .slider img {
    vertical-align: top;
}
.sliderWrap > .slider span {
    position: absolute; 
    left: 50%; top: 50%;
    transform: translate(-50%,-50%);
    background: rgba(0, 0, 0, 0.4); 
    color: #fff;
    padding: 10px;
}
/* 자바스크립트 */
.sliderWrap > div {display: block;}


--------------------------------------------------------


window.onload = function(){
    const slider = document.querySelectorAll(".slider"); //모든 정해놓은 클래스 이미지를 변수에 저장
    slider.forEach(img => img.style.opacity = "0"); //.slider에 대한 모든 것을 슬라이더를 반복할건데, 슬라이더를 모두 투명하게 만든다.
    slider[0].style.opacity='1'; // 슬라이더 맨 첫번째 이미지는 보여야 하니까 opacity 1로 값을 준다.
    
    let imgIndex = 0; //시작하는 이미지 숫자는 0부터 시작한다.
    setInterval(()=>{ //일정시간마다 반복 실행을 시켜줄건데 
      let nextIndex = (imgIndex +1) % slider.length;//다음 슬라이드를 가져오기 위해서 변수에 값을 넣어준다. 현재 이미지는 0이고 nextIndex=는 1이다. 이 것을 imgIndex에 다음값이 와야하니까 1을 더해주고 그 외 나머지인 %을 넣어주면 다음 슬라이드가 올 것이다. length는 배열의 크기이다. 
      
      // 그 다음 값에서 실행되야 하는것이
      
      slider[imgIndex].style.opacity='0'; //내가 가지고 있던 이미지는 opacity 안보이게 감춰주고
      slider[nextIndex].style.opacity='1'; // 다음이미지를 가져와야하니까 opacity를 보이게 해준다.
      slider.forEach(img=>img.style.transition = "all 1s") //얘네가 변화를 줄건데 변화가 걸리는게 1초가 걸린다.
      
      imgIndex = nextIndex; //다음 번호를 현재 번호를 넣는다. 
    },3000)
  }

2. 왼쪽으로 이동하는 슬라이드(오른쪽도 가능)

/* 슬라이드 */
#slider {
    overflow: hidden;
}
.sliderWrap {display: flex;}
.sliderWrap > .slider {
    position: relative;
}
.sliderWrap > .slider img{
    vertical-align: top;
}
.sliderWrap > .slider span {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    padding: 10px 20px;
}

------------------------------------------------
window.onload = function () {
            let cur = 0;
            const sliderWrap = document.querySelector(".sliderWrap"); //전체 이미지
            const slider = document.querySelectorAll(".slider"); // 각각의 이미지'
            const sliderClone = sliderWrap.firstElementChild.cloneNode(true);//첫번째 이미지 저장
            sliderWrap.appendChild(sliderClone) //복사한 이미지를 마지막에 추가
            
            setInterval(()=> {
                cur++; //현재 이미지를 증가
                sliderWrap.style.marginLeft = -cur * 100 + "%"; //이미지 이동
                sliderWrap.style.transition = "all 0.6s"; //이미지 애니메이셔ㅑㄴ

                if(cur == 3) {
                    setTimeout(()=> {
                        sliderWrap.style.transition = "0s"; //앤미메이션 정지
                        sliderWrap.style.marginLeft = "0"; // 이미지 위치 초기화
                        cur = 0;
                    },700)
                }

            },3000);
        }

3. 아래로 이동하는 슬라이드(위로도 가능)

/* 슬라이드 */
#slider {overflow: hidden;}
.sliderWrap .slider {position: relative;}
.sliderWrap .slider img {vertical-align: top;}
.sliderWrap .slider span {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0, 0, 0, 0.4); padding: 10px; color: #fff;}

------------------------------------------------------

   window.onload=function(){
    const sliderWrap = document.querySelector('.sliderWrap');//슬라이더를 감싸는 변수 저장
    const slider = document.querySelectorAll(".slider");//모든 슬라이더를 저장
    const sliderClone = sliderWrap.firstElementChild.cloneNode(true);//첫번째 슬라이드를 복제할거다.
    sliderWrap.appendChild(sliderClone);//마지막에 복제할거다. 붙여줄거다.
    
    let cur=0;
    setInterval(()=>{//아래 값을 반복적으로 할것이다. 
      cur++; //cur는 증가시킬것이고
      sliderWrap.style.transition = "all 0.6s"; //이동속도는 0.6초
      sliderWrap.style.marginTop = -cur * 300 + "px"; //위로 -300px으로 움직일것이다.

      if(cur == 3) {//만약 cur이 3이 된다면 (초기 슬라이드 갯수는 원래2)
        setTimeout(()=>{//맨 끝까지 도달한다면
          sliderWrap.style.transition = "0s"; // 즉 순간이동하는것처럼 보이기 위해 티가 안남 사실 0번째는 엄청빠르게 위로 올라간다.
          sliderWrap.style.marginTop = "0"; //위로 이동하는 것도 0
          cur = 0; //cur는 다시 초기값0부터 시작하게 0으로 바꿈
        },700) // 이미지 자연스럽게 바뀌게 0.7초 이 값은 위에 있는 transition보다 값이 커야함. 자연스러움을 위해
      }
    },3000)//전체 슬라이드 3초마다 반복되라
  }

4. 뚝뚝 끊기는 화면전환 슬라이드

/* 슬라이드 */
#slider {}
.sliderWrap {position: relative; height: 100%;}
/* .sliderWrap > div {
    display: none;
}
.sliderWrap > div:first-child {
    display: block;
} */
.sliderWrap > .slider {
    position: absolute;
    left: 0; top: 0;
    width: 100%;
    height: 100%;
}
.sliderWrap > .slider.s1 {
    background: url(https://webstoryboy.github.io/webstoryboy/w_webd/slider/slider03.jpg) no-repeat center/cover;
}
.sliderWrap > .slider.s2 {
    background: url(https://webstoryboy.github.io/webstoryboy/w_webd/slider/slider04.jpg) no-repeat center/cover;
}
.sliderWrap > .slider.s3 {
    background: url(https://webstoryboy.github.io/webstoryboy/w_webd/slider/slider05.jpg) no-repeat center/cover;
}
.sliderWrap > .slider span {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    padding: 10px;
    background: rgba(0, 0, 0, 0.4);
    color: #FFF;
}

---------------------------------------------------
window.onload = function () {
            let cur = 0; //현재이미지
            const slider = document.querySelectorAll(".slider"); //각각의 이미지들
            slider.forEach(el => el.style.opacity= "0"); //모든 이미지의 투명을 0
            slider[0].style.opacity = 1; //첫번째 이미지는 투명도를 1로 설정

            setInterval(()=> {
                let next = (cur + 1) % slider.length;

                slider[cur].style.opacity = "0";
                slider[next].style.opacity = "1";
                slider.forEach(el => el.style.transition = "all 0.1s");

                cur = next;
            },3000)
        }

5. 버튼 슬라이드

window.onload=function(){
    const sliderWrap = document.querySelector('.sliderWrap');//슬라이더를 감싸는 변수 저장
    const slider = document.querySelectorAll(".slider");//모든 슬라이더를 저장
    const slider1Clone = sliderWrap.firstElementChild.cloneNode(true);//첫번째 슬라이드를 복제할거다.
    slider1Clone.classList.add('clone');//첫번째 슬라이드를 복제할거다.
    const prev = document.querySelector('.prev');
    const next = document.querySelector('.next');
    
    // 여기부터 시작
    const slider2Clone = sliderWrap.lastElementChild.cloneNode(true);//맨마지막 슬라이드를 복제할거다.
    slider2Clone.classList.add('clone');
    sliderWrap.appendChild(slider1Clone);//마지막에 복제할거다. 붙여줄거다.
    // prepend(내용물) => append는 뒤에다 붙여주는건데 prepend는 앞에다 붙여주는것이다.
    sliderWrap.prepend(slider2Clone); // 복제한걸 앞에 붙여주겟다.
    sliderWrap.style.marginTop = -300 + "px"; // 복제했으니 첫번째 슬라이드를 보이기 위해 이동시켜줬다.
    

    // 원래의 slider 함수를 3개의 부분으로 분리하였다.
    // 1. cur++ 증감
    // 2. move(cur) 실질적으로 움직이게하는 파트
    // 3. setting() cur값이 우리가 생각하는 범위로 맞춰주고 margin?값도 지켜주는 역할
    
    let cur = 0; // 현재 번호값

    function move(cur){
      //아래 값을 반복적으로 할것이다.
      sliderWrap.style.transition = "all 0.6s"; //이동속도는 0.6초
      sliderWrap.style.marginTop = -(cur + 1) * 300 + "px"; //위로 -300px으로 움직일것이다.
    }

    function setting(){
      if(cur == 3) {
        // 맨~~~~끝에 도달하면 s1으로 이동하고 cur번호도 s1에 맞는 cur = 0 으로 바꾼다.
        setTimeout(()=>{//맨 끝까지 도달한다면
          sliderWrap.style.transition = "0s"; // 즉 순간이동하는것처럼 보이기 위해 티가 안남 사실 0번째는 엄청빠르게 위로 올라간다.
          sliderWrap.style.marginTop = "-300px"; //위로 이동하는 것도 0
          cur = 0; //cur는 다시 초기값0부터 시작하게 0으로 바꿈
        },700) // 이미지 자연스럽게 바뀌게 0.7초 이 값은 위에 있는 transition보다 값이 커야함. 자연스러움을 위해
      }
      if(cur == -1) {
        // 맨~~~~처음으로 도달하면 s3로 이동하고 cur번호도 s3에 맞는 cur = 2 로 바꾼다.
        setTimeout(()=>{
          sliderWrap.style.transition = "0s"; // 즉 순간이동하는것처럼 보이기 위해 티가 안남 사실 0번째는 엄청빠르게 위로 올라간다.
          sliderWrap.style.marginTop = "-900px"; //위로 이동하는 것도 0
          cur = 2; 
        },700) // 이미지 자연스럽게 바뀌게 0.7초 이 값은 위에 있는 transition보다 값이 커야함. 자연스러움을 위해
      }
    }

    // 새로운 함수 2개
    // 1. go는 앞으로 진행시키는것
    function go() {
      cur++;
      move(cur);
      setting();
    }
    // 2. back은 뒤로 진행시키는것
    function back() {
      cur--;
      move(cur);
      setting();
    }

    // setInterval에 go함수를 준 이유는 슬라이드가 앞으로만 진행되니까
    let interval = setInterval(go,3000);

    // next버튼을 누르면
    // 1. 기존 setInterval을 죽이고
    // 2. 바로 앞으로 진행 즉, go 실행
    // 3. 다시 인터벌 주기
    next.addEventListener('click',function(){
      clearInterval(interval);
      go();
      interval = setInterval(go,3000);
    })

    // next버튼을 누르면
    // 1. 기존 setInterval을 죽이고
    // 2. 바로 뒤로 진행 즉, back 실행
    // 3. 다시 인터벌 주기
    prev.addEventListener('click',function(){
      clearInterval(interval);
      back();
      interval = setInterval(go,3000);
    })
  }

[Javascript] 자바스크립트로 드롭다운 메뉴 6종류 다뤄보기

지얌이 — Sat, 9 Dec 2023 16:12:23 +0900

1. 하위메뉴가 개별로 하나씩 내려오는 메뉴 만들기

dispaly: none/block이 아닌, height 길이 사이즈를 안보이게/보이게 조절하여 만드는방식

(ex: height: 0 / 마우스올리면 height: 155px이 되게)

<style>
    * {
margin: 0;
padding: 0;
}
li {
    list-style: none;
}
a {
    text-decoration: none;
    color: #000;
}
#wrap {
    width: 1200px;
    margin: 0 auto;
}
#header {
    width: 100%;
    display: flex;
}
#header .logo {
    width: 20%;
    height: 100px;
    background-color: #efefef;
}
#header .nav {
    width: 80%;
    background-color: #e3e3e3;
}
#slider {
    width: 100%;
    height: 300px;
    background-color: #d9d9d9;
}
#contents {
    width: 100%;
    display: flex;
}
#contents .content1 {
    width: 33.3333%;
    height: 200px;
    background-color: #d1d1d1;
}
#contents .content2 {
    width: 33.3333%;
    height: 200px;
    background-color: #c7c7c7;
}
#contents .content3 {
    width: 33.3333%;
    height: 200px;
    background-color: #bcbcbc;
}
#footer {
    width: 100%;
    display: flex;
}
#footer .footer1 {
    width: 20%;
    height: 100px;
    background-color: #b1b1b1;
}
#footer .footer2 {
    width: 60%;
    height: 100px;
    background-color: #a3a3a3;
}
#footer .footer3 {
    width: 20%;
    height: 100px;
    background-color: #9d9d9d;
}

/* nav */
.nav {
    
}
.nav > ul {
    
    display: flex; 
    justify-content: right; 
    margin-top: 30px;
}
.nav > ul > li {position: relative;}
.nav > ul > li > a{
    display: inline-block;
    padding: 10px 50px;
    background: #686868;
    color: #fff;
}
.nav > ul > li > a:hover {
    background: #1b1b1b;
}
.nav > ul > li > ul {
    position: absolute;
    left: 0;
    top: 40px;
    background: #333;
    width: 100%;
    text-align: center;
    display: none;
}
.nav > ul > li > ul > li{
    
}
.nav > ul > li > ul > li > a{
    display: inline-block;
    padding: 10px;
    background: #abb4b8;
    width: 100%;
    box-sizing: border-box;
    
}
.nav > ul > li > ul > li > a:hover {
    background: #292929; color: #fff;
}
/*자ㅣ바*/
.nav > ul > li > ul {
    display: block;
    height: 0;
    /*height: 160px;*/
    overflow: hidden;
    transition:all 600ms;
    
    
}

    </style>
</head>
<body>
    <div id="wrap">
        <div id="header">
            <div class="logo"></div>
            <nav class="nav">
                <ul>
                    <li><a href="#">메뉴1</a>
                        <ul class="submenu">
                            <li><a href="#">서브메뉴1-1</a></li>
                            <li><a href="#">서브메뉴1-2</a></li>
                            <li><a href="#">서브메뉴1-3</a></li>
                            <li><a href="#">서브메뉴1-4</a></li>
                        </ul>
                    </li>
                    <li><a href="#">메뉴2</a>
                        <ul class="submenu">
                            <li><a href="#">서브메뉴2-1</a></li>
                            <li><a href="#">서브메뉴2-2</a></li>
                            <li><a href="#">서브메뉴2-3</a></li>
                            <li><a href="#">서브메뉴2-4</a></li>
                        </ul>
                    </li>
                    <li><a href="#">메뉴3</a>
                        <ul class="submenu">
                            <li><a href="#">서브메뉴3-1</a></li>
                            <li><a href="#">서브메뉴3-2</a></li>
                            <li><a href="#">서브메뉴3-3</a></li>
                            <li><a href="#">서브메뉴3-4</a></li>
                        </ul>
                    </li>
                    <li><a href="#">메뉴4</a>
                        <ul class="submenu">
                            <li><a href="#">서브메뉴4-1</a></li>
                            <li><a href="#">서브메뉴4-2</a></li>
                            <li><a href="#">서브메뉴4-3</a></li>
                            <li><a href="#">서브메뉴4-4</a></li>
                        </ul>
                    </li>
                </ul>
            </nav>
        </div>
        <!-- //header -->

        <div id="slider">
        </div>
        <!-- //slider -->

        <div id="contents">
            <div class="content1"></div>
            <div class="content2"></div>
            <div class="content3"></div>
        </div>
        <!-- //contents -->

        <div id="footer">
            <div class="footer1"></div>
            <div class="footer2"></div>
            <div class="footer3"></div>
        </div>
        <!-- //footer -->
    </div>
    <!-- //wrap -->

    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        window.onload = function (){
            let navList = document.querySelectorAll(".nav > ul > li");
            
            navList.forEach(function(navItem) {
                navItem.addEventListener("mouseover", function () {
                    this.querySelector(".submenu").style.height = "155px";
                })
            });
            navList.forEach(function(navItem) {
                navItem.addEventListener("mouseout", function () {
                    this.querySelector(".submenu").style.height = "0";
                })
            });
        }
    </script>
    

</body>

2. 하위메뉴가 한번에 내려오는 메뉴 만들기

1번메뉴와 똑같음 dispaly: none/block이 아닌, height 길이 사이즈를 안보이게/보이게 조절하여 만드는방식

(ex: height: 0 / 마우스올리면 height: 155px이 되게)

주의해야할 점은 하위메뉴 전체이므로 선택자를 잘 선택해야한다. 또한 forEach문도 알맞은 곳에 써야한다.

    <style>
    * {
        margin: 0;
        padding: 0;
    }
    li {
        list-style: none;
    }
    a {
        text-decoration: none;
        color: #000;
    }
    #wrap {
        width: 1200px;
        margin: 0 auto;
    }
    #header {
        width: 100%;
        display: flex;
    }
    #header .logo {
        width: 20%;
        height: 100px;
        background-color: #efefef;
    }
    #header .nav {
        width: 80%;
        background-color: #e3e3e3;
    }
    #slider {
        width: 100%;
        height: 300px;
        background-color: #d9d9d9;
    }
    #contents {
        width: 100%;
        display: flex;
    }
    #contents .content1 {
        width: 33.3333%;
        height: 200px;
        background-color: #d1d1d1;
    }
    #contents .content2 {
        width: 33.3333%;
        height: 200px;
        background-color: #c7c7c7;
    }
    #contents .content3 {
        width: 33.3333%;
        height: 200px;
        background-color: #bcbcbc;
    }
    #footer {
        width: 100%;
        display: flex;
    }
    #footer .footer1 {
        width: 20%;
        height: 100px;
        background-color: #b1b1b1;
    }
    #footer .footer2 {
        width: 60%;
        height: 100px;
        background-color: #a3a3a3;
    }
    #footer .footer3 {
        width: 20%;
        height: 100px;
        background-color: #9d9d9d;
    }
    /* nav */
    .nav > ul {
        display: flex; 
        justify-content: right; 
        margin-top: 30px;
        
    }
    .nav > ul > li{position: relative;}
    .nav > ul > li > a {
        display: inline-block;
        padding: 10px 50px;
        background: #b0b0b0;
    }
    .nav > ul > li > a:hover {background: #696969;}
    .nav > ul > li > ul {
        /* display: none; */
        position: absolute;
        left: 0; top: 38px;
        width: 100%;
        text-align: center;
        display: none;
    }
    .nav > ul > li > ul > li {}
    .nav > ul > li > ul > li > a{
        display: inline-block;
        padding: 10px;
        background: #c1c1c1;
        width: 100%;
        
        box-sizing: border-box;
    }
    .nav > ul > li > ul > li > a:hover {background: #f8f8f8;}
    /* 자바스크립트 css */
    .nav > ul > li > ul {
        display: block;
        height: 0px;
        overflow: hidden;
        transition: all 600ms;
    }
    

    </style>
</head>
<body>
    <body>
        <div id="wrap">
            <div id="header">
                <div class="logo"></div>
                <nav class="nav">
                    <ul>
                        <li>
                            <a href="#">메뉴1</a>
                            <ul class="submenu">
                                <li><a href="#">서브메뉴1-1</a></li>
                                <li><a href="#">서브메뉴1-2</a></li>
                                <li><a href="#">서브메뉴1-3</a></li>
                                <li><a href="#">서브메뉴1-4</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="#">메뉴2</a>
                            <ul class="submenu">
                                <li><a href="#">서브메뉴2-1</a></li>
                                <li><a href="#">서브메뉴2-2</a></li>
                                <li><a href="#">서브메뉴2-3</a></li>
                                <li><a href="#">서브메뉴2-4</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="#">메뉴3</a>
                            <ul class="submenu">
                                <li><a href="#">서브메뉴3-1</a></li>
                                <li><a href="#">서브메뉴3-2</a></li>
                                <li><a href="#">서브메뉴3-3</a></li>
                                <li><a href="#">서브메뉴3-4</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="#">메뉴4</a>
                            <ul class="submenu">
                                <li><a href="#">서브메뉴4-1</a></li>
                                <li><a href="#">서브메뉴4-2</a></li>
                                <li><a href="#">서브메뉴4-3</a></li>
                                <li><a href="#">서브메뉴4-4</a></li>
                            </ul>
                        </li>
                    </ul>
                </nav>
                </nav>
            </div>
            <!-- //header -->
    
            <div id="slider">
            </div>
            <!-- //slider -->
    
            <div id="contents">
                <div class="content1"></div>
                <div class="content2"></div>
                <div class="content3"></div>
            </div>
            <!-- //contents -->
    
            <div id="footer">
                <div class="footer1"></div>
                <div class="footer2"></div>
                <div class="footer3"></div>
            </div>
            <!-- //footer -->
        </div>
        <!-- //wrap -->
    </body>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        window.onload = function() {
            let navList = document.querySelector(".nav > ul");

            navList.addEventListener("mouseover", function() {
                navList.querySelectorAll(".submenu").forEach(sub => {
                    sub.style.height = "155px"
                });
            })
            navList.addEventListener("mouseout", function() {
                navList.querySelectorAll(".submenu").forEach(sub => {
                    sub.style.height = "0"
                });
            })
        };
    </script>
</body>

3. 하위메뉴와 background 배경 함께 내려오게 하기

<style>
    * {
    margin: 0;
    padding: 0;
}
li {
    list-style: none;
}
a {
    text-decoration: none;
    color: #000;
}
#wrap {
    width: 1200px;
    margin: 0 auto;
}
#header {
    width: 100%;
    display: flex;
}
#header .logo {
    width: 20%;
    height: 100px;
    background-color: #efefef;
}
#header .nav {
    width: 80%;
    background-color: #e3e3e3;
}
#slider {
    width: 100%;
    height: 300px;
    background-color: #d9d9d9;
}
#contents {
    width: 100%;
    display: flex;
}
#contents .content1 {
    width: 33.3333%;
    height: 200px;
    background-color: #d1d1d1;
}
#contents .content2 {
    width: 33.3333%;
    height: 200px;
    background-color: #c7c7c7;
}
#contents .content3 {
    width: 33.3333%;
    height: 200px;
    background-color: #bcbcbc;
}
#footer {
    width: 100%;
    display: flex;
}
#footer .footer1 {
    width: 20%;
    height: 100px;
    background-color: #b1b1b1;
}
#footer .footer2 {
    width: 60%;
    height: 100px;
    background-color: #a3a3a3;
}
#footer .footer3 {
    width: 20%;
    height: 100px;
    background-color: #9d9d9d;
}

/* nav */
#header {position: relative;}
#header::after {
    content: '';
    width: 100%;
    height: 0px;
    background: #b0b0b0;
    position: absolute;
    left: 0;
    top: 99px;
    z-index: 1;
}
#header.on::after {
    height: 155px;

}
.nav {
    z-index: 1000;
    transition: all 400ms;
}
.nav > ul {
    display: flex;
    justify-content: right;
    margin-top: 60px;
}
.nav > ul > li {position: relative;}
.nav > ul > li a{
    display: inline-block;
    padding: 10px 50px;
    background: #b0b0b0;
}
.nav > ul > li a:hover {background: #696969;}
.nav > ul > li > ul{
    display: none;
    position: absolute;
    left: 0; top: 38px;
    text-align: center;
    width: 100%;
    background: #c7c7c7;
}
.nav > ul > li  >ul > li > a{
    display: inline-block;
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
}
.nav > ul > li  >ul > li > a:hover {background: #f8f8f8;}

</style>
</head>
<body>
    <div id="wrap">
        <div id="header" class="on">
            <div class="logo"></div>
            <nav class="nav">
                <ul>
                    <li>
                        <a href="#">메뉴1</a>
                        <ul class="submenu">
                            <li><a href="#">서브메뉴1-1</a></li>
                            <li><a href="#">서브메뉴1-2</a></li>
                            <li><a href="#">서브메뉴1-3</a></li>
                            <li><a href="#">서브메뉴1-4</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">메뉴2</a>
                        <ul class="submenu">
                            <li><a href="#">서브메뉴2-1</a></li>
                            <li><a href="#">서브메뉴2-2</a></li>
                            <li><a href="#">서브메뉴2-3</a></li>
                            <li><a href="#">서브메뉴2-4</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">메뉴3</a>
                        <ul class="submenu">
                            <li><a href="#">서브메뉴3-1</a></li>
                            <li><a href="#">서브메뉴3-2</a></li>
                            <li><a href="#">서브메뉴3-3</a></li>
                            <li><a href="#">서브메뉴3-4</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">메뉴4</a>
                        <ul class="submenu">
                            <li><a href="#">서브메뉴4-1</a></li>
                            <li><a href="#">서브메뉴4-2</a></li>
                            <li><a href="#">서브메뉴4-3</a></li>
                            <li><a href="#">서브메뉴4-4</a></li>
                        </ul>
                    </li>
                </ul>
            </nav>
        </div>
        <!-- //header -->

        <div id="slider">
        </div>
        <!-- //slider -->

        <div id="contents">
            <div class="content1"></div>
            <div class="content2"></div>
            <div class="content3"></div>
        </div>
        <!-- //contents -->

        <div id="footer">
            <div class="footer1"></div>
            <div class="footer2"></div>
            <div class="footer3"></div>
        </div>
        <!-- //footer -->
    </div>
    <!-- //wrap -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        window.onload = function(){
    let navList = document.querySelector(".nav > ul");

    navList.addEventListener("mouseover", () => {
        navList.querySelectorAll(".submenu").forEach(sub => {
            sub.style.height = "155px";
        });
        document.getElementById("header").classList.add("on");
    });

    navList.addEventListener("mouseout", () => {
        navList.querySelectorAll(".submenu").forEach(sub => {
            sub.style.height = "0px";
        });
        document.getElementById("header").classList.remove("on");
    });
}
    </script>
</body>

4. 사이드에 있는 메뉴 하나씩 down

    <style>
        * {
    margin: 0;
    padding: 0;
}
li {
    list-style: none;
}
a {
    text-decoration: none;
    color: #000;
}
#wrap {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
#aside {
    width: 200px;
}
#aside h1 {
    width: 100%;
    height: 100px;
    background-color: #efefef;
}
#aside nav {
    width: 100%;
    height: 700px;
    background-color: #e3e3e3;
}
#main {
    width: calc(100% - 200px);
}
#slider {
    width: 100%;
    height: 400px;
    background-color: #d9d9d9;
}
#link {
    width: 100%;
    height: 150px;
    background-color: #d1d1d1;
}
#contents {
    width: 100%;
    display: flex;
}
#contents .content1 {
    width: 50%;
    height: 250px;
    background-color: #c7c7c7;
}
#contents .content2 {
    width: 50%;
    height: 250px;
    background-color: #bcbcbc;
}
#footer {
    width: 100%;
    display: flex;
}
#footer .footer1 {
    width: 20%;
    height: 120px;
    background-color: #b1b1b1;
}
#footer .footer2 {
    width: 60%;
}
#footer .footer2 .footer2-1 {
    width: 100%;
    height: 60px;
    background-color: #a3a3a3;
}
#footer .footer2 .footer2-2 {
    width: 100%;
    height: 60px;
    background-color: #9d9d9d;
}
#footer .footer3 {
    width: 20%;
    height: 120px;
    background-color: #929292;
}

    /* nav */
    .nav >ul >li> a {
        display: block;
        padding: 10;
        background: #ccc;
        text-align: center;
    }
    .nav > ul > li > ul {display: none;}
    .nav > ul > li > ul > li > a{
        display: block;
        padding: 10px;
        text-align: center;
    }

    /* 자바용스크립트 */
    .nav > ul > li > ul {
        display: block;
        height: 0;
        overflow: hidden;
        transition: all 400ms;
    }

    </style>

</head>
<body>
    <div id="wrap">
        <aside id="aside">
            <h1></h1>
            <nav class="nav">
                <ul>
                    <li>
                        <a href="#">메뉴1</a>
                        <ul class="submenu">
                            <li><a href="#">서브메뉴1-1</a></li>
                            <li><a href="#">서브메뉴1-2</a></li>
                            <li><a href="#">서브메뉴1-3</a></li>
                            <li><a href="#">서브메뉴1-4</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">메뉴2</a>
                        <ul class="submenu">
                            <li><a href="#">서브메뉴2-1</a></li>
                            <li><a href="#">서브메뉴2-2</a></li>
                            <li><a href="#">서브메뉴2-3</a></li>
                            <li><a href="#">서브메뉴2-4</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">메뉴3</a>
                        <ul class="submenu">
                            <li><a href="#">서브메뉴3-1</a></li>
                            <li><a href="#">서브메뉴3-2</a></li>
                            <li><a href="#">서브메뉴3-3</a></li>
                            <li><a href="#">서브메뉴3-4</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">메뉴4</a>
                        <ul class="submenu">
                            <li><a href="#">서브메뉴4-1</a></li>
                            <li><a href="#">서브메뉴4-2</a></li>
                            <li><a href="#">서브메뉴4-3</a></li>
                            <li><a href="#">서브메뉴4-4</a></li>
                        </ul>
                    </li>
                </ul>
            </nav>
        </aside>
        <!-- //aside -->

        <main id="main">
            <article id="slider"></article>
            <article id="link"></article>
            <section id="contents">
                <div class="content1"></div>
                <div class="content2"></div>
            </section>
        </main>
        <!-- //main -->

        <footer id="footer">
            <div class="footer1"></div>
            <div class="footer2">
                <div class="footer2-1"></div>
                <div class="footer2-2"></div>
            </div>
            <div class="footer3"></div>
        </footer>
        <!-- //footer -->
    </div>
    <!-- //wrap -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        window.onload = function () {
            let navList = document.querySelectorAll(".nav > ul > li");

            navList.forEach(navItem=>{
                navItem.addEventListener("mouseover", function() {
                    this.querySelector(".submenu").style.height = '155px'
                })
                navItem.addEventListener("mouseout", function() {
                    this.querySelector(".submenu").style.height = '0'
                })
            });
        }
    </script>
</body>

5. 사이드 메뉴 오른쪽으로 나타나게 하기

    <style>
        * {
    margin: 0;
    padding: 0;
}
li {
    list-style: none;
}
a {
    text-decoration: none;
    color: #000;
}
#wrap {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
#aside {
    width: 200px;
}
#aside h1 {
    width: 100%;
    height: 100px;
    background-color: #efefef;
}
#aside nav {
    width: 100%;
    height: 700px;
    background-color: #e3e3e3;
}
#main {
    width: calc(100% - 200px);
}
#slider {
    width: 100%;
    height: 400px;
    background-color: #d9d9d9;
}
#link {
    width: 100%;
    height: 150px;
    background-color: #d1d1d1;
}
#contents {
    width: 100%;
    display: flex;
}
#contents .content1 {
    width: 50%;
    height: 250px;
    background-color: #c7c7c7;
}
#contents .content2 {
    width: 50%;
    height: 250px;
    background-color: #bcbcbc;
}
#footer {
    width: 100%;
    display: flex;
}
#footer .footer1 {
    width: 20%;
    height: 120px;
    background-color: #b1b1b1;
}
#footer .footer2 {
    width: 60%;
}
#footer .footer2 .footer2-1 {
    width: 100%;
    height: 60px;
    background-color: #a3a3a3;
}
#footer .footer2 .footer2-2 {
    width: 100%;
    height: 60px;
    background-color: #9d9d9d;
}
#footer .footer3 {
    width: 20%;
    height: 120px;
    background-color: #929292;
}

/* nav */
.nav > ul > li{
    position: relative;
}
.nav > ul > li > a{
    display: block;
    padding: 10px;
    text-align: center;
    background: #ccc;
}
.nav > ul > li > ul {
    position: absolute;
    right: -200px;
    top: 0;
    width: 200px;
    background: #eee;
    display: none;
}
.nav > ul > li > ul > li > a{
    display: block;
    padding: 10px;
}
    </style>
</head>
<body>
    <div id="wrap">
        <aside id="aside">
            <h1></h1>
            <nav class="nav">
                <ul>
                    <li>
                        <a href="#">메뉴1</a>
                        <ul class="submenu">
                            <li><a href="#">서브메뉴1-1</a></li>
                            <li><a href="#">서브메뉴1-2</a></li>
                            <li><a href="#">서브메뉴1-3</a></li>
                            <li><a href="#">서브메뉴1-4</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">메뉴2</a>
                        <ul class="submenu">
                            <li><a href="#">서브메뉴2-1</a></li>
                            <li><a href="#">서브메뉴2-2</a></li>
                            <li><a href="#">서브메뉴2-3</a></li>
                            <li><a href="#">서브메뉴2-4</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">메뉴3</a>
                        <ul class="submenu">
                            <li><a href="#">서브메뉴3-1</a></li>
                            <li><a href="#">서브메뉴3-2</a></li>
                            <li><a href="#">서브메뉴3-3</a></li>
                            <li><a href="#">서브메뉴3-4</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">메뉴4</a>
                        <ul class="submenu">
                            <li><a href="#">서브메뉴4-1</a></li>
                            <li><a href="#">서브메뉴4-2</a></li>
                            <li><a href="#">서브메뉴4-3</a></li>
                            <li><a href="#">서브메뉴4-4</a></li>
                        </ul>
                    </li>
                </ul>
            </nav>
        </aside>
        <!-- //aside -->

        <main id="main">
            <article id="slider"></article>
            <article id="link"></article>
            <section id="contents">
                <div class="content1"></div>
                <div class="content2"></div>
            </section>
        </main>
        <!-- //main -->

        <footer id="footer">
            <div class="footer1"></div>
            <div class="footer2">
                <div class="footer2-1"></div>
                <div class="footer2-2"></div>
            </div>
            <div class="footer3"></div>
        </footer>
        <!-- //footer -->
    </div>
    <!-- //wrap -->

    <script>
        window.onload = function(){
            let navList = document.querySelectorAll(".nav > ul > li");

            navList.forEach(function(nav){
                nav.querySelector("ul").style.display = "block";
                nav.querySelector("ul").style.height = "0";
                nav.querySelector("ul").style.overflow = "hidden";
                nav.querySelector("ul").style.transition = "height 400ms";
            })

            navList.forEach(function(navItem){
                navItem.addEventListener("mouseover", function() {
                    this.querySelector(".submenu").style.height = '155px';
                })
            })
            navList.forEach(function(navItem){
                navItem.addEventListener("mouseout", function() {
                    this.querySelector(".submenu").style.height = '0px';
                })
            })


        }
    </script>

</body>

6. 사이드 메뉴 전체 background 배경과 한번에 나오게 하기

    <style>
        * {
    margin: 0;
    padding: 0;
}
li {
    list-style: none;
}
a {
    text-decoration: none;
    color: #000;
}
#wrap {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
#aside {
    width: 200px;
}
#aside h1 {
    width: 100%;
    height: 100px;
    background-color: #efefef;
}
#aside nav {
    width: 100%;
    height: 700px;
    background-color: #e3e3e3;
}
#main {
    width: calc(100% - 200px);
}
#slider {
    width: 100%;
    height: 400px;
    background-color: #d9d9d9;
}
#link {
    width: 100%;
    height: 150px;
    background-color: #d1d1d1;
}
#contents {
    width: 100%;
    display: flex;
}
#contents .content1 {
    width: 50%;
    height: 250px;
    background-color: #c7c7c7;
}
#contents .content2 {
    width: 50%;
    height: 250px;
    background-color: #bcbcbc;
}
#footer {
    width: 100%;
    display: flex;
}
#footer .footer1 {
    width: 20%;
    height: 120px;
    background-color: #b1b1b1;
}
#footer .footer2 {
    width: 60%;
}
#footer .footer2 .footer2-1 {
    width: 100%;
    height: 60px;
    background-color: #a3a3a3;
}
#footer .footer2 .footer2-2 {
    width: 100%;
    height: 60px;
    background-color: #9d9d9d;
}
#footer .footer3 {
    width: 20%;
    height: 120px;
    background-color: #929292;
}
/* nav */
.nav { position: relative;z-index: 1000;}
.nav > ul > li{position: relative;}
.nav > ul > li > a{
    padding: 10px;
    display: block;
    text-align: center;
    background: #ccc;
}
.nav > ul > li > ul{
    display: none;
    position: absolute;
    right: -500px;
    top: 0;
    width: 500px;
    background: #eee;
}
.nav > ul > li > ul > li{
    display: inline;
}
.nav > ul > li > ul > li > a{
    padding: 10px;
    display: inline-block;
}
#main{position: relative;}
#main:after {
    content: '';
    width: 0%;
    height: 193px;
    background: #111;
    position: absolute;
    left: 0; top: 100px;
    z-index: 10;
    transition: all 0.3s;


}
#main.on:after {
    width: 100%;
}

    </style>
   
<body>
    <div id="wrap">
        <aside id="aside">
            <h1></h1>
            <nav>
                <nav class="nav">
                    <ul>
                        <li>
                            <a href="#">메뉴1</a>
                            <ul class="submenu">
                                <li><a href="#">서브메뉴1-1</a></li>
                                <li><a href="#">서브메뉴1-2</a></li>
                                <li><a href="#">서브메뉴1-3</a></li>
                                <li><a href="#">서브메뉴1-4</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="#">메뉴2</a>
                            <ul class="submenu">
                                <li><a href="#">서브메뉴2-1</a></li>
                                <li><a href="#">서브메뉴2-2</a></li>
                                <li><a href="#">서브메뉴2-3</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="#">메뉴3</a>
                            <ul class="submenu">
                                <li><a href="#">서브메뉴3-1</a></li>
                                <li><a href="#">서브메뉴3-2</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="#">메뉴4</a>
                            <ul class="submenu">
                                <li><a href="#">서브메뉴4-1</a></li>
                                <li><a href="#">서브메뉴4-2</a></li>
                                <li><a href="#">서브메뉴4-3</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="#">메뉴5</a>
                            <ul class="submenu">
                                <li><a href="#">서브메뉴5-1</a></li>
                            </ul>
                        </li>
                    </ul>
                </nav>
            </nav>
        </aside>
        <!-- //aside -->

        <main id="main">
            <article id="slider"></article>
            <article id="link"></article>
            <section id="contents">
                <div class="content1"></div>
                <div class="content2"></div>
            </section>
        </main>
        <!-- //main -->

        <footer id="footer">
            <div class="footer1"></div>
            <div class="footer2">
                <div class="footer2-1"></div>
                <div class="footer2-2"></div>
            </div>
            <div class="footer3"></div>
        </footer>
        <!-- //footer -->
    </div>
    <!-- //wrap -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        window.onload = function () {
            let navList = document.querySelector(".nav > ul");

            navList.addEventListener("mouseover", function() {
                navList.querySelectorAll(".submenu").forEach(sub => {
                    sub.style.display = 'block';
                });
                document.getElementById("main").classList.add("on")
            })
            navList.addEventListener("mouseout", function() {
                navList.querySelectorAll(".submenu").forEach(sub => {
                    sub.style.display = 'none';
                });
                document.getElementById("main").classList.remove("on")
            })
        }
        
    </script>
</body>

[Javascript] forEach/for..in/for..of/for 구문

지얌이 — Wed, 6 Dec 2023 14:32:30 +0900

forEach함수의 구문

배열의 반복이며, 배열에서만 사용할 수 있는 메서드이다. forEach()는 배열의 처음부터 마지막 요소까지 반복하여 실행하고 인자로 콜백함수를 받아온다. 주어진 콜백함수를 배열 요소 각각에 실행하는 순회방법이 있다. 하지만 forEach()함수는 보통 map()함수와 함께 가장 널리 사용되는 순회방법 중 하나이다.

var arr = ["1", "2", "3"];

// ES6의 화살표 함수를 이용하면 코드를 아주 간결하게 만들 수 있습니다.(가장 자주 쓰는 형태)
arr.forEach(item => {
	// item 변수는 배열 각각의 요소들을 순환합니다.
	console.log(item);
});

// forEach 함수의 원형 그대로 사용하기
arr.forEach(function(item, index, arr2) {
	// item : 배열 각각의 요소
	// index : 배열 인덱스
	// arr2 : 배열 자체(반복문 돌리는 배열을 통째로 참조해야할 경우 사용)
});

forEach예제)

HTML / CSS

<style>
    * {padding: 0; margin: 0; box-sizing: border-box;}
    a {text-decoration: none; color: inherit;}
    li {list-style: none;}

    .gnb > ul {display: flex;}
    .gnb > ul > li {padding: 0 10px;}
    .gnb > ul > li a {display: inline-block; background: #ccc; border: 1px solid #333; padding: 10px 30px; margin-bottom: 10px;}
    .sub{display: none; transition: 0.3s;}
    .sub.on {display: block;}
  </style>


<div class="wrap">
    <nav class="gnb">
      <ul>
        <li class="open"><a href="#">메뉴1</a>
          <ul class="sub">
            <li class="slideMenu">메뉴1내용</li>
            <div class="close">X</div>
          </ul>
        </li>
        <li class="open"><a href="#">메뉴2</a>
          <ul class="sub">
            <li class="slideMenu" >메뉴2내용</li>
            <div class="close">X</div>
          </ul>
        </li>
        <li class="open"><a href="#">메뉴3</a>
          <ul class="sub">
            <li class="slideMenu">메뉴3내용</li>
            <div class="close">X</div>
          </ul>
        </li>
      </ul>
    </nav>
  </div>

window.onload = function() {
  const Gnb = document.querySelectorAll(".gnb>ul>li");
  console.log(Gnb);
  Gnb.forEach((item)=>{
    console.log(item);
    const open = item.querySelector('.open>a');
    const sub = item.querySelector('.sub');
    const close = item.querySelector('.close');

    open.addEventListener('click', () => {
      sub.classList.toggle('on'); //open이라는 클래스를 눌러서 안에 콘텐츠sub를 없앨 수 있음
    });
  
    close.addEventListener('click', () => {
      sub.classList.toggle('on'); // //열린 콘텐츠sub클래스를 눌러서 안에 콘텐츠sub를 사라지게 할 수 있음
      });
  });
};

for..in함수의 구문

for..in문은 객체의 속성을 반복하기 위해 열거형과 함께 사용되며 ES6에 도입되었다.

var arr = ["1", "2", "3"];
for (var item in arr) {
	// item : 배열 각각의 요소
}

for함수의 구문

var arr = ["1", "2", "3"];
for (var i = 0; i < arr.length; ++i) {
	// index를 지정하는 전통적인 for문
}

for..of함수의 구문

for..of문 또한 ES6에 도입되었으며, 반복 가능한 객체만 사용할 수 있다.

반복 가능한 객체 목록 - 배열 / 문자열 / Set 객체 / map객체 / NodeList

반복적이지 않은 요소를 넣을 경우, TypeError가 발생함

let arr = [10, 20, 30];
for (let item of arr) {
	// item: 배열 각각의 요소
}

forEach로 예제 풀어보기

1) 배열 요소 출력하기

const numbers = [1,2,3,4,5];

numbers.forEach(function(number){
	console.log(number);
});

2) 배열 요소를 합산하기

const numbers = [1,2,3,4,5];
    let sum = 0;
    numbers.forEach(function(number){
      sum += number;
    });
    console.log(sum)

1+2+3+4+5

3) 특정 조건을 만족하는 배열 요소

const numbers = [10, 25, 30, 45];

let foundNumber = null;

numbers.forEach(function(number) {
    if (number > 30) {
        foundNumber = number;
    }
});

console.log(foundNumber); // 출력: 45

4) 배열 요소들을 문자열로 변환하여 새로운 배열 생성

const names = ['Alice', 'Bob', 'Charlie'];
const greetings = [];

names.forEach(function(name) {
    greetings.push(`Hello, ${name}!`);
});

console.log(greetings); // 출력: ['Hello, Alice!', 'Hello, Bob!', 'Hello, Charlie!']

5) 배열 요소들의 특정 속성을 변경하기

const people = [
    {name: 'Alice', age: 30},
    {name: 'Bob', age: 25},
    {name: 'Charlie', age: 35}
];

people.forEach(function(person) {
    person.age += 5; // 모든 사람의 나이를 5살씩 증가시킴
});

console.log(people);
/* 출력:
    [
        {name: 'Alice', age: 35},
        {name: 'Bob', age: 30},
        {name: 'Charlie', age: 40}
    ]
*/

for, forEach의 차이점

-동기와 비동기 : for문은 동기방식이기 때문에 오류가 생기면 위치 이후의 작업이 동작하지 않고 멈춘다. 반면 forEach문은 비동기 방식이기 때문에 멈추지 않고 동작함

-성능차이 : forEach문은 향상된 for문이라고 칭하며, 가변적인 배열이나 리스트 크기를 구할 필요가 없어 복잡한 반복문에 적합하고, 인덱스를 생성하는 for문보다 속도가 빠르다.

-forEach의 단점 : 반복문 내에서 배열이나 리스트 값을 수정/추가가 불가능하며 읽기 전용으로 불러오기 때문에 데이터 수정이 불가능하다. 또한 배열을 역순으로 탐색할 수 없고 순서대로 정보를 가져오기 때문에 역순으로 가져올 방법이 없다는 단점이 있다.

[Javascript] 코딩 기본 용어 정리(property/array...framework..)

지얌이 — Mon, 4 Dec 2023 22:49:15 +0900

기본 용어 정리

프로퍼티(property) 프로퍼티란 속성이란 뜻으로 자바스크립트에서 객체 내부의 속성을 의미한다.

객체는 프로퍼티로 구성된다. "key(키)" : "value(값)" 의 형식으로 객체 안의 콤마(,)로 구분되어 할당된다.

key(키)는 속성명이라 생각해도 된다. 문자열만 가능하며, 문자열이지만 따옴표가 필요없다

반면 띄어쓰기를 할 경우는 필요하다.

value(값)는 속성값이라고 부르며, 어떤 값이든지 상관없다.

객체에서 함수를 정의할 경우, 속성값이라 하지않고 Method(메소드)라고 부른다.

배열(array) 이란?

자바스크립트에서 배열(array)은 이름과 인덱스로 참조되는 정렬된 값의 집합으로 정의된다.
배열을 구성하는 각각의 값을 배열 요소(element)라고 하며, 배열에서의 위치를 가르키는 숫자를 인덱스(index)라고 한다.

객체(object) 란?

객체란 실생활에서 우리가 인식할 수 있는 사물로 이해할 수 있습니다.

객체의 예

-고양이

프로퍼티 (property)
키 / 벨류
-cat.name = "나비"
-cat.family = "코리안 숏 헤어"
-cat.age = 3
-cat.weight = 300

메소드(method)
- cat.mew()
- cat.eat()
- cat.sleep()
- cat.play()

프레임 워크란?

이미 짜여진 환경에서 맞춰서 코딩하는 것 뷰, 리엑트 등 요즘 트랜디한 프레임워크가 다양하다.

라이브러리란?

내가 쓰고 싶을때 가져다 쓰는 제품이라고 생각하면 편하다. 프레임 워크 처럼 맞춰서 작업할 필요 없고 내가 쓰고 싶을때 가져다 쓰는 용도이다.

디버그 디버깅이란 소프트웨어에서 발생하는 문제의 원인을 찾아 해결하는 과정을 의미한다.

컴파일 우리가 코딩할 때 사용하는 프로그래밍 언어들은 사람이 보기 쉽게 만들어진 언어이다. 원래 컴퓨터는 0과 1밖엔 이해하지 못하는데 이것을 사람이 알아보기 쉽게 만들고 그 후 컴퓨터와 소통하기 위해 번역하는 것을 컴파일이라고한다.

인터프리터컴파일러 언어와는 달리, 파이썬이나 루비, 자바스크립트 등의 언어들은 번역작업을 미리 해놓지 않고, 실행될 때마다 인터프리터란 프로그램이 컴퓨터에게 코드를 기계어로 번역해주며 이러한 언어들을 인터프리터 언어라고 한다.

빌드프로그램 코드들은 보통 한 파일이 아니라 수십 수백개가 넘는 파일들에 걸처 작성이된다.
이를 완성하여 소프트웨어로 배포하려면 이들을 특정 형태로 압축하거나 변경해야 하는데 이 과정을 빌드 라고 한다.

이때 컴파일러 언어는 당연히 빌드에 컴파일 과정이 포함이된다.

[Javascript] addEventListener 사용법과 이벤트(Event) 종류 / onClick의 차이

지얌이 — Mon, 4 Dec 2023 16:50:10 +0900

addEventListener()이란?

사용자와 상호 작용을 하면서 마우스(키보드/터치/펜) 등을 조작하면 그에 대한 반응을 하는 것이며, 특정 이벤트가 발생 되었을 때 특정 함수를 실행할 수 있게 해주는 것이다.

자바스크립트 이벤트 3가지 방법

1. HTML 요소의 속성으로 등록 - 이벤트를 하나밖에 지정할 수 없다는 단점이 있다.

<input type=button onClick="btnClick()">

2. DOM 요소의 프로퍼티로 등록 - 이벤트를 하나밖에 지정할 수 없다는 단점이 있다.

let btn = document.getElementByID("button"); btn.onClick = btnClick();

3. addEventListener 사용하여 등록 - 여러 개의 이벤트 등록이 가능하다.

const title = document.querySelector("h1"); 
 
title.addEventListener("이벤트종류", 함수이름){
	this.classList.style.dispaly: "block"
}

많이 사용하는 이벤트 속성


mouseover	객체 영역에 마우스 커서가 진입하는 순
mouseout	객체의 영역 위에 마우스 커서가 빠져나가는 순간
mousedown	객체의 영역 위에서 마우스 버튼을 누르는 순간
mouseup	객체의 영역 위에서 마우스 버튼을 떼는 순간
mousemove	객체의 영역 위에서 마우스 커서가 움직이는 순간
keydown	키를 눌렀을 때 발생
keyup	키를 뗐을 때 발생
keypress	키를 눌렀을 때 발생
click	마우스 버튼을 클릭하고 버튼에서 손가락을 떼면 발생
resize	브라우저 창의 크기를 조절할때 발생한다.
scroll	스크롤바를 드래그하거나 키보드(up, down)를 사용하거나 마우스 휠을 사용해서 웹페이지를 스크롤 할 때 발생
change	변동이 있을 때 발생
focus	포커스를 얻었을 때 발생
select	option 태그 등에서 선택을 했을 때 발생
submit	submit 실행 시 발생
unload	링크를 클릭해서 다른 페이지로 이동하거나 브라우저 탭을 닫을 때 혹은 브라우저 창을 닫을 때 이벤트가 발생한다.
load	로드가 완료 되었을 때 발생

출처: https://lakelouise.tistory.com/35

onClick()과의 차이

onClick()으로 해도 되지않을까? 하는 사람들이 있을 것이다. onClick()은 하나의 이벤트만 실행할 수 있다.

예제 )

<button class="event">
버튼
</button>

let click = document.querySelector('.event');

click.onclick = function() {
    console.log('onclick1');
}
click.onclick = function() {
    console.log('onclick2');
}
click.addEventListener('click', function(){
    console.log('addEventListener1');
})
click.addEventListener('click', function(){
    console.log('addEventListener2');
})
click.addEventListener('click', function(){
    console.log('addEventListener3');
})

// onclick은 두개, addEventListener는 세개를 등록했다.

출처: https://sunjin-kim.tistory.com/41

결과

onClick을 두 번 등록했는데 onClick2만 출력이 되었다. 두 개 이상 등록하면 마지막에 등록한 이벤트만 작동하게 된다.
따라서 개발자들이 선호하고 권장하는 이벤트는 addEventener()이다.

[Javascript] 자료형 배열(Array type)과 for문

지얌이 — Mon, 4 Dec 2023 14:56:46 +0900

여태까지 변수를 선언하고, 하나의 변수에 하나의 데이터 값만 할당을 했었다.
ex) let name = "김태희"....

배열은 같은 자료들을 담는 자료구조 중의 하나이며, 단순하게 같은 자료형의 나열이다.

이번에는 하나의 변수에 여러개의 데이터 값을 할당하려고 한다. 이럴 때 사용하는 것이 배열이다.

배열은 [ ] 대괄호로 표현한다.
ex) let name = ["김태희", "조인성"]

보통 배열은 여러 개의 요소를 갖기 때문에 일반적으로 배열 이름을 복수형으로 s를 붙여 짓는다.

배열 기본

let name = ["김태희", "조인성"];
    console.log(name);

만약 내가 여기서 김태희만 빼내고 싶다면? 인덱스(index)를 사용해야한다.
인덱스는 배열이 가지고 있는 순서라고 생각하면 되고, 0부터 시작한다. 따라서 김태희는 0번, 조인성은 1번의 순서를 가지게 된다.

원하는 인덱스로 데이터 값을 출력하기

let name = ["김태희", "조인성"];
    console.log(name[1]);

대괄호에 [1]번째를 넣어주게 되면 name이 가지고 있는 변수 중에서 조인성이 출력되는 것을 확인할 수 있다.

여러 개의 예제로 적용해보자.

    let name1 = ["김태희", "조인성"];
    console.log(name1[0]);

    let name2 = ["지혀니", "성시기"];
    console.log(name2[1]);

    let name3 = [1, "이름", true, undefined, function(){}, {}]
    console.log(name3[2]);

name1에서는 0번째가 가지고 있는 "김태희",
name2에서는 1번째가 가지고 있는 "성시기",
name3에서는 2번째가 가지고 있는 "true"가 출력되는 것을 확인할 수 있다.

인덱스 출력해보기

    let name3 = [1, "이름", true, undefined, function(){}, {}]
    console.log(name3);
    console.log(name3.length);
    console.log(name3[0]);
    console.log(name3[1]);
    console.log(name3[2]);
    console.log(name3[name3.length - 1]);

    name3[name3.length];

배열의 반복문

반복문을 이용하여 배열의 모든 요소를 출력해보자!
반복문이란? 동일한 작업을 여러번 반복하는 것이다.

for 반복문

for(let i =0; i < 10; i++){ 

}
--------------------------------
for(초기값; 조건식; 증감식) {
	출력
}

처음 초기값 i는 0으로 놓고, i가 10보다 작으면 i가 증가하도록 코드를 실행하게 함(i++)
이 값을 돌며 반복하고 내가 말한 조건이 되는 10이 되면(false) 멈추게 된다.

0부터 9가아닌 0부터 10까지 찍히게 하고 싶으면 조건식에 i &lt; 11; 로 수정, 또는 console.log(i+1), 혹은 i &lt;=10 으로 수정

출처: 유튜브 코딩앙마 / 자바스크립트 기초강좌 #8(반복문,for,while,do while)

1: 초기값 지정
2: 조건이 트루이면
3: 코드를 실행하고
4: 반복을 실행하고
5: 조건이 트루이면
.
.
.
이런식으로 계속 반복하다가 flase 되면 반복문을 빠져나오게 한다.

예시 )

let name3 = ["김태희", "조인성", "성시기"]

for (let i =0; i <name3.length; i++) {
	console.log(name3[i];
}

해설 )
초기값은 0으로 하고, 조건식은 name3 변수의 길이만큼 i를 증감시켜준다.
따라서 name3의 i를 출력해보면 총 3개의 배열이 나온 것을 확인할 수 있다.

[Javascript] var / let / const 변수 선언과 규칙

지얌이 — Mon, 4 Dec 2023 12:22:09 +0900

변수란?

데이터를 저장하기 위해 사용하는 공간
변수를 정할 때 적절한 변수명으로 적어주고 등호기호로 할당해 줄 데이터를 적어준다.
ex) name = jihyun <= 이런 변수를 암시적 선언이라고 한다.

암시적선언이란? 자바스크립트에서 제공하고 있는 변수 선언 키워드인 'var / let / const'를 사용하지 않고
변수를 선언하는 것

자바스크립트에서는 일반적으로 변수를 선언할 때 암시적 선언을 권장하지 않고
'var/let/const'를 사용하여 변수를 명시적으로 선언하는 것을 권장하고 있다.

명시적 선언

    var name = "김태희"
    console.log(name);

    let style = "기본스타일"
    console.log(style);

    const constant = 10;
    console.log(constant);

var / let / const 의 특징

var , let = 변수
const = 상수

var의 특징

자바스크립트 초창기 키워드이며, 변수를 중복할당 할 수 있다. 다시 선언할 수 있는 행위가 가능하지만,
그 반면 추후 대규모 프로젝트를 진행할 때 위험성이 높다.

예로 들어서 같은 프로젝트를 진행하는 A개발자가 var 키워드로 "name" 변수를 선언하여 사용했는데
B개발자도 똑같이 "name" 이라는 변수로 선언하여 사용했다면? 개발자 도구에서는 데이터가 제대로 출력이 되므로
서로의 변수명을 인지하지 못하고 충돌할 수 있다.
ex) 상사 = "변수명 name 수정 부탁드립니다. " 라고 물어오면 어떤 변수인지알고 수정을 하겠는가.

따라서 var는 권장하고 있지않다.

    var name = "김태희"
    console.log(name);

    var name = "조인성";
    console.log(name);

각각 데이터가 출력되는 것을 확인할 수 있다.

let의 특징

let은 var와 다르게 변수의 중복선언이 불가능하다.
var처럼 중복선언을 하게 되면 프로그램에서도, 개발자도구에서도 빨간 오류가 뜬 것을 확인할 수 있다.
let 같은 경우는 다른 개발자들이 충돌할 수 있는 위험을 최소한으로 감소시켜준다고 볼 수 있고
굉장히 안정성이 높은 변수 키워드이다.

이미 name이라는 변수가 선언이 되있다는 에러메시지가 출력됨

const의 특징

let과 같이 변수의 중복선언이 불가능하며 let 오류가 뜬 것처럼 똑같이 에러가 난다.
그럼 let과 const와 똑같은 것이 아닐까? 라고 생각할 수 있다.
하지만 let과는 다르게 안 되는 것이 한 가지 더 있는데, 변수에 할당된 데이터가 변경이 되지 않는다는 점이 있다.

예로 들어서 let과 암시적 선언에 똑같이 "name"이라는 변수를 입력해주면
첫번째 "name" 변수에는 한가인, 두번째 "name"에는 조인성으로 출력이 되는 것을 확인할 수 있다.

    let name = "한가인";
    console.log(name);

    name = "조인성";
    console.log(name);

const로 해보면 첫번째 변수만 출력이 되고, 두번째 변수는 출력이 되지 않는 것을 볼 수 있다.
const 키워드는 최초의 변수만 할당하고 그 값을 변경할 수 없다는 점이 있다.

    const name = "한가인";
    console.log(name);

    name = "조인성";
    console.log(name);

상수 변수에는 할당할 수 없다는 에러메시지가 나옴

따라서 const 키워드로 선언한 변수는 데이터를 변경할 수 없기 때문에, 변하지 않는 수 즉, 변수가 아닌 상수라고 불린다.

변수 이름을 지어줄 때 일정한 규칙

1. 변수 이름은 카멜케이스(camelcase)방법으로 작성한다. => 단어의 첫글자는 소문자, 연결된 단어의 첫글자는 대문자
2. 변수 이름은 _, $문자로만 시작한다.
3. 상수나 축약어는 대문자와 스네이크케이스(snakecase)방법을 사용한다. => 언더바(_)를 사용해 문자를 이어준다.
4. 예약어는 사용할 수 없다.

//1. 변수 이름은 카멜케이스 방법으로 작성한다.
// 카멜케이스(camelcase)란? 단어의 첫글자는 소문자, 연결된 단어의 첫글자는 대문자로 쓰는 작성법
let userName = "jihyun";  //O
let user_name = "jihyun"; //X 에러는 나지 않지만, 카멜케이스로 선언을 해줘야한다.

//2. 변수 이름은 _, $, 문자로만 시작한다.
let day12 = "월요일";//O
let _day12 = "월요일";//O
let $day12 = "월요일"//O $로 시작
let 12day = "월요일"; //x
let @day12 = "월요일" //x _,$ 이외의 특수문자라서 X

//3. 상수나 축약어는 대문자와 스네이크케이스 방식으로 작성한다.
//축약어는 보통 상수인 const로 정의해야하고, 축약어가 아니더라도 상수를 선언했다면 무조건 대문자로 작성하고 스네이크케이스(snakecase)방법을 사용하여 단어를 _로 연결해준다.
const HTML = "Hyper Text Markup Language";
const MAX_LEVEL = "99";

//4. 예약어는 사용할 수 없다.  ex) var, let, const, typeof 등..
const var = 10; //X var는 변수 선언 키워드로 변수 이름을 지을 수 없다.

[Javascript] for문을 사용해서 tab-menu/탭메뉴 만들기

지얌이 — Sun, 3 Dec 2023 01:01:17 +0900

1. 탭 버튼과 탭 컨텐츠가 한 영역안에 있을 경우

이 방법은 스크립트를 간소화 할 수 있는 장점이 있고 또한 마크업 구조의 접근성을 높일 수 있는 구조이다.

HTML

 <div class="wrap">
    <div class="tab-menu">
      <ul class="tab-lists">
        <li class="tab-list-on">
          <a href="#tab1" class="btn">탭메뉴1</a>
          <div id="tab1" class="cont">첫번째 탭 내용</div>
        </li>
        <li>
          <a href="#tab2" class="btn">탭메뉴2</a>
          <div id="tab2" class="cont">두번째 탭 내용</div>
        </li>
        <li>
          <a href="#tab3" class="btn">탭메뉴3</a>
          <div id="tab3" class="cont">세번째 탭 내용</div>
        </li>
      </ul>
    </div>
  </div>

CSS

 <style>
    * {padding: 0; margin: 0;}
    a{text-decoration: none; color: inherit;}
    li {list-style: none;}
    
    .wrap {display: flex; justify-content: center; align-items: center;}
    .tab-menu {position: relative;}
    .tab-menu .tab-lists {display: flex;}
    .tab-menu .tab-lists li {margin-right: 10px;}
    .tab-menu .tab-lists .cont{position: absolute; top: 25px; left: 0; background: #555; color: #fff; text-align: center; width: 250px; height: 50px; display: none;}
    .tab-menu .tab-list-on {overflow: hidden;}
    .tab-lists .tab-list-on .btn{font-weight: bold; color: #000;}
    .tab-lists .tab-list-on .cont{display: block;}
  </style>

Javascript - for문

 <script>
    const tabMenu = document.querySelectorAll(".tab-lists li")

    for(let i =0; i < tabMenu.length; i++){
      tabMenu[i].querySelector('.btn').addEventListener('click',function(e){
        e.preventDefault();
        for(let j = 0; j <tabMenu.length; j++){
          tabMenu[j].classList.remove('tab-list-on');
        }
        this.parentNode.classList.add('tab-list-on');
      });
    }
  </script>

1. tab-lists 안에 있는 li에 addEventListener로 클릭 이벤트 걸기
2. .btn을 a로 만들어놨는데 화면 이동을 막을 수 있는 e.preventDefault()를 걸어준다.
3. .btn 클릭시 해당 버튼의 부모 요소에 .tab-list-on 클래스를 준다. (add)
4, .btn을 클릭했을 때, 다른 부모 요소 .tab-list-on 클래스를 해제시켜준다. (remove)

2. 탭 버튼과 탭 컨텐츠가 다른 영역에 있을 경우

아래 코드와 같이 탭과 컨텐츠가 마크업상 분리 되어있을 때 사용할 수 있는 탭 구현 방법이다.

HTML

 <div class="tab-menu">
      <ul class="lists">
        <li class="tab-list-on">
          <a href="#tab1" class="btn">첫번째 탭</a>
        </li>
        <li>
          <a href="#tab2" class="btn">두번째 탭</a>
        </li>
        <li>
          <a href="#tab3" class="btn">세번째 탭</a>
        </li>
      </ul>
      <div class="cont-box">
        <div id="tab1" class="cont" style="display: block;">첫번째 내용</div>
        <div id="tab2" class="cont">두번째 내용</div>
        <div id="tab3" class="cont">세번째 내용</div>
      </div>
</div>

CSS

  <style>
    * {padding: 0; margin: 0;}
    a{text-decoration: none; color: inherit;}
    li {list-style: none;}

    .tab-menu {position: relative;}
    .tab-menu .lists{overflow: hidden; display: flex; }
    .tab-menu .lists li {margin-right: 10px; border-bottom: 2px solid #333;}
    .tab-menu .list .tab-list-on {font-weight: bold; color: #000;}
    .tab-menu .cont {position: absolute; top: 25px; left: 0; background: #ccc; text-align: center; width: 250px; height: 100px; margin-top: -2px; display: none;}
  </style>

Javascript - for문

<script>
    const tabMenu = document.querySelectorAll(".tab-menu .lists li");
    const cont = document.querySelectorAll(".tab-menu .cont-box .cont");

    let actiVate = ''; 

    for(let i =0; i<tabMenu.length; i++){
      tabMenu[i].querySelector('.btn').addEventListener('click',function(e){
        e.preventDefault();
        for(let j =0; j < tabMenu.length; j++){
          tabMenu[j].classList.remove('tab-list-on');

          cont[j].style.display = 'none';
        }
        this.parentNode.classList.add('tab-list-on');
        actiVate = this.getAttribute('href');
        document.querySelector(actiVate).style.display = 'block';
      });
    }
  </script>

1번과 다르게 탭 버튼과 콘텐츠가 떨어져있어도 actiVater가 현재 활성화되어있어
탭 버튼을 클릭할 때마다 a태그의 href 값을 받아와 해당하는 id값을 보여준다.

완성본

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

출처: https://abcdqbbq.tistory.com/88

[일기] 20대 후반, 이전 경력을 버리고 '비전공자 신입 웹 퍼블리셔'로 가다 / 웹 퍼블리셔 준비하기

지얌이 — Thu, 30 Nov 2023 10:35:54 +0900

내 나이 만20대 중후반, 20대 극초반 아무것도 모르는 상태로 처음에 사무보조 알바로 들어가
회계팀 제안을 받아 5-6년간 회계로 일하게 되었다. (전공이 경영분야 전공이기도 함)

일하다가 문득 든 생각

"내가 이 일이 적성에 맞긴한가? 이렇게 20대를 허무하게 보내고 싶지 않은데"

라는 생각이 들었다.

생각해보니 20대 초반 아무것도 모르던 시절 좋은 제안을 덥썩 물고 쭉 그 길을 향해 달려왔는데
정작 나는 내가 무슨 일을 하고 싶은지 찾아보지도 도전해보지도 않고 그냥 흘러가는 그대로 쭉 앉아있던 그런 사람이였다.

그래서 나는 결심했다. 퇴사하기로. 무모한 도전이였다.
물론 주위에서 지인들이 요즘 취업시장이 좋지 않다고 퇴사를 말리는 사람이 대부분이였지만
반대로 그만큼 새 꿈을 펼쳐보라는 많은 응원을 받았다. 이전직장에서도 새 출발해보라고 응원을 해주셨다.

먼저 퇴사하기 전, 퍼블리셔 교육을 받을 수 있는 학원을 먼저 알아봤다.
다행히 집 바로 근처에 학원이 있었고 학원 상담사 선생님이 수료한 사람들의 포트폴리오를 보여주셨는데 너무 신기했다.
"이게 6-7개월만에 홈페이지 만드는게 가능하다고...? 밑져야 본전이다 해보자."
그렇게 나는 새로운 꿈에 첫 발을 디딛었다.

다행히 좋은 강사쌤을 만난 덕분에 많이 성장할 수 있었고 많은 것을 배울 수 있었다.
솔직히 학원 다닐 초반에는 이전 경력도 버려야했고, 수중에 가지고 있는 돈도 많지않고...
여유가 없어 방황도 많이했지만 시간이 지날수록 안정적으로 학원을 다녔고 흥미를 붙였다.

또한 내가 앉은 자리 양옆자리에 아무도 없어서 4개월간은 다른 사람이랑 말을 한번도 섞어본 적이 없었다.

(입을 한번도 열지 않아서 집가면 입냄새가...후...)

하지만 하반기에 팀프로젝트를 진행하면서 팀이 꾸려졌는데 다행히 잘 맞아 아직까지 연락하고 지내고있다.

그리고... 학원 수료 한달 후, 복지도 좋고 규모가 조금 있는 곳에 취업 성공했다!
보통 3개월정도는 소요된다고 하는데 나는 취업을 빠르게 한 편이라고 한다.

내가 배운것을 토대로 학원에서 배운 점을 공유해보고자 한다.

학원에서 배운 언어와 툴

Html5
Css
Sass
Javascript
JQuery
Firebase
React
Bootstrap
Adobe xd
Photoshop
Illustrator
Api

이 외.. 아마 더 배웠을 것 같은데 생각이 잘 나지 않는다.
23년 4월~ 23년 10월까지 정~말 많은 것을 배웠다.

배우면서 강사쌤이 참 좋은분이라는 것을 알게됐다.
원래 정해져있는 히스토리가 아닌 이상, 이정도로 알려주시기 쉽지 않을텐데
수강과정에 있는 것보다 훨씬 더 많은 언어와 툴을 알려주신 것 같았다. (아님말구...)

저 많은 툴을 잘 쓰지는 못하지만 그래도 한번씩은 해봤고 우여곡절 끝에 프로젝트를 완성한 점이 많았어서
학원 수강한 것에 전혀 후회가 되지 않는다.

학원 다니면서 꼭 해야할 것

학원을 다니면서 제일 후회했던게, 꾸준히 공부를 안했던 것이다.
난 이제서야 블로그 개설해서 이론 공부하고있는데.. 만약 학원 수강계획이 있는 사람이 있다면
블로그를 만들고 학원을 다니면서 일주일에 1-2개라도 글 올리는 것을 추천한다.

블로그에 글을 적으면서 공부하면 정말 많은 도움을 받을 수 있다.
학원을 다니면서 전혀 이해되지않던 자바스크립트가 이해되는 마법이 생긴다ㅋㅋㅋㅋㅋㅋ
난 함수도 변수도 헷갈렸는데 이제 그나마 뭐가 뭔지 파악이 된 것 같다.

포트폴리오는 학원 수료 하기 전, 1-2개월 전에 미리 만들어둘 것.
나는 10월말쯤 수료했는데 10월 초부터 포트폴리오를 만들었다.
포폴 만들면서 2-3번은 뒤엎었고 그만큼 시간이 뺏겨 강사쌤에게 피드백 받는 시간이 줄어드니
먼저 최대한 만들어놓고 피드백을 받자.

모르는 것이 있으면 다른 사람에게 먼저 물어보지말고 자기가 할 수 있는 선에서 최대한 구글링을 하거나
자료 수집을 통해 해결하자! 나는 원래 독립적인 성향이 강했고 양 옆에 사람이 없어 어쩔 수 없이 쭉 혼자 해결을 해왔는데 혼자 해결하는 만큼

그만큼 본인이 성장할 수 있는 기회이다.

나 같은 경우는 학원 다닐 초반에 방황을 많이 해서 수업을 빠진 적이 여러 번 있었다.
다음 날, 수업을 들으러 갔을 때 빠지는 사이 모르는 태그들이 나와 우선 그대로 받아적되, 쉬는 시간을 활용해
그 태그의 정보, 사용법을 익혔다. 또한 점심시간이나 집에 돌아와서 그 태그의 사용법이 익숙해질 때까지 연습해봤었다.

그리고!!! html과 css는 최소 한 달전에 연습해보길 추천한다.
학원에서 html을 배우고 있을 때, 본인은 훨씬 더 앞서있을 것이고 다른 공부할 시간이 많이 생길 것이다.

지혀니의 알쏭달쏭 지식

[Javascript] 자바스크립트로 카운팅 해보기 / count 세어보기

HTML

CSS

Javascript

[Javascript] 슬라이드 배너 자바스크립트로 다뤄보기 (fadeIn, top, left..)

1. fadeIn/out 슬라이드 배너

2. 왼쪽으로 이동하는 슬라이드(오른쪽도 가능)

3. 아래로 이동하는 슬라이드(위로도 가능)

4. 뚝뚝 끊기는 화면전환 슬라이드

5. 버튼 슬라이드

[Javascript] 자바스크립트로 드롭다운 메뉴 6종류 다뤄보기

1. 하위메뉴가 개별로 하나씩 내려오는 메뉴 만들기

2. 하위메뉴가 한번에 내려오는 메뉴 만들기

3. 하위메뉴와 background 배경 함께 내려오게 하기

4. 사이드에 있는 메뉴 하나씩 down

5. 사이드 메뉴 오른쪽으로 나타나게 하기

6. 사이드 메뉴 전체 background 배경과 한번에 나오게 하기

[Javascript] forEach/for..in/for..of/for 구문

forEach함수의 구문

for..in함수의 구문

for함수의 구문

for..of함수의 구문

forEach로 예제 풀어보기

for, forEach의 차이점

[Javascript] 코딩 기본 용어 정리(property/array...framework..)

기본 용어 정리

[Javascript] addEventListener 사용법과 이벤트(Event) 종류 / onClick의 차이

addEventListener()이란?

자바스크립트 이벤트 3가지 방법

onClick()과의 차이

[Javascript] 자료형 배열(Array type)과 for문

배열 기본

원하는 인덱스로 데이터 값을 출력하기

여러 개의 예제로 적용해보자.

인덱스 출력해보기

배열의 반복문

[Javascript] var / let / const 변수 선언과 규칙

변수란?

명시적 선언

var / let / const 의 특징

var의 특징

let의 특징

const의 특징

변수 이름을 지어줄 때 일정한 규칙

[Javascript] for문을 사용해서 tab-menu/탭메뉴 만들기

1. 탭 버튼과 탭 컨텐츠가 한 영역안에 있을 경우

HTML

CSS

Javascript - for문

2. 탭 버튼과 탭 컨텐츠가 다른 영역에 있을 경우

HTML

CSS

Javascript - for문

완성본

[일기] 20대 후반, 이전 경력을 버리고 '비전공자 신입 웹 퍼블리셔'로 가다 / 웹 퍼블리셔 준비하기

학원에서 배운 언어와 툴

학원 다니면서 꼭 해야할 것

그 틈을 타서 본인을 빠르고 크게 성장시키자.