부트스트랩으로 반응형 웹사이트 구축을 위한 초보자 가이드 – 1부

2019년 6월 5일 최종 업데이트

이 기사는 부트스트랩 프레임워크의 기본 원칙을 사용하여 반응형 웹사이트를 빠르고 효과적으로 만드는 방법에 대해 웹 개발자를 교육하기 위한 것입니다. 이를 통해 제작 비용이 절감되고 기업은 개발자가 웹사이트와 페이지를 쉽게 관리하고 구축할 수 있도록 권한을 부여할 수 있습니다. 부트스트랩 프레임워크를 다운로드하는 과정과 웹 개발 노력에 이 프레임워크를 사용하는 것의 장점을 살펴보겠습니다.

부트스트랩이란?

Bootstrap 공식 웹사이트(getbootstrap.com)에 따르면 "Bootstrap은 웹에서 반응형 및 모바일 우선 프로젝트 개발을 위한 가장 인기 있는 HTML, CSS 및 JavaScript 프레임워크입니다." 간단히 말해서, 부트스트랩은 프론트엔드 웹 개발을 더 빠르게 하고 다양한 기술 수준의 개발자에게 어필하는 데 도움이 되는 매우 간단한 프레임워크입니다.

부트스트랩을 사용하는 이유

대형 디스플레이, 일반 디스플레이, 전화 및 태블릿을 포함한 다양한 매체를 위한 웹 사이트를 디자인할 수 있는 잠재력은 Bootstrap을 매우 매력적으로 만들고 웹 콘텐츠 제작을 위한 현명한 선택으로 만듭니다. 부트스트랩과 같은 프레임워크는 하드코딩이 필요 없는 다양한 기능과 반응성에 웹사이트를 최적화하기 위해 쉽게 변경할 수 있는 일반 기능을 제공합니다. 요컨대, WordPress 사이트와 달리 웹 사이트를 구축하고 사용자 정의할 수 있는 가장 간단한 방법 중 하나입니다.

시작하는 방법

