바닐라 자바스크립트(Vanillia JS) - 17

tab원리

    <style>
       .tab { width: 500px; border: 1px solid #000; position: relative; height: 400px;}
       .tab dt {
           width: 100px; height: 40px; margin-right: 5px;
           background: #999;
           color:#fff;
           text-align: center;
           line-height: 40px;
           float: left;
           cursor: pointer;
       }
       .tab dt.on { background: pink;}
       .tab dd {
           position: absolute;
           left: 0;
           top: 50px;
           width: 100%;
           height: 300px;
           display: none;
       }  
       .tab dd.on { display: block;}     
       .tab dd:nth-of-type(1) {background: pink; display: block; }
       .tab dd:nth-of-type(2) {background: skyblue;}
       .tab dd:nth-of-type(3) {background: lime;}
       .tab dd:nth-of-type(4) {background: tomato;}
    </style>

    <dl class="tab">
        <dt class="on" data-id="tab1" >제목1</dt>
        <dd id="tab1">내용1</dd>

        <dt data-id="tab2" >제목2</dt>
        <dd id="tab2">내용2</dd>

        <dt data-id="tab3">제목3</dt>
        <dd id="tab3">내용3</dd>

        <dt data-id="tab4">제목4</dt>
        <dd id="tab4">내용4</dd>
    </dl>

    <script>
       let dt = document.querySelectorAll('.tab dt');
       let dd = document.querySelectorAll('.tab dd');
       let id= ''

       dt.forEach( dtItem => {
            dtItem.addEventListener('click' , e => {
                id = e.currentTarget.dataset.id;                
                const el = document.getElementById( id );                

                dt.forEach( item => {
                    item.classList.remove('on');
                }) 
                //e.currentTarget.classList.add('on');
                 dtItem.classList.add('on');

                if( id ) {
                    dd.forEach( ddItem => {
                        ddItem.classList.remove('on')
                    })
                    el.classList.add('on')
                }
           })
       })

    </script>

서브탭원리

    <style>
       #content { width: 100%; }
       #content .inner { width: 1400px; margin: auto; }
       .sub-tab {}
       .sub-tab .tab {display: flex;}
       .sub-tab .tab li {}
       .sub-tab .tab li a {display: block; width: 200px; height: 60px; margin-right: 10px; border: 1px solid #dcdcdc; text-align: center; line-height: 60px; }
       .sub-tab .tab li.on a {background: tomato; color:#fff}
      
       .sub-tab .con-box { margin-top: 60px; width: 100%; position: relative; height: 1000px; }
       .sub-tab .con-box .box { position: absolute; width: 100%; }
       .sub-tab .con-box .box h3 {font-size: 50px; padding-top: 50px;}
       .sub-tab .con-box .box p {margin-top: 30px; font-size: 18px;}
       .sub-tab .con-box .box1 {height: 600px; background: pink;}
       .sub-tab .con-box .box2 {height: 1000px; background: skyblue;}
       .sub-tab .con-box .box3 {height: 1200px; background: lime;}
       .sub-tab .con-box .box4 { height: 400px; background: tomato;}
       .sub-tab .con-box .box5 { height: 800px; background: yellow;}
       #footer { width: 100%; height: 150px; background: #333; 

       }  
    </style>     

  <section id="content">
       <div class="inner">
           <div class="sub-tab">
               <ul class="tab">
                   <li class="on" data-id="1" ><a href="#" >제목1</a></li>
                   <li data-id="2"><a href="#" >제목2</a></li>
                   <li data-id="3"><a href="#" >제목3</a></li>
                   <li data-id="4"><a href="#" >제목4</a></li>
                   <li data-id="5"> <a href="#" >제목5</a></li>
               </ul>
               <div class="con-box">
                    <article class="box box1">
                        <h3>제목1</h3>
                        <p>
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima expedita autem harum officia debitis, ullam sapiente itaque nulla beatae eius molestiae excepturi non repellendus doloremque nam, temporibus consequatur vero. Voluptatibus?
                        </p>
                    </article>
                    <article class="box box2">
                        <h3>제목2</h3>
                        <p>
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima expedita autem harum officia debitis, ullam sapiente itaque nulla beatae eius molestiae excepturi non repellendus doloremque nam, temporibus consequatur vero. Voluptatibus?
                        </p>
                    </article>
                    <article class="box box3">
                        <h3>제목3</h3>
                        <p>
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima expedita autem harum officia debitis, ullam sapiente itaque nulla beatae eius molestiae excepturi non repellendus doloremque nam, temporibus consequatur vero. Voluptatibus?
                        </p>
                    </article>
                    <article class="box box4">
                        <h3>제목4</h3>
                        <p>
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima expedita autem harum officia debitis, ullam sapiente itaque nulla beatae eius molestiae excepturi non repellendus doloremque nam, temporibus consequatur vero. Voluptatibus?
                        </p>
                    </article>
                    <article class="box box5">
                        <h3>제목5</h3>
                        <p>
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima expedita autem harum officia debitis, ullam sapiente itaque nulla beatae eius molestiae excepturi non repellendus doloremque nam, temporibus consequatur vero. Voluptatibus?
                        </p>
                    </article>
               </div>
           </div>
       </div>
   </section>

 <footer id="footer">
       하단내용
   </footer> 

   <script>
        let li = document.querySelectorAll('.sub-tab .tab li');
        let box = document.querySelectorAll('.sub-tab .con-box .box');
        let content = document.querySelector('#content');
        let id ='';
        let h = '';

        box.forEach( boxlist => {
            boxlist.style.display ='none';
        }) 
        box[0].style.display ='block';

        li.forEach( item => {
            item.addEventListener( 'click', e => {
                id  = e.currentTarget.dataset.id ;
                box.forEach( boxlist => {
                    boxlist.style.display ='none';
                }) 
                box[id].style.display ='block';

                // css의 값을 꺼내오기
                h = window.getComputedStyle( box[id] ).getPropertyValue('height');
                h = parseInt( h ) + 200 ;
                content.style.height  = h + 'px';
                console.log( h  );
            })
        })
   </script>

   <pre>
    xxx  =  box.style.fontSize -> css값을 가져오지 못한다 
    속성 
    css 속성 뽑 아오기     
    getComputedStyle() 메소드
    window.getComputedStyle(element[, pseudoElt]);
    https://developer.mozilla.org/ko/docs/Web/API/Window/getComputedStyle
   </pre>

갤러리

 <style>
       .con-box {width: 1400px; margin: auto; display: flex;}
       .con-box ul{display: flex; width: 600px; flex-wrap: wrap;}
       .con-box ul li {padding: 5px;}
       .con-box ul li.on {background: tomato;}
       .con-box ul li img { vertical-align: top; width: 140px; height:140px;}
       .con-box .txt-box {width: 400px; height: 450px; position: relative; box-sizing: border-box; padding:0 20px; }
       .con-box .txt-box article { width: 89%; height: 430px; position: absolute; background: beige; box-sizing: border-box; padding: 20px; display: none;}
       .con-box .txt-box article:first-child {display: block;}
       .con-box .txt-box article h3 { font-size: 25px; margin-bottom: 20px;} 
       .con-box .big-img {width: 400px;}
       .con-box .big-img img{width: 400px;}
</style>

 <div class="con-box">
       <ul>
           <li class="on" data-id="0" ><img src="images/thum0.jpg" alt="" ></li>
           <li data-id="1"><img src="images/thum1.jpg" alt="" ></li>
           <li data-id="2"><img src="images/thum2.jpg" alt="" ></li>
           <li data-id="3"> <img src="images/thum3.jpg" alt="" ></li>
           <li data-id="4"><img src="images/thum4.jpg" alt="" ></li>
           <li data-id="5"><img src="images/thum5.jpg" alt="" ></li>
           <li data-id="6"><img src="images/thum6.jpg" alt="" ></li>
           <li data-id="7"><img src="images/thum7.jpg" alt="" ></li>
           <li data-id="8"><img src="images/thum8.jpg" alt="" ></li>
           <li data-id="9"><img src="images/thum9.jpg" alt="" ></li>
       </ul>
       <div class="txt-box">
           <article>
            <h3>타이틀1</h3>
            <p>제품에 대한설명1</p>
           </article>
           <article>
            <h3>타이틀2</h3>
            <p>제품에 대한설명2</p>
           </article>
           <article>
            <h3>타이틀3</h3>
            <p>제품에 대한설명3</p>
           </article>
           <article>
            <h3>타이틀4</h3>
            <p>제품에 대한설명4</p>
           </article>
           <article>
            <h3>타이틀5</h3>
            <p>제품에 대한설명5</p>
           </article>
           <article>
            <h3>타이틀6</h3>
            <p>제품에 대한설명6</p>
           </article>
           <article>
            <h3>타이틀7</h3>
            <p>제품에 대한설명7</p>
           </article>
           <article>
            <h3>타이틀8</h3>
            <p>제품에 대한설명8</p>
           </article>
           <article>
            <h3>타이틀9</h3>
            <p>제품에 대한설명9</p>
           </article>
           <article>
            <h3>타이틀10</h3>
            <p>제품에 대한설명10</p>
           </article>
       </div>
       <div class="big-img">
           <img src="images/bigimg0.jpg" alt="" >
       </div>
   </div>

- 오늘 퇴근전까지 포스팅 마무리하고 집가야지(레이아웃작업도 다 끝내자!)
- 이젠아카데미 재직자 과정 수강 중