부트스트랩으로 초보자도 쉽게 반응형 홈페이지 만드는 방법
부트스트랩은 반응형 웹 디자인을 쉽게 구현할 수 있도록 도와주는 프레임워크입니다. HTML, CSS, JS 기반으로 작동하며, 그 사용법은 간단함에도 불구하고 매우 강력합니다. 이 가이드에서는 부트스트랩의 설치 방법부터 반응형 레이아웃을 구성하는 방법까지 초보자도 쉽게 따라 할 수 있도록 설명합니다.
부트스트랩 설치
부트스트랩을 설치하는 첫 걸음은 공식 웹사이트에서 필요한 파일을 다운로드하거나, CDN(Content Delivery Network)을 이용하는 것입니다.
1.웹사이트를 통한 다운로드:
- 부트스트랩 공식 웹사이트(https://getbootstrap.com/)에 방문합니다.
- "Download" 섹션에서 최신 버전의 부트스트랩을 선택하여 다운로드합니다.
- 다운로드한 파일을 웹 프로젝트 폴더 내에 압축 해제합니다.
- 공식 웹사이트의 "Introduction" 페이지에서 CDN 링크를 복사합니다.
- HTML 문서의 태그 안에 CSS 파일을 위한 링크를, 태그가 끝나는 부분에 JS 파일을 위한 링크를 붙여넣습니다.
기본 레이아웃 구성
부트스트랩을 사용하여 기본적인 반응형 레이아웃을 만드는 방법은 다음과 같습니다.
1.컨테이너 설정:
- 모든 레이아웃은 .container 또는 .container-fluid 클래스를 사용한 컨테이너 안에 구성해야 합니다.
- container는 가변 너비를 가지며 반응형으로 크기가 조절됩니다.
- container-fluid는 항상 전체 너비를 차지합니다.
- 부트스트랩의 그리드 시스템은 .row와 .col-* 클래스를 사용하여 화면을 여러 열로 나눕니다.
- 열은 12개의 가상의 열로 구성되며, 이를 통해 다양한 레이아웃을 쉽게 만들 수 있습니다.
- .col-xs-*, .col-sm-*, .col-md-*, .col-lg-* 클래스를 사용하여 다양한 화면 크기에 맞게 열의 너비를 조절할 수 있습니다.
- 각 클래스는 특정 화면 크기에 대응됩니다. 예를 들어, .col-sm-*은 소형 장치에서 사용됩니다.
- 부트스트랩은 네비게이션 바, 버튼, 카드 등 다양한 컴포넌트를 제공합니다.
- 이 컴포넌트들을 사용하여 디자인을 더욱 풍부하게 할 수 있습니다.
실습 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>부트스트랩 반응형 웹사이트 예제</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8">메인 콘텐츠</div>
<div class="col-md-4">사이드바</div>
</div>
</div>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
이 예제는 부트스트랩을 사용하여 기본적인 반응형 레이아웃을 구성하는 방법을 보여줍니다. 여기서는 CDN을 통해 부트스트랩을 연결하고, 컨테이너 내에 메인 콘텐츠와 사이드바로 구성된 간단한 레이아웃을 만들었습니다. 이를 통해 초보자도 쉽게 반응형 웹사이트를 만들 수 있음을 알 수 있습니다. 이 컴포넌트들을 사용하여 디자인을 더욱 풍부하게 할 수 있습니다.
Comments
그누보드 테마 구입 절차
-
STEP 01
- 회원가입
- 홈페이지 내 회원가입을 해주세요
-
STEP 02
- 홈페이지 테마 선택
- 선택형 홈페이지 보기 메뉴에서 원하는 테마를 선택합니다.
-
STEP 03
- 문의 및 결재
- 테마의 관한 궁금증이 있으면 상담 후 선택한 테마를 결재합니다.
-
STEP 04
- 테마 다운로드
- 선택하신 홈페이지를 다운로드 받습니다.
-
STEP 05
- 테마설치
- 본인 계정에 다운받은 테마를 설치합니다.(대행비 100,000원)
-
STEP 06
- 사이트 오픈
- 최종 사이트가 오픈됩니다.
구매 전 체크사항
설치방법
본인의 웹호스팅 계정을 이용하여 사용합니다.
A/S 정책
홈페이지 오류 및 버그 발견시 1:1문의를 남겨주시면 확인 후 바로 무상 처리해드립니다.
환불정책
다운받는 홈페이지라는 특성상 단순변심으로 인한 환불은 불가합니다.
라이센스 규정
사진 및 컨텐츠는 사용자의 이해를 돕기위해 사용된것이며 실사용은 가능하나 재배포를 금지합니다.
1도메인당 1카피를 원칙으로 하고있습니다.
설치대행 및 호스팅(계정)이전 규정
티로그 호스팅 이용시 공급원가(800,000 원)로 구매를 하실수도 있습니다.
설치대행의 경우 기본 셋팅비 10,000원 이며 디자인 변경 요청시 추가금액이 발생될 수 있습니다.
티로그웹호스팅 만료시 사용하신 홈페이지 ,도메인은(는) 영구 삭제 되며, 타사 호스팅 이용시 공급원가(800,000 원) - 제공가격(400,000 원) 의 나머지 금액을 지불 하여야합니다.
| 홈페이지 오류 수정요청시 | 홈페이지 디자인 변경 요청시 |
|---|---|
| 무료수정 | 별도협의 |
- 기존 5.3버전을 쓰시는 분들께서는 계정 내 데이터를 모두 지우고 반드시 그누보드 5.5버전에서 새로 설치하셔야 합니다. (5.3에서 설치금지, 5.4~5.5기반 테마)
- theme폴더에 다운받은 압축파일 내 테마를 넣어주세요 (폴더안에 폴더가 있으니 주의해주세요)
- 기본적으로 컨텐츠 제작에 관한건 티로그가 관여하지 않습니다. (요청시 비용 별도협의)
- 무통장 입금시 세금계산서 발행은 부가세10% 별로로 고객님측에서 부담하셔야 합니다.