사용 안내서 취소

Bootstrap을 사용하여 반응형 웹 사이트 디자인

검색

마지막 업데이트 날짜 2022년 11월 28일

모바일을 주요 대상으로 하는 반응형 웹 사이트의 경우 Dreamweaver에서 Bootstrap 스타터 템플릿을 사용하고 Bootstrap 구성 요소를 드래그 앤 드롭합니다.

Bootstrap은 모바일을 주요 대상으로 하는 반응형 웹 사이트를 개발하는 데 흔히 사용되는 무료 HTML, CSS 및 JavaScript 프레임워크입니다. 프레임워크에는 버튼, 테이블, 내비게이션, 이미지 캐로설 및 기타 웹 페이지에서 사용할 수 있는 요소에 대한 반응형 CSS 및 HTML 템플릿이 포함되어 있습니다. 몇 가지 선택적 JavaScript 플러그인을 사용할 수 있으므로 기초적인 코딩 기술만 보유한 개발자도 뛰어난 반응형 웹 사이트를 개발할 수 있습니다.

Dreamweaver에서는 Bootstrap 문서를 작성하고 Bootstrap으로 작성한 기존 웹 페이지를 편집할 수도 있습니다. 디자인이 완료된 Bootstrap 파일이든 작업이 진행 중이든 상관없이 Dreamweaver에서는 코드를 편집할 뿐만 아니라 라이브 뷰 편집, 시각적 CSS Designer, 비주얼 미디어 쿼리, Extract 등 시각적 편집 기능을 사용하여 디자인을 변경할 수도 있습니다.

참고:

현재 지원되는 Bootstrap 버전은 v4.4.1 및 v3.4.1입니다.

일반 질문

Dreamweaver에서 유동 격자를 사용해 왔습니다. Bootstrap을 시작하려면 어떻게 해야 합니까?

유동 격자 문서를 제작할 때 Dreamweaver는 자동으로 적절한 클래스를 적용하여 반응형 웹 페이지를 만듭니다. 콘텐츠에 집중하여 다른 형태 요소에서 끊김 없이 연결되는 방법을 결정하기만 하면 됩니다.

마찬가지로 Bootstrap 문서에서 콘텐츠와 디자인에 집중하기만 하면 Bootstrap 프레임워크와 긴밀하게 통합된 Dreamweaver에서 웹 페이지의 반응성을 처리합니다.

Dreamweaver는 현재 Bootstrap 3.4.1 및 4.4.1 버전을 지원합니다.

“Bootstrap 3.4.1에는 디바이스나 뷰포트 크기가 증가함에 따라 최대 12열까지 적절하게 조정되는 반응형 모바일 중심의 유동 격자 시스템이 있습니다. 더 많은 시맨틱 레이아웃 생성을 위한 강력한 Mixin뿐만 아니라 간편한 레이아웃 옵션을 위해 미리 정의된 클래스를 포함합니다.” - Bootstrap 설명서

“주요 변경 사항이 적용된 Bootstrap 4.4.1에는 12열 시스템, 5개의 기본 반응형 계층, Sass 변수와 Mixin 및 수십 개의 사전 정의된 클래스를 통해 모든 모양과 크기에 대한 레이아웃을 빌드할 수 있는 강력한 모바일 중심의 Flexbox 그리드가 포함됩니다.” - Bootstrap 설명서

Dreamweaver에서 Bootstrap 문서를 시작하려면 Bootstrap 스타터 템플릿을 사용해 보십시오. Dreamweaver에는 전자 상거래 또는 포트폴리오 등 다양한 웹 사이트 유형을 간편하게 제작할 수 있는 다양한 템플릿이 있습니다.

Bootstrap 문서를 처음부터 새로 제작하려면 Bootstrap 문서 제작 섹션에 설명된 단계를 따르십시오.

Dreamweaver에서 Bootstrap 문서로 기존 유동 격자 문서를 마이그레이션할 수 있습니까?

아니요. Bootstrap 문서로 기존 유동 격자 문서를 변환하는 직접적인 방법은 없습니다. 하지만 사용자는 Bootstrap 문서를 만들고 디자인하는 것이 유동 격자 문서에서와 비슷하다는 것을 Dreamweaver를 통해 경험하게 됩니다. 예를 들어 새 문서 대화 상자에서 Bootstrap 문서를 바로 만들어 시작할 수 있습니다. Bootstrap에서 세 가지 기본 폼 팩터인 휴대폰, 태블릿 및 데스크탑용 유동 격자 문서를 만들 때 소형, 중형, 대형, 초대형 등 기본 화면 크기의 문서를 만들어 시작합니다. Bootstrap 문서에서 요소를 클릭할 때 표시되는 레이아웃 편집 옵션도 유동 격자 문서의 옵션과 비슷하게 보입니다.

