[제이쿼리(jQuery) UI] 컨트롤바슬라이더 2. CSS part1. 셋팅

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

728x90

css 를 하기전에 디렉토리를 정리해 두고 시작하자.

서브라임텍스트에 위와같게 디렉토리를 만들어주고 파일들을 위치를 조금씩 변경해 주었다.

지금 구성이 이런식이다.

css 를 css 폴더 안에 만들어 보도록 하자.

서브라임텍스트의 좌측에서 css 폴더에 우클릭후 New File.. 를 선택하면 해당 폴더의 하위경로로 css 파일이 생성된다.

확장자가 css 파일이기 때문에 파일을 저장할때 '파일이름.css' 로 저장하길 바란다.

그러면 스샷에서처럼 저러한 경로로 css 가 만들어질 것이다.

이제 css 파일을 만들었으니

html 에서 css 를 찾아 로드를 해야한다.

css 로드는 html 의 <head> 와 </head> 사이에 들어간다

link 를 입력후 Tab 버튼을 눌러주자

1
2
3
4
5
6
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    link
cs

그러면 이와같이 자동완성이 되어있다.

1
2
3
4
5
6
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="">
cs

href에 경로를 적어주게 되는데

css 폴더 안에 slider.css 가 있으므로 아래와 같이 입력해 준다.

1
<link rel="stylesheet" href="css/slider.css">
cs

반드시 이렇게 입력을 마친뒤엔 저장을 꼭 하도록 하자.

이제 아까 만들었던 css 파일을 서브라임으로 열어보자.

아무것도 없는 빈 화면인데. 혹시 html 내용중 한글이 포함되어 있을 수 있으니 언어 설정을 먼저 하도록 하겠다.

1
@charset "utf-8";
cs

맨 처음이 이렇게 적는 이유는 다국적 언어 코드(utf-8)가 셋팅이 안되어 있을시엔 한글이 깨져 보이는 현상이 일어날 수 있기 때문이다.

무언가 하나를 입력하였으면 반드시 저장하는 버릇을 기르도록 하자!

css 의 입력은 part2. 편에서 다루도록 하겠다.

현재까지의 결과물

[제이쿼리(jQuery) UI] 컨트롤바슬라이더 3. JS 작성 (14)	2015.05.04
[제이쿼리(jQuery) UI] 컨트롤바슬라이더 2. CSS part2. CSS작성 (0)	2015.05.03
[제이쿼리(jQuery) UI] 컨트롤바슬라이더 1. 마크업 (0)	2015.05.03

회복맨 블로그