[제이쿼리(jQuery) UI] 컨트롤바슬라이더 2. CSS part2. CSS작성

일단 css 를 작업하기에 압서 'reset-css' 를 만들어 쓰거나 혹은, 가져와서 쓰는걸 권장한다.

일단 임시로 모든 요소의 안쪽, 바깥쪽 여백을 지우고 시작하겠다.

*{margin: 0;padding: 0;}

'*' 는 모든 요소를 선택하는것과 같다.

개발자도구로 살펴보면

html 이나 head, style 등등 에도 모두 이 값이 적용되어 있는걸 알 수 있다.

첫번째로 보여져야 하는 영역에 대한 부분에 대해서 css 작업을 하겠다.

먼저 보여지는 부분에 대한 너비값을 결정하자.

이 예제에선 너비값을 600px 만큼만 주도록 하겠다.

보여지는 부분은 바로 이 이미지의 너비값 만큼만 주도록 하자.

(Q 그럼 왜 높이값을 안주나요? : A 높이값은 이미지의 높이에 맞춰서 그걸 감싸는 영역이 자동적으로 그만큼 늘어납니다.)

그리고 포지션값을 주는데 포지션은 왜 주느냐... 우리가 안에서 무언가를 움직일때는 보통 css 의 left 속성을 많이 이용한다. left 속성은 반드시 'position' 이라는 속성에 'fixed, absolute, relative' 등이 있어야 쓸수 있는 속성값이다. 이 부분은 따로 css 메뉴에 자세히 포스팅 하도록 하겠다.

(Q 그럼? 보여지는 부분이 움직이는건가요? 안쪽에 들어가있는 이미지가 움직여야 하나요? : A 보여지는 영역은 움직이면 안된다. 그리고 이미지가 움직이는게 아니라 이미지를 감싸는 영역이 움직인다고 보면 된다.)

이미지를 감싸는 영역이 무슨 부분인지 헷갈릴 수 있다.

클래스명 view 를 가진 요소는 그 모든 전체를 감싸는 요소이고, 클래스명 img_wrap 를 가진 요소는 img요소만을 담고 있는 요소이다.

position 속성 에서 absolute값을 누구한테 주게되냐?

그건 바로 움직여야 하는 'img_wrap' 요소가 되겠다.

그리고 그 속성을 쓰게 되니까 css 속성중 left 값을 쓸수 있게 된다.

(Q 근데 왜 보여지는 부분에 position 값을 주려고 하나요? : A 보여지는 부분에 포지션 값을 주는 이유는 absolute 로 값을 준 요소는 어미 요소에 어떠한 position 값을 줘야 한다. 어미 요소에 position 값을 안주게 되면 어미요소의 위치와는 무관하게 브라우저의 x축, y축을 따르기 때문이다. 즉. 어미요소에 position 값을 주게되므로 어미의 기준으로 이런 좌표값을 가지겠다. 라는 의미가 된다.) 

이러한 이유로 클래스명 view 에 포지션값인 'relative' 를 주어서 기준을 만든다음.

넘어가는 영역을 안보이게 처리한다

@charset "utf-8";

/* 모든 요소 안쪽, 바깥쪽 여백을 제거 */
*{margin: 0;padding: 0;}

/* 보여져야 하는 영역 css */
.view{position: relative;width: 600px;overflow: hidden;}
 

.......;;

이거 한줄을 쓰기위해 저렇게 많은 설명이 필요하다.

CSS 이거 어렵다.. javascript 또는 jQuery 를 쓰기 위해선

CSS 의 정확한 사용이 필요하다. 보여지는게 다가 아니기 때문이다.

그다음은 이미지를 감싸는 영역과 그 영역 안에 있는 이미지에 대한 css 를 작성해 보도록 하자.

보여져야 하는 부분에 대해서 600px 로 정의 해 놨다. 그래서 이미지를 개당 600px로 맞출까 한다. 그래야 보여지는 부분에 대해서 이미지가 꽉 차게 보이니까 말이다.

너비 600px 값을 가지는 이미지가 총 5개가 있다.

이미지를 감싸는 영역은 그안에 있는 이미지의 갯수 곱하기 600을 해서 모든 이미지가 가로로 정렬 되었을때 그것을 수용할수 있는 너비값을 가지게 해야한다.

600 * 5 = 3000

그리고 모든 이미지를 가로로 정렬하기 위해서 우리는 css 속성중 float 이란 속성을 사용할 텐데. 이 속성을 쓰게 되면 다른 요소에 그 영향을 미치게 되어있다. 그 영향을 없애버리기 위해 편법을 써야하는데 이 부분은 나중에 다루도록 하겠다.