최신 버전의 Dreamweaver에서 이전 사이트를 가져올 수 있습니까?

예. 최신 버전의 Dreamweaver에서 이전 사이트를 가져올 수 있습니다. 이렇게 하면 Dreamweaver는 site root/css/ 폴더에서 Bootstrap CSS 파일을 찾습니다.

사이트에 Bootstrap v3 CSS 파일이 있는 경우 사이트 관리 > 고급 설정 > Bootstrap의 Bootstrap 버전은 3.4.1로 설정됩니다.
사이트에 Bootstrap v4 CSS 파일이 있는 경우 사이트 관리 > 고급 설정 > Bootstrap의 Bootstrap 버전은 4.4.1로 설정됩니다.
사이트의 site root/css 경로에 Bootstrap CSS 파일이 없는 경우에는 사이트 관리 > 고급 설정 > Bootstrap의 Bootstrap 버전은 4.4.1로 설정됩니다.

Bootstrap 문서 제작

새 문서 대화 상자에서 다음 중 하나의 옵션을 사용하여 Bootstrap 웹 사이트 디자인을 시작할 수 있습니다.

Bootstrap 스타터 템플릿 (스타터 템플릿 > Bootstrap 템플릿) - 처음부터 페이지의 레이아웃에 대해 고민하지 않고 빠르게 시작하려면 이 옵션을 사용하십시오. 필요한 경우 간단하게 텍스트를 편집하고 에셋을 대체하기만 하면 반응형 웹 사이트가 준비됩니다. 자세한 내용은 Bootstrap 스타터 템플릿 사용을 참조하십시오.
Bootstrap 프레임워크를 기반으로 HTML 문서 제작 (새 문서 > HTML > Bootstrap) - 이 옵션을 통해 Dreamweaver 내에서 CSS 및 Bootstrap 구성 요소를 사용하여 퍼즐 조각을 맞추듯이 웹 사이트를 구축할 수 있습니다. 자세한 내용은 Bootstrap 프레임워크를 기반으로 HTML 문서 제작을 참조하십시오.

Bootstrap 스타터 템플릿 사용하기

Bootstrap 스타터 템플릿을 통해 인기 있는 테마의 웹 사이트를 빠르게 제작할 수 있습니다. 프레임워크의 모든 종속 파일은 자동으로 저장됩니다.

파일 > 새로 만들기를 클릭합니다.
표시되는 새 문서 대화 상자에서 스타터 템플릿을 클릭한 다음 Bootstrap 템플릿 목록에서 필요한 템플릿을 선택합니다.
만들기를 클릭합니다.

선택한 템플릿을 기반으로 하는 HTML 페이지가 만들어집니다. 이제 필요에 따라 구성 요소를 추가하거나 삭제하고 텍스트나 에셋을 편집하여 페이지를 수정할 수 있습니다.

Bootstrap 프레임워크를 기반으로 하는 HTML 문서 제작

Bootstrap 프레임워크를 기반으로 하는 HTML 문서를 만들어 반응형 웹 사이트 구축을 시작할 수 있습니다. Bootstrap 프레임워크 파일의 세트를 새로 만들거나 기존 파일을 사용할 수도 있습니다. 문서를 만들고 나면 Dreamweaver에서 삽입 패널을 사용하여 아코디언, 캐로설과 같은 Bootstrap 구성 요소를 추가할 수 있습니다. 또는 Photoshop 구성 요소가 있는 경우, Extract를 사용하여 이미지, 글꼴, 스타일, 텍스트 등을 Bootstrap 문서로 가져올 수도 있습니다.

파일 > 새로 만들기를 클릭합니다.
새 문서 대화 상자에서 새 문서 > HTML을 클릭한 다음 Bootstrap 탭을 클릭합니다.
bootstrap.css 파일이나 기타 bootstrap 파일을 새로 만들려면 다음 작업을 수행합니다.

Bootstrap CSS를 새로 만들지 또는 기존의 CSS를 사용할지 여부를 결정합니다.