부트스트랩을 시작하려면 부트스트랩 공식 웹사이트(http://getbootstrap.com/)를 방문해야 합니다. Bootstrap은 오픈 소스 프로젝트이며 GitHub에서 호스팅, 개발 및 유지 관리됩니다. 이를 통해 사용자는 소스 코드에 액세스할 수 있고 웹사이트 구축을 위한 도구로서 프레임워크의 전체 범위를 이해할 수 있습니다.

현재 버전의 부트스트랩(v3.3.6)을 다운로드하는 세 가지 방법이 있습니다. 부트스트랩의 호환 버전을 다운로드할 수 있고, 부트스트랩 소스 코드를 다운로드할 수 있으며, 부트스트랩 프레임워크를 Less에서 Sass로 이식할 수 있습니다. 이 경우 초보자라면 호환되는 부트스트랩 버전을 다운로드하는 것이 좋습니다. Rails, Compass 또는 Sass 전용 프로젝트에서 Bootstrap 프레임워크를 통합하려는 경우 다운로드를 Less에서 Sass로 이식해야 합니다.

부스트랩 파일을 다운로드한 후에는 압축 폴더의 압축을 풀어서 호환되는 부트스트랩 프레임워크의 구조를 확인해야 합니다. 파일 구조를 보려면 아래를 보십시오.

이제 이 파일을 작업 중인 웹 프로젝트의 파일 시스템에 드롭하고 부트스트랩으로 작업을 시작하여 원하는 프로젝트를 설계하고 구축할 수 있습니다. 이 게시물의 2부에서 자세히 다룰 Bootstrap의 기능에 대한 자세한 내용은 getboostrap.com 웹 사이트를 방문하여 프레임워크에서 액세스할 수 있는 구성 요소, CSS 기능 및 JavaScript 기능을 확인하십시오.

반응형 디자인

반응형 디자인은 Bootstrap 프레임워크의 특징 중 하나입니다. 부트스트랩으로 반응형으로 개발할 수 있는 기능을 통해 개발자는 모든 보기 플랫폼에서 적절하게 형식을 지정할 수 있는 단일 웹사이트를 개발할 수 있습니다. 종종 웹 사이트는 잘 디자인될 수 있고 사용자 경험은 하나의 특정 플랫폼이나 화면 크기에서만 최적입니다. 부트스트랩은 개발자가 더 작은 화면에서 읽을 때 웹 페이지의 특정 열을 특정 크기로 할당할 수 있도록 함으로써 이러한 문제를 해결하는 놀라운 일을 합니다. 반응형 웹 사이트를 만들 때 Bootstrap이 고려하는 네 가지 유형의 장치가 있습니다.

• 초소형 장치(스마트폰 <768px)
• 소형 장치(태블릿 >= 768px)
• 중형 기기(데스크톱 >= 992px)
• 대형 장치(데스크톱 >= 1200px)

개발자는 위의 클래스에 태그를 추가하여 특정 웹 콘텐츠가 특정 플랫폼에서 축소, 확장, 숨기기 또는 표시되도록 설정할 수 있습니다. 이것은 웹 사이트의 모양과 느낌을 구축하는 프로세스를 단순화하는 데 매우 유용합니다.

그리드 시스템

부트스트랩에는 프레임워크를 사용하여 반응형 웹사이트를 디자인할 수 있도록 하는 주요 기능인 그리드 시스템이 있습니다. 부트스트랩의 모든 행은 컨테이너 클래스에 배치되어야 하며 이후 행은 특정 크기로 정의될 수 있습니다.

다음은 그리드 시스템 표기법의 예입니다.

• 미리 정의된 행 클래스는 행을 생성합니다.
• 해당 행 내에서 두 번째 클래스는 "col-md-6"을 지정합니다.
• 이것은 클래스가 웹 페이지에서 6개의 열에 걸쳐 있는 열을 생성한다는 것을 의미합니다.
• "md"는 이것이 768px 이하의 중간 장치 또는 데스크탑에서만 발생하도록 지정합니다.
• "오프셋" 클래스는 해당 열이 비어 있음을 의미합니다. 이 경우 오프셋은 3이므로 일부 콘텐츠를 채우기 위해 3개의 열에 공백이 남습니다.
  이 그리드 시스템을 통해 개발자는 콘텐츠 섹션을 빠르게 정의하고 콘텐츠 사이에 적절한 간격을 두어 깨끗하고 반응이 빠른 디자인을 가질 수 있습니다.

부트스트랩의 도전

모든 부트스트랩 파일을 직접 다운로드할 경우 JavaScript 및 CSS 파일의 크기가 큽니다. 이로 인해 빠른 페이지를 만들 때 몇 가지 문제가 발생할 수 있습니다. 이는 부트스트랩 파일 내의 모든 파일이 완전히 사용되지 않아 불필요한 데이터 다운로드가 문제가 될 수 있기 때문입니다. 이는 사용자 경험에 영향을 줄 수 있으므로, 사용자 경험을 향상시키기 위해 부트스트랩 기본 사항을 사용하는 방법(https://moz.com/ugc/how-to-use-bootstrap-) 게시물을 방문하여 이에 대해 더 자세히 확인하십시오. 사용자 경험 향상을 위한 기본).

반응이 빠르고 깔끔한 웹사이트 디자인을 구축할 수 있는 환상적인 프레임워크인 Bootstrap을 사용해 보시기 바랍니다. Bootstrap에 대한 더 많은 시작 개념을 다루는 시리즈의 다음 게시물을 기대해 주십시오.

저자: Esme Vazquez, 주니어 웹 개발자

메이커, 아티스트, 게이머, 코더, 웹 개발자, 블로거 Esme는 콘텐츠 관리 블로그 사이트 Medium에서 최근 블로그 간행물 Indiellect의 창시자입니다. 그녀의 현재 경험은 웹 개발 및 게임 개발에 있습니다. 그녀는 현재 일하고 있으며 That에서 SEO 교육을 받고 있습니다! 플로리다주 Leesburg에 있는 회사에서 주니어 웹 개발자로 활동했습니다. 그녀는 미래에 인간의 아름다움을 묘사하는 비디오 게임을 만들고 싶어합니다. 질문이 있는 경우 @EsmeVazquez18로 트윗하거나 LinkedIn에 추가하세요.