HTML / CSS

관공서 클론코딩

경기도 사이버 도서관

• 메뉴는 생략하고 슬라이드 부분과 검색창을 만든다

결과물

(슬라이드) HTML 구성

<div class="slideArea">
    <h2 class="ir_so">서비스안내슬라이드</h2>
        <ul class="slideList">
           <li><a href="#"><img src="./img/slide1.png" alt="mainslide1"></a></li>
           <li><a href="#"><img src="./img/slide2.png" alt="mainslide2"></a></li>
           <li><a href="#"><img src="./img/slide3.png" alt="mainslide3"></a></li>
           <li><a href="#"><img src="./img/slide4.png" alt="mainslide4"></a></li>
       	</ul>
	<div class="controlArea">
    	<a href="javscript:" class="btnSlidePrev"><span class="ir_pm">이전 서비스 보기</span></a>
        <a href="javscript:" class="btnSlidePP"><span class="ir_pm">재생/정지</span></a>
        <a href="javscript:" class="btnSlideNext"><span class="ir_pm">다음 서비스 보기</span></a>
   </div>
</div>

• span 태그에는 ir_pm 을 넣어 작성한다.

  • .ir_pm {display:block; overflow:hidden; font-size:0; line-height:0; text-indent:-9999px;} / 의미있는 이미지의 대체 텍스트를 제공하는 경우(Phark Method) /
  • .ir_wa {display:block; overflow:hidden; position:relative; z-index:-1; width:100%; height: 100%;} / 의미있는 이미지의 대체 텍스트로 이미지가 없어도 대체 텍스트를 보여주고자 할 때(WA IR) /
  • .ir_so {overflow: hidden; position:absolute; width:0; height:0; line-height:0; text-indent:-9999px;} / 대체 텍스트가 아닌 접근성을 위한 숨김 텍스트를 제공할 때 /

(슬라이드) CSS 구성

.sectionGroup{
	width: 1000px; 
    height: 316px; 
    }
.slideArea{
	width: 668px; 
    height: 316px; 
    float: left; 
    position: relative;
    }
.slideArea .slideList{
	width: 100%; 
    height: 100%; 
    overflow: hidden; 
    position: relative;
    }
.slideArea .slideList li{
	width: 100%; 
    height: 100%; 
    position: absolute; 
    top:0; 
    left: 100%;
    }
.slideArea .slideList li:first-child{
	left: 0;
    }
.slideArea .slideList li a{
	display: block; 
    width: 100%; 
    height: 100%;
    }
.slideArea .slideList li a img{
	display: block; 
    width: 100%; 
    height: 100%;
    }
.controlArea{
	position: absolute; 
    width: 81px; 
    height: 27px; 
    background: red;
    bottom: 0; 
    left: 0;
    }
.controlArea a{
	width: 27px; 
    height: 27px; 
    background: yellow; 
    display: block; 
    float: left; 
    background: url(../img/btn_roll.png) no-repeat;
    }
.controlArea .btnSlidePrev{
	background-position: 0 0;
    }
.controlArea .btnSlidePP{
	background-position: -27px 0;
    }
.controlArea .btnSlidePP.add{
	background-position: -54px 0;
    }

(슬라이드) JavaScript 구성

$(function(){
    const slide=$('.slideList li');
    const prevbtn=$('.btnSlidePrev');
    const nextbtn=$('.btnSlideNext');
    const pausebtn=$('.btnSlidePP');
    let current=0;
    let setIntervalId=undefined;
    let ppbtn=true;
    timer();
    function timer(){
        setIntervalId=setInterval(function(){
            let prev=slide.eq(current);
            move(prev, 0, '-100%');
            current++;
            if(current==4){current=0}
            let next=slide.eq(current);
            move(next, '100%', 0)
        },2000);
    }
    function move(tg, start, end){
        tg.css('left', start).stop().animate({left:end});
    }

• 슬라이드 이미지를 position:absolute 하여 정렬하고 슬라이드 영역을 벗어나게 하여 overflow:hidden을 사용하여 감춰준다.
• jQuery / JavaScript를 사용하여 슬라이드를 자동으로 넘기게 구성한다.