기본css/슬라이드 배너 만드는 법

1.슬라이드 배너 만드는 법

<!--여기서 --으로 표시한 것은 css-->
  <div class="hidden"> ---overflow : hidden
        <div class = "container"> 
          ---배너의 크기(width) : 이미지장수 * 100 vw
          ---transition : transform 0.5s
          <div class="inner">
          --inner에 width: 100vw, float: left(왼쪽정렬)
          --inner img에도 width:100vw
            <img src ="./img/bannerimg1.jpg">
          </div>
          <div class="inner">
            <img src ="./img/bannerimg2.jpg">
          </div>
          <div class="inner">
            <img src ="./img/bannerimg3.jpg">
          </div>
          <div class="inner">
            <img src ="./img/bannerimg4.jpg">
          </div>
        </div>
      </div>

       <!--버튼을 클릭하면 해당 이미지가 나온다-->
      <div class="button_container"> --배너이미지보다 앞으로 
                                     나오게 하고 싶으면 z-index
        <button id="btn1"></button> ---하나하나씩 js로 클릭이벤트
        <button id="btn2"></button> ---하나하나씩 js로 클릭이벤트
        <button id="btn3"></button> ---하나하나씩 js로 클릭이벤트
        <button id="btn4"></button> ---하나하나씩 js로 클릭이벤트
      </div>  

다음은 js문법이다.

//버튼, 컨테이너 변수 지정
const button1 = document.querySelector('#btn1');
const button2 = document.querySelector('#btn2');
const button3 = document.querySelector('#btn3');
const button4 = document.querySelector('#btn4');
const bannerContainer = document.querySelector('.container');

//버튼에 각각 클릭시 이벤트 지정. style을 
//translate을 통해 100vw로 오른쪽이동 하는 이벤트를 사용함.
button2.addEventListener('click',function(){
  bannerContainer.style.transform = 'translate(-100vw)';
})
button3.addEventListener('click',function(){
  bannerContainer.style.transform = 'translate(-200vw)';
})
button4.addEventListener('click',function(){
  bannerContainer.style.transform = 'translate(-300vw)';
})
button1.addEventListener('click',function(){
  bannerContainer.style.transform = 'translate(0)';
})

2. 기본 css

css를 사용할 때 불필요한 여백이나 스타일을 없애주는 기본을 설정하고
css를 주면 좋다.

/*간격 0 */
* {
   margin: 0;
   padding: 0;
   border: 0;}
/*이미지 사이의 공백 없애기*/
img {
   vertical-align: bottom;
   vertical-align: top;
}
/*a태그, li태그 스타일 0 */
a{
   text-decoration: none;
}
li{
   list-style: none;
}

3. 오답노트

1. 미디어쿼리를 위해서 <유동적인 문법을 쓸것>

• margin :0 auto를 쓰면 화면 크기에 따라 자동으로 텍스트가 중간정렬된다.padding-left대신 margin : 0 auto를 쓰면 좋다.

• position: absolute를 자제할 것.content안에 content(글,사진)이 정확한 위치에 들어가야 하는 경우..(보통은 padding으로 가능) absolute를 주게 편할 수 있는데 이는 자제하는 것이 좋다. 화면 크기를 줄이면 absolute로 준 position에 따라 해당 위치에만 위치하게 된다.
  -> 대신 flex를 쓰고 flex-wrap을 쓰면 화면 크기가 줆에 따라서 넘치는 콘텐츠가 밑으로 자연스럽게 위치하게 된다.
  -> float도 있는데 이보다 flex를 쓰는 것이 더 현대적이다(?)

2. 개발자도구 자주 확인
css를 줄 때 문제가 생기거나, 생기지 않더라도 개발자 도구(f12)를 보고 내가 원하는 방향으로 잘 css가 넣어지고 있는지 확인해야 한다.

3. div를 잘 활용하자
div로 원하는 요소들을 잘 묶고 class를 주면 그 묶음 전체에 css를 줄 수 있다.