CSS 새로 만들기를 선택하면 사이트 루트에 [css] 폴더가 생성되며 bootstrap.css 파일이 새 폴더로 복사됩니다. 기존 CSS 사용을 선택하는 경우, 경로를 지정하거나 CSS의 위치를 검색해야 합니다.
1. 새로 만들기를 클릭합니다.
  
  새 Bootstrap 문서 제작
2. (선택 사항) 문서에 다른 CSS를 첨부하려면 CSS 첨부 섹션의 를 클릭합니다. 외부 스타일 시트 첨부 대화 상자가 표시됩니다. 설정을 지정하고 확인을 클릭합니다.
3. [사전 제작된 레이아웃 포함] 옵션에서는 기본적인 Bootstrap 문서 구조를 제공합니다.
  
  기본 구조를 사용하지 않고 빈 문서로 시작하려면 사전 제작된 레이아웃 포함 옵션을 선택 해제하십시오.
4. (선택 사항) 기본 레이아웃은 30px 여백의 12개 열로 이루어집니다. 기본 화면 크기는 576px, 768px, 992px 및 1200px입니다.
  
  이 설정을 수정하려면 사용자 정의를 클릭합니다. Bootstrap.css 파일이 이에 따라 수정됩니다.
  
  참고:
  
  Bootstrap v3.4.0의 경우 기본 화면 크기는 768px, 992px 및 1200px입니다.
5. Extract 패널이 닫혀 있을 때 이를 열려면 Extract를 사용하여 Photoshop 구성 요소에서 페이지 빌드를 선택하십시오. 이러한 방식으로 Photoshop 구성 요소에서 에셋 추출을 바로 시작할 수 있습니다.
  
  기본적으로 새 사이트는 Bootstrap 버전 4.4.1을 사용하여 생성됩니다. 문서를 제작하고 나면 사이트 루트 폴더에서 CSS 및 JS 폴더를 찾을 수 있습니다. 그러나 Bootstrap 버전 3.4.1을 사용하여 사이트를 제작하기를 원한다면 사이트 > 사이트 관리를 선택하십시오. 사이트 루트 폴더를 선택합니다. 고급 설정 > Bootstrap을 클릭합니다. Bootstrap 버전 드롭다운 필드에서 3.4.1을 선택합니다. Bootstrap 버전 3.4.1의 경우 사이트 루트 폴더에서 CSS, JS 및 Fonts 폴더를 찾을 수 있습니다.
  
  Bootstrap 버전 4.4.1 선택
  
  Bootstrap 4.4.1 페이지를 생성하면 jQuery 버전 3.4.1이 지원됩니다. Bootstrap 스타터 템플릿이 Bootstrap 버전 4.4.1로 업데이트됩니다.
  
  Bootstrap 구성 요소를 Bootstrap 페이지에 추가하면 Bootstrap 4.0.0 페이지를 Bootstrap 4.4.1 및 jQuery 버전 3.4.1로 업그레이드할 수 있습니다. Bootstrap 구성 요소를 페이지에 삽입할 때 표시되는 대화 상자에서 예를 클릭합니다.
  
  버전 호환성 확인 대화 상자
  
  Bootstrap 3.4.1 확인 대화 상자
  
  jQuery 팝업 대화 상자
  
  Bootstrap 4.0.0 사이트를 가져오거나 사이트를 이전 버전에서 Dreamweaver 릴리스의 다음 버전으로 마이그레이션하면 사이트 설정 > 고급 설정 > Bootstrap에서 Bootstrap 버전이 4.4.1로 설정됩니다.
참고:

Bootstrap 4.3.1에서는 그리드 행 열의 높이가 1px에서 0px로 변경됩니다. 따라서 라이브 뷰 모드에서 표시되도록 하려면 그리드 행 열에 일부 콘텐츠를 추가해야 합니다.
기존의 Bootstrap 프레임워크 파일을 사용하려면 다음 작업을 수행합니다.
1. 기존 사용을 클릭하고 bootstrap.css 파일의 경로를 지정합니다. CSS가 저장된 위치를 검색할 수도 있습니다.
  
  기존 프레임워크 파일을 사용하여 Bootstrap 문서 제작
2. (선택 사항) 문서에 다른 CSS를 첨부하려면 CSS 첨부 섹션의 를 클릭합니다. 외부 스타일 시트 첨부 대화 상자에서 설정을 지정하고 확인을 클릭합니다.
3. 사전 제작된 레이아웃 포함 옵션에서는 기본적인 Bootstrap 문서 구조를 제공합니다. 기본 구조를 사용하지 않고 빈 문서로 시작하려면 사전 제작된 레이아웃 포함 옵션을 선택 해제하십시오.
[만들기]를 클릭합니다.

