비디오: [CSS 기초와 활용] 구글 클론 사이트 만들기 (feat. 개발자도구, Bootstrap, codepen 등) 2024
jQuery UI 코드 작성은 어렵지 않지만 라이브러리의 올바른 부분을 얻는 것이 HTML5 및 CSS3 프로그래머에게는 다소 혼란 스러울 수 있습니다. jQuery UI 라이브러리는 표준 jQuery 패키지보다 훨씬 크기 때문에, 필요없는 경우 전체를 포함하지 않을 수도 있습니다.
이전 버전의 jQuery UI를 사용하면 전체 패키지를 다운로드 할 수 있었지만 다양한 요소 각각을 별도의 JavaScript 파일에 저장했습니다. 일반적으로 여러 요소를 적절히 활용하기 위해 6 개의 다른 스크립트 태그를 활성화하는 것이 일반적이었습니다.
->더 나쁜 것은 의존성 문제가 있기 때문에 다른 패키지를 사용하기 전에 특정 패키지를 설치해야합니다. 이로 인해 실제로 사용하기에는 단순한 라이브러리가 상당히 복잡해졌습니다.
다행스럽게도 최신 버전의 jQuery UI를 사용하면이 프로세스가 훨씬 간단 해집니다.
-
테마를 선택하거나 만듭니다.
themeRoller 사이트를 사용하여 템플릿 라이브러리에서 시작 위치를 선택하십시오. 테마를 정확하게 사용자 정의하여 원하는대로 만들 수 있습니다 (색상, 글꼴 및 기타 요소 변경).
-
테마를 다운로드하십시오.
themeRoller에는 다운로드 버튼이 있습니다. 테마를 다운로드 할 준비가되면 이것을 클릭하십시오.
-
원하는 요소를 선택하십시오.
프로젝트를 처음 시작하면 모든 요소를 선택하게 될 것입니다. 페이지가 너무 느리게로드되는 경우, 필요한 요소 만 포함하는 더 작은 버전을 작성할 수 있습니다. 지금은 모든 것을 선택하십시오.
-
파일을 다운로드하십시오.
원하는 요소를 선택한 후에는 zip 파일로 다운로드 할 수 있습니다.
-
zip 파일의 내용을 작업 디렉토리에 설치하십시오.
zip 파일에는 여러 파일과 디렉토리가 있습니다. css 및 js 디렉토리를 웹 페이지가있는 디렉토리 (종종 public_html 또는 htdocs 디렉토리)에 복사합니다. 개발 번들 디렉토리 또는 색인을 복사 할 필요가 없습니다. HTML 페이지.
-
여러 테마를 설치하는 경우 추가 테마에서 테마 정보 만 복사하십시오.
모든 테마는 동일한 자바 스크립트를 사용합니다. CSS (및 관련 이미지 파일) 만 변경됩니다. 프로젝트에서 여러 테마를 사용하려면 CSS 컨텐츠를 복사하십시오. 각 테마는 기본 CSS 디렉토리의 다른 하위 디렉토리가됩니다.
-
CSS 파일에 링크.
표준 링크 기술을 사용하여 jQuery UI로 만든 CSS 파일에 링크합니다. 또한 사용자 정의 CSS 외에 자체 CSS 파일에 링크하거나 내부 CSS를 사용할 수도 있습니다. 당신이 올바른 길을 가졌는지 확인하십시오.
-
JavaScript 파일 링크.
jQuery UI 툴킷은 표준 jQuery 라이브러리와 jQuery UI 라이브러리의 두 가지 JavaScript 파일도 설치합니다. 기본적으로이 두 파일은 모두 js 디렉토리에 설치됩니다. 두 파일 모두에 링크해야합니다. 때로는 일반 버전과 함께 최소화 된 파일이 표시됩니다. 최소화 된 버전에는 min이라는 용어가 임베드됩니다. 어느 버전이 좋지만 최소화 된 버전이 더 빨리로드됩니다.
제대로 작동하지 않는 경우 파일 경로를 다시 확인하십시오. 거의 모든 경우에 올바른 파일에 연결하지 않았기 때문에 문제가 발생합니다. 또한 jQuery UI로 만든 CSS 파일에는 이미지도 포함됩니다. 테마에 관련 이미지 디렉토리가 있는지 확인하십시오. 그렇지 않으면 프로젝트가 제대로 작동하지 않을 수 있습니다. 다운로드에서 전체 CSS 및 JS 디렉토리를 복사 한 경우 정상이어야합니다.
