마크업 부터 시작하는 UI/컨트롤바 슬라이더2015. 5. 4. 05:07

먼저 css 파일을 html 에서 연결시킬때와 같이 js 파일을 담을 js 폴더를 만든다.그리고 그 js폴더 안에 js 파일을 넣어준다. 스샷은 찍지 않겠지만 저 js 폴더엔 당연히 js파일이 들어가 있다.디렉토리 구성은 스샷에 보이는 이대로 하도록 하자. 그리고 우리는 jQuery 를 쓸꺼기 때문에 jQuery 를 쓸수있는 환경을 html 문서에 제공해 주어야 한다.jQuery.com

마크업 부터 시작하는 UI/컨트롤바 슬라이더2015. 5. 3. 23:02

일단 css 를 작업하기에 압서 'reset-css' 를 만들어 쓰거나 혹은, 가져와서 쓰는걸 권장한다.일단 임시로 모든 요소의 안쪽, 바깥쪽 여백을 지우고 시작하겠다. 1*{margin: 0;padding: 0;}cs '*' 는 모든 요소를 선택하는것과 같다.개발자도구로 살펴보면html 이나 head, style 등등 에도 모두 이 값이 적용되어 있는걸 알 수 있다. 첫번째로 보여져야 하는 영역에 대한 부분에 대해서 css 작업을 하겠다.먼저 보여지는 부분에 대한 너비값을 결정하자.이 예제에선 너비값을 600px 만큼만 주도록 하겠다.보여지는 부분은 바로 이 이미지의 너비값 만큼만 주도록 하자.(Q 그럼 왜 높이값을 안주나요? : A 높이값은 이미지의 높이에 맞춰서 그걸 감싸는 영역이 자동적으로 그만큼..

마크업 부터 시작하는 UI/컨트롤바 슬라이더2015. 5. 3. 18:26

css 를 하기전에 디렉토리를 정리해 두고 시작하자. 서브라임텍스트에 위와같게 디렉토리를 만들어주고 파일들을 위치를 조금씩 변경해 주었다. 지금 구성이 이런식이다. css 를 css 폴더 안에 만들어 보도록 하자.서브라임텍스트의 좌측에서 css 폴더에 우클릭후 New File.. 를 선택하면 해당 폴더의 하위경로로 css 파일이 생성된다. 확장자가 css 파일이기 때문에 파일을 저장할때 '파일이름.css' 로 저장하길 바란다.그러면 스샷에서처럼 저러한 경로로 css 가 만들어질 것이다. 이제 css 파일을 만들었으니html 에서 css 를 찾아 로드를 해야한다.css 로드는 html 의 사이에 들어간다link 를 입력후 Tab 버튼을 눌러주자123456 Document linkcs 그러면 이와같이 자동완..

마크업 부터 시작하는 UI/컨트롤바 슬라이더2015. 5. 3. 17:56

오늘 만들어볼 슬라이더는 컨트롤바가 있는 슬라이더 이다,어떤식이 있는지 먼저 알아보자. 우리는 여기에 글자가 함께 전환되는 효과까지 해보려 한다.이미지가 슬라이드 되면 현재 있는 글자가 그 위치에서 사라지고 새 글자가 좌측에서 우측으로 이동하는 슬라이더 이다. 예제 자료 맨 먼저 우리는 마크업 부터 해보려 한다.1. 첫째 필요한건 저러한 내용을 담고 있는 '영역' 일것이다.2. 그리고 그 영역 안에 이미지들을 담고있는 영역3. 텍스트를 담을 영역4. 컨트롤 버튼을 담을 영역 12345678910111213141516 cs 이런식의 코딩이 되겠다.예제 이미지 압축을 풀면 총 이미지가 6장이 들어있을 것이다.슬라이드 되야하는 이미지의 갯수 5장과 컨트롤 버튼 이미지 1장이 있다. 그럼 이미지 영역에 이미지 ..