참고:

생성되는 bootstrap.css 파일은 읽기 전용입니다. 따라서 CSS Designer를 사용하여 이 스타일을 편집할 수 없습니다. Bootstrap 파일에서 CSS Designer의 속성 창이 비활성화되어 있습니다.

Bootstrap 문서의 스타일을 수정하려면 다른 CSS 파일을 만들어 기존 스타일을 재정의한 다음 이를 문서에 첨부하십시오.

Bootstrap 파일 열기

참고:

Bootstrap 버전 3 이상에서 만든 문서만 Dreamweaver에서 열고 편집하는 것이 좋습니다.

다음 방법 중 하나를 사용하여 Bootstrap 파일을 열 수 있습니다.

파일 > 열기를 클릭하고 Bootstrap HTML 파일을 검색합니다.
(권장) Dreamweaver 사이트를 만들고 사이트 폴더를 Bootstrap 파일을 모두 포함하는 폴더로 가리킵니다.

Dreamweaver에서 Bootstrap HTML 파일을 여는 경우:

행이 둥근 모서리의 회색 파선으로 강조 표시됩니다.
열이 파란색 파선으로 강조 표시됩니다.

Dreamweaver에서는 CSS 파일 이름이 'Bootstrap'을 포함하는 경우 CSS 파일이 Bootstrap HTML 파일과 관련된 것으로 인식합니다. 다음 중 일부 또는 모두가 CSS 파일 참조가 될 수 있습니다.

로컬 경로:
축소된 또는 축소되지 않은 CSS 파일이 로컬로 존재합니다. 예:

<link href="css/bootstrap.css" rel="stylesheet"> 또는
<link href="css/bootstrap.min.css" rel="stylesheet">
원격 경로:

축소된 또는 축소되지 않은 원격 CSS 파일. 예:

CDN

참고:

Bootstrap 스타일 시트의 링크 및 가져오기 태그가 모두 Dreamweaver에서 지원됩니다. 그러나 중첩된 가져오기(다른 스타일 시트를 가져오는 스타일 시트 링크)는 지원되지 않습니다.

숨기기, 숨기기 취소 및 숨겨진 Bootstrap 요소 관리

경우에 따라 요소가 다른 뷰포트에서 표시되는 동안 또 다른 뷰포트에서 표시되어야 할 필요가 있으며, 디자인 목적상 요소를 숨기고자 하는 경우가 있습니다.

Bootstrap 요소를 숨기려면 마우스 오른쪽 버튼으로 클릭하고 [요소 숨기기]를 선택합니다. 보기 메뉴에서 요소가 일시적으로 숨겨집니다.

숨겨진 요소를 표시하고 숨기기를 취소하려면 마우스 오른쪽 버튼으로 클릭하고 [숨겨진 요소 관리]를 선택합니다. 숨겨진 요소는 회색 파선 배경에 표시됩니다. 요소 숨기기를 취소하려면 눈 아이콘을 클릭합니다.

Bootstrap 구성 요소 추가

삽입 패널의 Bootstrap 구성 요소 옵션은 Dreamweaver의 웹 페이지에 추가할 수 있는 모든 Bootstrap 구성 요소를 보여줍니다. HTML 페이지에 연결된 bootstrap.css 파일의 Bootstrap 버전에 따라 해당 구성 요소가 삽입 패널에 나열됩니다. 예를 들어 Bootstrap v4.0.0에서는 카드, 배지 등의 추가적인 구성 요소가 표시됩니다. 마찬가지로 글리프콘, 패널, 웰스 및 썸네일 구성 요소는 Bootstrap v3.3.7에서만 사용할 수 있습니다. Bootstrap 버전에 따라 삽입 패널에 해당 구성 요소가 표시됩니다. 또한 스피너 구성 요소는 Bootstrap v4.4.1에서만 사용할 수 있습니다.

삽입 패널의 구성 요소는 다음과 같은 기준으로 채워집니다.

강조되는 문서: 삽입 패널의 구성 요소는 해당 문서에 연결된 Bootstrap 파일의 Bootstrap 버전을 기준으로 채워집니다.
사이트 환경 설정의 버전: 비-Bootstrap 문서의 경우 Dreamweaver는 사이트 환경 설정 > 고급 > Bootstrap의 버전을 찾습니다. 이 옵션의 버전에 따라 적절한 구성 요소가 채워집니다. 기본적으로 새 사이트의 경우 해당 버전은 4.4.1입니다.
파일이 저장되는 위치: 어떠한 사이트에도 속하지 않은 비-Bootstrap 문서의 경우, 삽입 패널은 4.4.1 구성 요소를 반영합니다.

