부트스트랩으로 초보자도 쉽게 반응형 홈페이지 만드는 방법

부트스트랩으로 초보자도 쉽게 반응형 홈페이지 만드는 방법

최고관리자 0 2,003 03.25 21:17

부트스트랩은 반응형 웹 디자인을 쉽게 구현할 수 있도록 도와주는 프레임워크입니다. HTML, CSS, JS 기반으로 작동하며, 그 사용법은 간단함에도 불구하고 매우 강력합니다. 이 가이드에서는 부트스트랩의 설치 방법부터 반응형 레이아웃을 구성하는 방법까지 초보자도 쉽게 따라 할 수 있도록 설명합니다.


부트스트랩 설치 

부트스트랩을 설치하는 첫 걸음은 공식 웹사이트에서 필요한 파일을 다운로드하거나, CDN(Content Delivery Network)을 이용하는 것입니다.


1.웹사이트를 통한 다운로드:

  • 부트스트랩 공식 웹사이트(https://getbootstrap.com/)에 방문합니다.
  • "Download" 섹션에서 최신 버전의 부트스트랩을 선택하여 다운로드합니다.
  • 다운로드한 파일을 웹 프로젝트 폴더 내에 압축 해제합니다.
2.CDN을 통한 사용:
  • 공식 웹사이트의 "Introduction" 페이지에서 CDN 링크를 복사합니다.
  • HTML 문서의 태그 안에 CSS 파일을 위한 링크를, 태그가 끝나는 부분에 JS 파일을 위한 링크를 붙여넣습니다.

기본 레이아웃 구성

부트스트랩을 사용하여 기본적인 반응형 레이아웃을 만드는 방법은 다음과 같습니다. 


1.컨테이너 설정:

  • 모든 레이아웃은 .container 또는 .container-fluid 클래스를 사용한 컨테이너 안에 구성해야 합니다.
  • container는 가변 너비를 가지며 반응형으로 크기가 조절됩니다.
  • container-fluid는 항상 전체 너비를 차지합니다.
2.그리드 시스템 활용:
  • 부트스트랩의 그리드 시스템은 .row와 .col-* 클래스를 사용하여 화면을 여러 열로 나눕니다.
  • 열은 12개의 가상의 열로 구성되며, 이를 통해 다양한 레이아웃을 쉽게 만들 수 있습니다.
3.반응형 디자인:
  • .col-xs-*, .col-sm-*, .col-md-*, .col-lg-* 클래스를 사용하여 다양한 화면 크기에 맞게 열의 너비를 조절할 수 있습니다.
  • 각 클래스는 특정 화면 크기에 대응됩니다. 예를 들어, .col-sm-*은 소형 장치에서 사용됩니다.
4.컴포넌트 활용:
  • 부트스트랩은 네비게이션 바, 버튼, 카드 등 다양한 컴포넌트를 제공합니다.
  • 이 컴포넌트들을 사용하여 디자인을 더욱 풍부하게 할 수 있습니다.

실습 예제

<!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

티로그몰 그누보드 테마 구입 절차

저렴한 비용으로 직접 홈페이지를 만들고자 하시는 분께 적합니다.

구매 전 체크사항

설치방법

본인의 웹호스팅 계정을 이용하여 사용합니다.

A/S 정책

홈페이지 오류 및 버그 발견시 1:1문의를 남겨주시면 확인 후 바로 무상 처리해드립니다.

환불정책

다운받는 홈페이지라는 특성상 단순변심으로 인한 환불은 불가합니다.

라이센스 규정

사진 및 컨텐츠는 사용자의 이해를 돕기위해 사용된것이며 실사용은 가능하나 재배포를 금지합니다.

1도메인당 1카피를 원칙으로 하고있습니다.

설치대행 및 호스팅(계정)이전 규정

티로그 호스팅 이용시 공급원가(800,000 원)로 구매를 하실수도 있습니다.

설치대행의 경우 기본 셋팅비 10,000원 이며 디자인 변경 요청시 추가금액이 발생될 수 있습니다.

티로그웹호스팅 만료시 사용하신 홈페이지 ,도메인은(는) 영구 삭제 되며, 타사 호스팅 이용시 공급원가(800,000 원) - 제공가격(400,000 원) 의 나머지 금액을 지불 하여야합니다.

 
홈페이지 오류 수정요청시 홈페이지 디자인 변경 요청시
무료수정 별도협의
  • 기존 5.4버전을 쓰시는 분들께서는 계정 내 데이터를 모두 지우고 반드시 그누보드 5.6버전에서 새로 설치하셔야 합니다. (5.3에서 설치금지, 5.5~5.6기반 테마)
  • theme폴더에 다운받은 압축파일 내 테마를 넣어주세요 (폴더안에 폴더가 있으니 주의해주세요)
  • 기본적으로 컨텐츠 제작에 관한건 티로그가 관여하지 않습니다. (요청시 비용 별도협의)
  • 무통장 입금시 세금계산서 발행은 부가세10% 별로로 고객님측에서 부담하셔야 합니다.
[개인정처리방침]