[제이쿼리(jQuery) UI] 컨트롤바슬라이더 1. 마크업

오늘 만들어볼 슬라이더는 컨트롤바가 있는 슬라이더 이다,

어떤식이 있는지 먼저 알아보자.

우리는 여기에 글자가 함께 전환되는 효과까지 해보려 한다.

이미지가 슬라이드 되면 현재 있는 글자가 그 위치에서 사라지고 새 글자가 좌측에서 우측으로 이동하는 슬라이더 이다.

예제 자료

img.zip

맨 먼저 우리는 마크업 부터 해보려 한다.

1. 첫째 필요한건 저러한 내용을 담고 있는 '영역' 일것이다.

2. 그리고 그 영역 안에 이미지들을 담고있는 영역

3. 텍스트를 담을 영역

4. 컨트롤 버튼을 담을 영역

<!-- 보여져야 하는 영역 -->
<div class="view">
 
    <!-- 이미지를 담고있는 영역 -->
    <div class="img_wrap">
    </div>
 
    <!-- 내용을 담고있는 영역 -->
    <div class="text_wrap">
    </div>
 
    <!-- 컨트롤 바를 담고있는 영역 -->
    <div class="control_wrap">
    </div>
 
</div>

이런식의 코딩이 되겠다.

예제 이미지 압축을 풀면 총 이미지가 6장이 들어있을 것이다.

슬라이드 되야하는 이미지의 갯수 5장과 컨트롤 버튼 이미지 1장이 있다.

그럼 이미지 영역에 이미지 5개를 모두 로드시켜 준다.

젠코딩을 한번 이용해보자

<!-- 이미지를 담고있는 영역 -->
<div class="img_wrap">
    img[src="img/photo$.jpg" alt="slide_img"]*5
</div>

이런식으로 코딩한후 끝에 탭을 눌러 확인해 보면

<!-- 이미지를 담고있는 영역 -->
<div class="img_wrap">
    <img src="img/photo1.jpg" alt="slide_img">
    <img src="img/photo2.jpg" alt="slide_img">
    <img src="img/photo3.jpg" alt="slide_img">
    <img src="img/photo4.jpg" alt="slide_img">
    <img src="img/photo5.jpg" alt="slide_img">    
</div>

이런 결과가 나온다.

저 젠코딩의 해석은 img라는 태그안에 속성으로 src 와 alt 속성을 준뒤 그걸 5개로 만들겠다는 것이다. $ 이 기호는 만들어질 무언가의 갯수를 자동으로 1부터 정해진 값만큼 체워준다.

두번째 텍스트 영역을 한번 기록해 보자.

한 영역안에 제목태그와 문단태그가 하나씩 차지하고 있는데

제목태그와 문단태그로 이미지에 대한 제목과 설명을 넣어준다고 생각하면 될꺼같다.

<!-- 내용을 담고있는 영역 -->
<div class="text_wrap">
    <div class="slider_text">
        <h1>1. Lorem ipsum.</h1>
        <p>1-1 Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
    <div class="slider_text">
        <h1>2. Lorem ipsum.</h1>
        <p>2-1 Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
    <div class="slider_text">
        <h1>3. Lorem ipsum.</h1>
        <p>3-1 Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
    <div class="slider_text">
        <h1>4. Lorem ipsum.</h1>
        <p>4-1 Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
    <div class="slider_text">
        <h1>5. Lorem ipsum.</h1>
        <p>5-1 Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
</div>

요렇게...

사실 이 텍스트 영역은 필요에 따라서 이렇게 넣어줄 수도 아닐수 있다.

마지막으로 컨트롤 버튼에 5개의 버튼을 넣어주겠다.

<!-- 컨트롤 바를 담고있는 영역 -->
<div class="control_wrap">
    <div class="control_btn"></div>
    <div class="control_btn"></div>
    <div class="control_btn"></div>
    <div class="control_btn"></div>
    <div class="control_btn"></div>
</div>

여기서 한가지 의문이 들 수도 있다.

컨트롤 버튼도 이미지가 있고 이미지를 넣어줘야 하는것 아닌가요?

이미지를 넣어줘야 하는건 맞는데

우리는 css 의 선택자 중에 필터 선택자를 이용해서 그림을 제어해 보도록 하겠다.

즉 요소 자체를 다루는게 아닌 버튼 이미지를 요소의 배경이미지로 쓰려한다.

(의미 없는 이미지일 경우 굳이 img 를 쓰는것보다 css 의 background 속성을 쓰는걸 추천한다.)

최종적으로 이런 마크업이 되어있는지 확인하자.

<!-- 보여져야 하는 영역 -->
<div class="view">
 
    <!-- 이미지를 담고있는 영역 -->
    <div class="img_wrap">
        <img src="img/photo1.jpg" alt="slide_img">
        <img src="img/photo2.jpg" alt="slide_img">
        <img src="img/photo3.jpg" alt="slide_img">
        <img src="img/photo4.jpg" alt="slide_img">
        <img src="img/photo5.jpg" alt="slide_img">
    </div>
 
    <!-- 내용을 담고있는 영역 -->
    <div class="text_wrap">
        <div class="slider_text">
            <h1>1. Lorem ipsum.</h1>
            <p>1-1 Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
        <div class="slider_text">
            <h1>2. Lorem ipsum.</h1>
            <p>2-1 Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
        <div class="slider_text">
            <h1>3. Lorem ipsum.</h1>
            <p>3-1 Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
        <div class="slider_text">
            <h1>4. Lorem ipsum.</h1>
            <p>4-1 Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
        <div class="slider_text">
            <h1>5. Lorem ipsum.</h1>
            <p>5-1 Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
    </div>
 
    <!-- 컨트롤 바를 담고있는 영역 -->
    <div class="control_wrap">
        <div class="control_btn"></div>
        <div class="control_btn"></div>
        <div class="control_btn"></div>
        <div class="control_btn"></div>
        <div class="control_btn"></div>
    </div>
 
</div>

현재까지의 작업 결과물..

컨트롤바슬라이더(마크업).zip

css 는 다음편에 이어서..