@charset "utf-8";

/* 모든 요소 안쪽, 바깥쪽 여백을 제거 */
*{margin: 0;padding: 0;}

/* 보여져야 하는 영역 css */
.view{position: relative;width: 600px;overflow: hidden;}

/* 이미지를 감싸는 영역과 img 요소 css */
.img_wrap{position: relative;width: 3000px;}
.img_wrap img{float: left;width: 600px;height: 400px;}

내용에 대한 css 를 작성해 보도록 하자.

박스의 위치가 불안정 하게 잡혀 있으니 포지션, top, left 를 적당히 맞춰서 위치를 잡아준다.

그리고 글씨들은 모두 한 곳에 겹쳐 있어야 한다.

이유는 겹쳐있지 않으면 글씨들을 담고있는 영역은 모두 display 가 block 속성값을 가지고 있어서 아래로 떨어져 보이기 때문이다.

같은 위치에서 글자가 바뀌는 효과를 보려면 당연히 모든 글자가 같은 위치에 있어야 하고 그렇기 때문에 겹쳐보일 수 밖에 없는 것이다.

@charset "utf-8";

/* 모든 요소 안쪽, 바깥쪽 여백을 제거 */
*{margin: 0;padding: 0;}

/* 보여져야 하는 영역 css */
.view{position: relative;width: 600px;overflow: hidden;}

/* 이미지를 감싸는 영역과 img 요소 css */
.img_wrap{position: relative;width: 3000px;}
.img_wrap img{float: left;width: 600px;height: 400px;}

