JQuery 및 Bootstrap을 사용하여 모바일 친화적인 앱을 작성하는 방법
이 시리즈의 1부에서는 Netbeans를 IDE로 사용하여 기본 HTML 5 프로젝트를 설정하고 이 새로운 언어 사양에 추가된 몇 가지 요소도 제시했습니다.
[ 당신은 또한 좋아할 수도 있습니다: Linux의 C/C++ 프로그래밍 또는 소스 코드 편집기를 위한 27가지 최고의 IDE ]
간단히 말해서 jQuery를 HTML 페이지에서 클라이언트 측 스크립팅을 크게 단순화할 수 있는 크로스 브라우저 및 크로스 플랫폼 Javascript 라이브러리로 생각할 수 있습니다. 반면에 Bootstrap은 HTML, CSS 및 Javascript 도구를 통합하여 모바일 친화적이고 반응이 빠른 웹 페이지를 만드는 완전한 프레임워크로 설명할 수 있습니다.
이 기사에서는 HTML 5 코드를 더 쉽게 작성할 수 있는 두 가지 귀중한 유틸리티인 jQuery와 Bootstrap을 소개합니다. jQuery와 Bootstrap은 모두 GPL과 호환되는 MIT 및 Apache 2.0 라이선스에 따라 라이선스가 부여되어 무료 소프트웨어입니다.
기본 HTML, CSS 및 Javascript 개념은 이 시리즈의 어떤 기사에서도 다루지 않습니다. "계속 진행하기 전에 먼저 이러한 주제를 숙지해야 한다고 생각한다면 W3Schools의 HTML 5 자습서를 적극 권장합니다.
프로젝트에 jQuery와 부트스트랩 통합하기
jQuery를 다운로드하려면 프로젝트 웹 사이트 http://jquery.com으로 이동하여 최신 안정 버전에 대한 알림을 표시하는 버튼을 클릭하십시오.
이 가이드에서는 이 두 번째 옵션을 사용할 것입니다. 아직 다운로드 링크를 클릭하지 마십시오. 압축된 .min.js 또는 압축되지 않은 .js 버전의 jQuery를 다운로드할 수 있습니다.
첫 번째는 특별히 웹사이트를 위한 것이며 페이지의 로드 시간을 줄이는 데 도움이 됩니다(따라서 Google은 귀하의 사이트 순위를 높일 것입니다). 반면 두 번째는 주로 개발 목적의 코더를 대상으로 합니다.
간결함과 사용 편의성을 위해 압축(축소라고도 함) 버전을 사이트 구조 내의 스크립트 폴더에 다운로드합니다.
$ cd /home/ubuntu/NetBeansProjects/TecmintTest/public_html/scripts/ $ wget https://code.jquery.com/jquery-3.6.0.min.js
이제 프로젝트에 Bootstrap을 추가할 차례입니다. http://getbootstrap.com으로 이동하여 부트스트랩 다운로드를 클릭합니다. 다음 페이지에서 아래 표시된 대로 강조 표시된 옵션을 클릭하여 압축된 구성 요소를 zip 파일로 다운로드하여 바로 사용할 수 있습니다.
다운로드가 완료되면 다운로드 폴더로 이동하여 파일의 압축을 풀고 강조 표시된 파일을 프로젝트 내의 지정된 디렉토리에 복사합니다.
# cd ~/Downloads # unzip -a bootstrap-5.1.3-dist.zip # cd bootstrap-5.1.3-dist/
이제 CSS 및 JS 파일을 프로젝트 구조의 각 폴더에 복사합니다.
# cp css/bootstrap.min.css /home/ubuntu/NetBeansProjects/TecmintTest/public_html/styles # cp js/bootstrap.min.js /home/ubuntu/NetBeansProjects/TecmintTest/public_html/scripts
이제 Netbeans에서 사이트 구조를 확장하면 다음과 같이 표시되어야 합니다.
참조 추가
확실히 좋아 보이지만 index.html 파일에 이러한 파일을 사용하도록 지시하지 않았습니다. 간단하게 하기 위해 먼저 해당 파일의 내용을 기본 html 파일로 바꿉니다.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery and Bootstrap</title> </head> <body> <!-- // Your code will appear here. --> </body> </html>
그런 다음 다음 스크린캐스트에서 볼 수 있듯이 프로젝트 탐색기 섹션의 각 파일을 태그 내부의 코드로 끌어다 놓기만 하면 됩니다. 후자는 전자에 의존하기 때문에 jQuery에 대한 참조가 Bootstrap에 대한 참조 앞에 나타나는지 확인하십시오.
그게 다야 - jQuery와 Bootstrap에 대한 참조를 모두 추가했으며 이제 코드 작성을 시작할 수 있습니다.
첫 번째 반응형 코드 작성
이제 탐색 모음을 추가하고 페이지 상단에 배치해 보겠습니다. 더미 텍스트가 있는 4-5개의 링크를 자유롭게 포함하고 당분간 어떤 문서에도 링크하지 마십시오. 다음 코드 스니펫을 문서 본문에 삽입하기만 하면 됩니다.
시간을 할애하여 Netbeans의 자동 완성 기능에 익숙해지는 것을 잊지 마십시오. 이 기능은 입력을 시작할 때 Bootstrap에서 사용할 수 있는 클래스를 보여줍니다.
아래 코드 조각의 핵심은 보고 있는 화면의 크기에 따라 자동으로 크기가 조정되는 수평 컨테이너 내부에 콘텐츠를 배치하는 데 사용되는 Bootstrap 컨테이너 클래스입니다. 그 못지 않게 중요한 것은 container-fluid 클래스로, 내부 콘텐츠가 화면의 전체 너비를 차지하도록 합니다.
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
</div>
Bootstrap의 또 다른 특징은 HTML 코드에서 테이블이 필요 없다는 것입니다. 대신 그리드 시스템을 사용하여 콘텐츠를 레이아웃하고 크고 작은 장치(휴대폰에서 큰 데스크탑 또는 랩톱 화면까지) 모두에서 적절하게 보입니다.
Bootstrap의 그리드 시스템에서 화면 레이아웃은 12개의 열로 나뉩니다.
일반적인 설정은 다음과 같이 각각 4개 열의 3개 그룹으로 나누어진 12개 열 레이아웃을 사용하는 것으로 구성됩니다.
코드에서 이 사실을 표시하고 중간 크기 장치(예: 랩톱) 이상에서 시작하여 표시되도록 하려면 닫는 태그 아래에 다음 코드를 추가합니다.
...
</nav>
<div class="row">
<div class="col-md-4">This is the text in GROUP 1</div>
<div class="col-md-4">This is the text in GROUP 2</div>
<div class="col-md-4">This is the text in GROUP 3</div>
</div>
</div> <!--Closing tag of the container class -->
부트스트랩 그리드의 열 클래스는 특정 장치 크기 이상에 대한 시작 레이아웃을 나타냅니다. 이 예에서 md는 중형(lg 또는 대형 장치도 포함)을 나타냅니다.
더 작은 장치(sm 및 xs)의 경우 콘텐츠 div가 스택되어 다음 위에 하나씩 나타납니다.
다음 스크린캐스트에서 지금까지 페이지가 어떻게 보일지 확인할 수 있습니다. 1부에서 배운 것처럼 프로젝트 실행 버튼을 사용하여 프로젝트를 시작한 후 브라우저 창의 크기를 조정하여 다양한 화면 크기를 시뮬레이션할 수 있습니다.
요약
축하합니다! 지금쯤이면 간단하면서도 기능적인 반응형 페이지를 작성했을 것입니다. 이 프레임워크의 거의 무한한 기능에 더 익숙해지기 위해 Bootstrap 웹사이트를 확인하는 것을 잊지 마십시오.
항상 그렇듯이 질문이나 의견이 있는 경우 아래 양식을 사용하여 언제든지 문의해 주십시오.