Bootstrap 3으로 여러 반응형 열을 만드는 방법
게시 됨: 2022-02-16
Bootstrap으로 웹사이트 응답성을 개선하고 싶으십니까? Bootstrap의 가장 중요한 측면은 12열 모바일 퍼스트 그리드 시스템입니다. 반응형 레이아웃을 만드는 데 사용하는 것입니다.
이 비디오 자습서에서는 Bootstrap을 사용하여 기본 웹 사이트를 만들고 Bootstrap 그리드 시스템을 사용하여 여러 열이 있는 반응형 레이아웃을 만드는 방법을 배웁니다.
튜토리얼을 보기 전에
아래 비디오 자습서를 따라 반응형 열을 만드는 방법을 배우기 전에 다음이 필요합니다.
- 부트스트랩이 무엇인지에 대한 기본 이해
- 부트스트랩 그리드 시스템에 대한 기본 이해
- 하드 드라이브에 부트스트랩 다운로드
- 빌드할 기본 부트스트랩 index.html 파일 만들기
부트스트랩이란
- 부트스트랩은 웹사이트 응답성을 연구하는 HTML, CSS 및 JavaScript 개발자를 위한 프레임워크입니다.
- 열, 목록, 탐색, 웹 양식 및 기타 많은 웹 요소에 대해 이미 사전 구축된 반응형 CSS 스타일로 구성됩니다.
부트스트랩 그리드 시스템 이해
- 부트스트랩 그리드 시스템은 화면 크기를 초소형, 소형, 중형 및 대형의 4가지 유형으로 분류합니다.
- 초소형은 휴대폰용입니다. Small은 I-Pad와 같은 태블릿용입니다. Medium은 데스크탑 모니터용입니다. Large는 더 큰 데스크탑 모니터를 위한 것입니다.
- 이러한 4가지 유형의 화면에 대한 응답성을 미세 조정할 수 있도록 부트스트랩은 웹 보기 장치의 너비를 12열 그리드 시스템으로 나눕니다.
- 이 네 가지 부트스트랩 그리드 유형 중 하나는 고유한 지정된 CSS 클래스를 할당하는 경우에만 반응합니다.
- 예를 들어, div가 초소형 장치에 응답하도록 하려면 div에 <div class="col-xs-6">과 같은 자체 Bootstrap .col-xs-<number_of_columns_to_take> 클래스가 있어야 합니다.
부트스트랩 다운로드
- getboostrap.com으로 이동하여 "부트스트랩 다운로드" 버튼을 클릭합니다.
- "시작하기" 페이지가 표시됩니다. "부트스트랩 다운로드" 버튼을 클릭합니다.
- 이 파일을 컴퓨터 하드 드라이브에 원하는 위치에 저장하십시오. 웹 서버에 저장할 필요는 없습니다.
- 이 파일의 압축을 풀고 압축을 푼 폴더의 이름을 "bootstrap"으로 바꿉니다.
기본 부트스트랩 index.html 페이지 준비하기
1 단계. 부트스트랩 index.html 파일 만들기
- "시작하기"(http://getbootstrap.com/getting-started/#download) 페이지로 돌아가서 오른쪽 사이드바에 있는 "기본 템플릿" 링크를 클릭하십시오.
- "기본 템플릿" 코드가 표시됩니다. "복사" 버튼을 클릭하여 코드를 복사합니다.
- 텍스트 편집기에 "기본 템플릿" 코드를 붙여넣고 "bootstrap" 폴더를 저장한 동일한 폴더에 index.html로 저장합니다. 이제 부트스트랩 사이트 첫 페이지가 됩니다.
- 새로 생성된 index.html을 열고 기본 부트스트랩 웹사이트를 살펴보세요.
- 텍스트 편집기에서 index.html 파일을 열고 여는 <body> 태그와 <h1> 태그 사이에 <div class="container">(1)를 추가합니다. 닫는 </h1> 태그(2) 뒤에 이 새 div를 닫고 파일을 저장합니다.
- 페이지 프론트 엔드를 확인하고 "Hello World!" 은(는) 더 이상 페이지 가장자리에 고정되지 않고 약간 오른쪽으로 이동하여 좀 더 깔끔하게 보입니다. 이 div에 할당한 부트스트랩의 "컨테이너" 클래스가 이 텍스트에 약간의 여백을 추가했습니다.
- index.html 파일로 돌아갑니다. <h1>과 </h1> 사이의 태그는 "Hello World!"를 대체합니다. "트러스트허브"로. 파일을 저장하고 사이트 프런트 엔드를 확인하십시오.
2 단계. 일부 콘텐츠 및 사이드바 추가
- index.html 파일로 돌아가서 <h1>Trustub</h1> 코드 아래에 다음 코드를 복사하여 붙여넣습니다.
<div class="row"> <div> <h2>What Trusthub can do for you</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</p> </div> <div> <h2>Our Team</h2> <p>Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus.</p> </div> </div>
- 사이트 프런트 엔드로 돌아갑니다. 새로 고칩니다. 이제 열 반응형 레이아웃이 없는 콘텐츠와 "우리 팀" 사이드바가 표시됩니다.
- getbootstrap.com 웹사이트로 돌아가서 상단 메뉴에서 "CSS" 버튼을 클릭합니다.
- 사이드바에서 "그리드 시스템" 버튼을 클릭합니다.
- 페이지를 아래로 스크롤하여 "그리드 옵션" 섹션(1)으로 이동하고 4가지 화면 크기 유형, 너비 및 지정된 CSS 클래스 접두사(2)가 있는 부트스트랩 12열 그리드 시스템을 확인합니다.
- 부트스트랩 그리드 시스템 옵션이 아직 이해가 되지 않더라도 걱정하지 마십시오. 귀하의 사이트에서 게임을 시작하면 순식간에 모든 것이 함께 제공됩니다.
- index.html 파일을 다시 한 번 열고 <div class="row"> 아래에 기존 <div> 클래스에 "col-md-9"를 입력합니다. 이제 새 div는 "div class="col-md-9">처럼 보일 것입니다.
- 이제 <h2> "Out Team" 헤더 바로 위에 있는 div로 이동하여 "col-md-3" 부트스트랩 그리드 CSS 클래스를 지정합니다. 파일 저장:
- 이 변경 사항이 실제로 적용되는지 보려면 사이트로 돌아가십시오. 키보드에서 F5 키를 눌러 웹사이트를 새로 고칩니다. 이제 콘텐츠 영역과 사이드바가 나란히 있는 것을 볼 수 있습니다.
- 콘텐츠 div는 이제 부트스트랩 그리드 12개 열(전체 데스크탑 화면 너비의 75%)에서 사용 가능한 9개를 차지합니다. 그리고 사이드바는 부트스트랩 그리드 12개 열 중 3개(전체 데스크탑 화면 너비의 25%)를 사용합니다.
훌륭한! 이제 아래의 비디오 자습서를 따를 준비가 모두 되었습니다. 시작하자.
축하합니다! 부트스트랩을 사용하여 여러 열이 있는 반응형 웹 페이지 레이아웃을 만드는 방법을 방금 배웠습니다. 부트스트랩에 대해 더 알고 싶으십니까? 그렇다면 OSTraining YouTube 채널을 방문하여 "Bootstrap Framework Tutorials"를 시청하십시오.