/* 내용을 담고있는 영역과, 내용이 서로 겹쳐 보여야 하는 css */
.text_wrap{position:absolute; top:200px; left:50px;}
.slider_text{position:absolute; width:250px; height:150px;color:#fff;}

자 이제 콘트롤 버튼을 담는 부분에 대한 css 를 작성해 보자.

콘트롤 버튼을 담는 부분에 위치를 잡아주기 위해 position 속성을 사용하도록 하겠다.

position 속성을 주었으니 위치를 잡을 수 있는 속성인 top 과 left 를 쓸 수있는데

콘트롤 바는 view 요소의 영역 안에서 하단 부분에 위치되어야 하니깐 적당히 값이 주도록 하자.

그리고 버튼 이미지를 보면 O 모양의 그림이 3개가 나란히 있는걸 볼 수 있는데.

그중에 한가지만 보여져야 하므로 한가지에 대한 크기값인 13px 을 높이값으로 지정해주고 나머지 넘어가는 부분에 대한 처리는 안보이게 하도록 하자.

@charset "utf-8";

/* 모든 요소 안쪽, 바깥쪽 여백을 제거 */
*{margin: 0;padding: 0;}

/* 보여져야 하는 영역 css */
.view{position: relative;width: 600px;overflow: hidden;}

/* 이미지를 감싸는 영역과 img 요소 css */
.img_wrap{position: relative;width: 3000px;}
.img_wrap img{float: left;width: 600px;height: 400px;}

/* 내용을 담고있는 영역과, 내용이 서로 겹쳐 보여야 하는 css */
.text_wrap{position:absolute; top:200px; left:50px;}
.slider_text{position:absolute; width:250px; height:150px;color:#fff;}

/* 컨트롤 버튼을 담고있는 영역 css */
.control_wrap{
    position:absolute;
    top:380px;
    left:270px;
    height: 13px;
    overflow: hidden;
}

그러면 버튼을 담는 영역에 대한 css 를 했으니 진짜 버튼이 될 요소에 대한 css 를 작성해 보자.

각 버튼에 대해서 각각 그림을 넣어줘야한다.

그림에 정해진 크기값이 있지만 그대로 쓰기엔 약간 큰 감이 없잖아 있다. 처음부터 그림을 제대로 맞췄다면 크게 신경 쓸 부분은 아니지만...

아무튼 요소에 크기값이 지정되어 있지 않으면 배경이미지를 넣었다고 해도 보이질 않는다.

이미지의 크기에 맞춰서 요소의 크기를 지정하든지, 이 예제에선 임의의 크기를 정해서 넣어보도록 하겠다. 그리고 각 버튼은 좌측으로 정렬되어 있다. float 속성을 이용하여 좌측 정렬을 하도록 하자.

그리고 중요한... 포지션 값...

정말 엄청나게 많이 쓰인다.

이 포지션 값은 컨트롤 바에 마우스를 올렸을 경우 버튼요소에 대한 위치값을 css 로 제어하려 하기 때문이다. 위치값을 쓰려면 당연히 position 속성이 필수이다.

이 경우엔 relative 를 쓰게되는데 absolute 를 쓰게되면 모든 버튼이 한 곳으로 겹친다.

relative 를 주어서 상대적인 위치값을 주는게 중요하다.

@charset "utf-8";

/* 모든 요소 안쪽, 바깥쪽 여백을 제거 */
*{margin: 0;padding: 0;}

/* 보여져야 하는 영역 css */
.view{position: relative;width: 600px;overflow: hidden;}

/* 이미지를 감싸는 영역과 img 요소 css */
.img_wrap{position: relative;width: 3000px;}
.img_wrap img{float: left;width: 600px;height: 400px;}

/* 내용을 담고있는 영역과, 내용이 서로 겹쳐 보여야 하는 css */
.text_wrap{position:absolute; top:200px; left:50px;}
.slider_text{position:absolute; width:250px; height:150px;color:#fff;}

/* 컨트롤 버튼을 담고있는 영역 css */
.control_wrap{
    position:absolute;
    top:380px;
    left:270px;
    height: 13px;
    overflow: hidden;
}

/* 컨트롤 버튼 css */
.control_btn{
    position:relative;
    width:13px;
    height:46px;
    float:left;
    cursor: pointer;
    background-image: url('../img/point_button.png');
}

이제 css 는 거의 다 왔다!

버튼에 마우스를 오버하게 될 경우와,

선택자:hover{속성:속성값;} = 해당되는 요소에 마우스가 올라가 있을경우 속성과 속성값을 넣어준 대로 바꿀 수 있다.

예를들어 현재 보고있는 이미지가 1번일 경우 1번 버튼에 불이 들어와 있어야 직관적으로 알 수 있기 때문에 임의의 클래스 명 .active 를 넣어주었다.

즉!

클래스 이름이 control_btn 인 요소가 클래스명 active 를 추가로 가지고있을 경우엔

위치값을 위로 더 이동시킨다는 것이다.

@charset "utf-8";

/* 모든 요소 안쪽, 바깥쪽 여백을 제거 */
*{margin: 0;padding: 0;}

/* 보여져야 하는 영역 css */
.view{position: relative;width: 600px;overflow: hidden;}

/* 이미지를 감싸는 영역과 img 요소 css */
.img_wrap{position: relative;width: 3000px;}
.img_wrap img{float: left;width: 600px;height: 400px;}

/* 내용을 담고있는 영역과, 내용이 서로 겹쳐 보여야 하는 css */
.text_wrap{position:absolute; top:200px; left:50px;}
.slider_text{position:absolute; width:250px; height:150px;color:#fff;}

/* 컨트롤 버튼을 담고있는 영역 css */
.control_wrap{
    position:absolute;
    top:380px;
    left:270px;
    height: 13px;
    overflow: hidden;
}

/* 컨트롤 버튼 css */
.control_btn{
    position:relative;
    width:13px;
    height:46px;
    float:left;
    cursor: pointer;
    background-image: url('../img/point_button.png');
}

/*
    컨트롤 버튼 에 마우스를 올렸을 경우와,
    예를들어 지금 보고있는 이미지가 1번 이미지일 경우!
    첫번째 버튼에 불이 들어와 있다는걸 표시하기 위한 클래스
*/
.control_btn:hover{top:-16px;}
.control_btn.active{top:-31px;}

여기까지가.

css 의 끝이다.

한번 브라우저에서 확인해 보도록 하자.

이렇게 나왔다면 이제 스크립트만 입혀주면 된다.

하지만...

어떤식으로 이러한 그림이 돌아가는지

단지 이렇게만 보면 헷갈리기도 하고 어려워 보일 수 있다.

전체를 감싸는 부분에 대한 css 에서 우리가

overflow : hidden; 을 준걸 기억할지 모르겠다.

이 부분을 주석처리해주자.

/* 보여져야 하는 영역 css */
.view{position: relative;width: 600px;/* overflow: hidden; */}

이렇게 하는 이유는 브라우저를 다시 한번 켜서 확인해 보면

이미지가 가로로 쭉 정렬되어 보일 것이다.

이미지가 어떻게 이동이 되는지

눈으로 봐야 이해하기가 좀더 쉽다!

마지막 동작 입히기만 남았다!

현재까지의 진행상황

컨트롤바슬라이더(css작성).zip