java script9일차

학습한내용
java script 기초/실습-(실습)포트폴리오 웹페이지 만들기
실습1.
이전 다음 버튼으로 이미지 이동하기

<h1>MINI Carousel</h1>
<div class="window"> 
  <ul class="container">
    <li class="cell">5</li>
    <li class="cell">1</li>
    <li class="cell">2</li>
    <li class="cell">4</li>
    </ul>
    </div>
    <div class="button-container">
    <button class="prev">previous</button>
    <button class="next">next</button>
    </div>
    <script>
    const container = document.querySelector(".container");
    const preBtn = document = document.querySelctor(".prev");
    const nextBtn = document = document.querySelctor(".next");
    (fuction addEvent(){
    prevBtn.addEventListener('click', translateContainer.blind(this,1));
    nextBtn.addEventListener('click', translateContainer.blind(this,-1));
    })();
    fuction translateContainer(direction){
    const selecteBtn-(direction===1)? 'prev' : 'next';
    container.style.trnastionDuration='500ms';
    container.style.transform='translateX($direction*100/5)}%)';='500ms';
    container.ontransitionend=()=> reorganizeEl(selectBtn);
    }
    fuction reorganizeEl(selecedBtn){
    container.removeAttribute('style');
    (selectedBtn ==='prev')? container.insertBefore(contaioner.lastElementChild,container.firstElementChild): container.appendChild(container.firstElementChild);
    }
    </script>
   bind 는 연결한다는 의미
   =()=>"화살표 함수 , 함수를 재사용 많이 하지 않고 짧게쓸떄 사용
   ,,,
   실습2. 포트폴리오 웹페이지 만들기
   1)<header>
   <div class="container">
   <h1>
   <button>LOGO</button>
   </h1>
   <nav>
   <ul>
   <li>
   <button>About</button>
   </li>
   <li>
   <button>Featuers</button>
   </li>
   <li>
   <button>Portfolio</button>
   </li>
   <li>
   <button>Contact</button>
   </li>
   </ul?
   </nav>
   </div>
   </header>
   2)main 영역
   <main id="main">
   <div class="container">
   <h4>Welcome</h4>
   <h2>I'MA<span>Front-End Developer</span></h2>
   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.Praesentium doolr quas nulla nude ea officiis?</p>
   <button class="download">DOWNLOAD CV</button>
   <button class="mouse"><i class="fa-solid fa-computer-mouse"></i></button>
   <div>
   </main>
   3)about me 영역
   html
   <section id="about" class="about">
   <div class="container">
   <div class="title">
   <h4>	Who Am I</h4>
   <h2>About Me</h2>
   </div>
   <div class="about-self">
   <div class="left">
   <img src="./imanges/me_alone.jpg"alt="">
   <div>
   <div class="right">
   <h3>Hello, <strong> I'm Sucoding</strong></h3>
   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe veritatis aperiam accusantium.</p>
   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit praesentium doloremque quos quis est officiis.</p>
   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem, omnis quibusdam</p>
 <div class="social">
 <a href=#">
 <i class="fa-brands fa-facebook"></i>
 </a>
 <a href="#">
 <i class="fa-brands fa-instagram"></i>
 </a>
 <a href="#">
 <i class="fa-brands fa-twitch"></i>
 </a>
 <a href="#">
 <i class="fa-brands fa-youtube"></i>
 </a>
 <div>
 </div>
 </div>
 </section>

학습 소감
HTML css, javascript를 활용하여 홈페이지를 만든다는게 흥미롭고 신기했다.
아직 많이 부족하여 연습을 많이 해야겠다.