Bootstrap 4.0.0에서 지원되는 구성 요소 — Bootstrap 4.4.1에서 지원되는 구성 요소

구성 요소를 추가하려면 패널에서 웹 페이지로 드래그합니다. 구성 요소를 삭제하기 전에 주의 라이브 가이드, 정밀 삽입(DOM 사용) 및 위치 지원 등 시각 도구를 기록해 둡니다. 이러한 도구는 페이지에 구성 요소를 빠르고 정확하게 배치하는 데 사용합니다. 웹 페이지에 요소 삽입에 대한 자세한 내용은 삽입 패널 관련 문서를 참조하십시오.

행 추가

새 행을 추가하려는 행을 클릭합니다. 그런 다음 새 행 추가 아이콘을 클릭합니다. Bootstrap 행이 각 6개 열의 자식 열 요소 2개와 함께 추가됩니다.

추가된 행에 대한 코드는 다음과 같습니다.

여기서 *는 Dreamweaver의 현재 화면 크기를 나타냅니다.

열 추가

필수 열을 선택한 다음 추가 새 열 아이콘을 클릭합니다. 선택한 열이 자식 없이 복제됩니다.

모든 빈 열은 최소 20px 높이로 할당됩니다. 그러나 이 높이는 페이지에 실제로 추가되지 않으며 열 내에 요소를 삽입하기 쉽도록 라이브 뷰에만 표시됩니다.

열 및 행 복제

복제하려는 열이나 행을 클릭한 다음 오른쪽 하단에 표시되는 복제 아이콘을 클릭합니다. 전체 행 또는 열은 내용과 함께 복제됩니다.

참고:

열 추가 또는 행 추가 옵션은 클래스로 행 또는 열을 복제하지만 내용은 포함하지 않습니다.

열 크기 조절 및 오프셋

열 크기 조절 및 오프셋은 다양한 뷰포트에 대한 반응형 디자인을 만들 때 특히 필수적입니다.

열 크기 조절

원하는 열을 클릭하고 오른쪽에 있는 핸들을 드래그하여 크기를 조절합니다. Bootstrap v4.0.0 문서의 경우 열 크기를 조절할 때 col-*-n 클래스가 추가되며, 여기에서 *는 현재 미디어 쿼리(sm, md, ld, xl)를 나타내고 n은 차지하는 열의 수를 나타냅니다. 초소형 화면 크기의 경우 col-n 클래스가 추가됩니다.

Bootstrap v3.3.7 문서의 경우 열 크기를 조절할 때 col-*-n 클래스가 추가되며, 여기에서 *는 현재 미디어 쿼리(xs, sm, md 또는 lg)를 나타내고 n은 차지하는 열의 수를 나타냅니다.

Dreamweaver는 현재 화면의 크기를 감지하고 적절한 클래스를 추가합니다. 특정 뷰포트에 맞게 열 크기를 조절하려면 오른쪽 하단의 옵션 또는 scrubber를 사용하여 뷰포트 크기를 변경합니다. 그런 다음 열 크기를 적절하게 조절합니다.

열 오프셋

원하는 열을 클릭하고 왼쪽의 핸들을 드래그하여 열을 오프셋합니다. 오프셋은 파선 영역으로 표시됩니다. Bootstrap v4.0.0 문서의 경우 열을 오프셋할 때 offset-*-n 클래스가 추가되며, 여기에서 *는 현재 미디어 쿼리(sm, md, lg 또는 xl)를 나타내고 n은 차지하는 열의 수를 나타냅니다.

Bootstrap v3.3.7 문서의 경우 열을 오프셋할 때 col-*-offset-n 클래스가 추가되며, 여기에서 *는 현재 미디어 쿼리(xs, sm, md 또는 lg)를 나타내고 n은 전환하는 열의 수를 나타냅니다.

Dreamweaver는 현재 화면의 크기를 감지하고 올바른 클래스를 추가합니다. 특정 뷰포트에 맞게 열을 오프셋하려면 오른쪽 하단의 옵션 또는 scrubber를 사용하여 뷰포트 크기를 변경합니다. 그런 다음 열을 적절하게 오프셋합니다.

쉽고 빠르게 지원 받기

신규 사용자이신가요?