사용 안내서 취소

유동 격자 레이아웃을 사용하는 반응형 디자인

검색

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

다중 화면용 반응형 웹 사이트를 만들 계획이십니까? Dreamweaver에서 유동 격자를 사용하여 모바일 디바이스 및 데스크탑용 웹 사이트를 디자인하는 방법에 대해 살펴보십시오.

웹 사이트의 레이아웃은 표시될 디바이스의 크기에 맞게 반응하고 적용되어야 합니다(반응형 디자인). 유동 격자 레이아웃은 웹 사이트가 표시될 디바이스에 해당하는 다양한 레이아웃을 만드는 시각적 방법을 제공합니다.

예를 들어 웹 사이트를 데스크탑, 태블릿 및 휴대폰에서 볼 수 있습니다. 유동 격자 레이아웃을 사용하여 이러한 각 디바이스별 레이아웃을 지정할 수 있습니다. 웹 사이트가 데스크탑, 태블릿, 휴대폰 등에 표시되는지의 여부에 따라 해당되는 레이아웃을 사용하여 웹 사이트를 표시합니다.

추가 정보: 적응형 레이아웃과 반응형 레이아웃 비교

유동 격자 레이아웃 문서에서는 검사 모드를 사용할 수 없습니다.

유동 격자 레이아웃 생성

Dreamweaver 2017에서 기존의 유동 격자 레이아웃을 편집할 수 있습니다. 그러나 유동 격자 레이아웃을 만들 수는 없습니다.

대신에 Bootstrap을 사용하여 Dreamweaver 2017에서 반응형 레이아웃을 만들 수 있습니다. Bootstrap에 대한 자세한 내용은 Bootstrap 파일을 사용하여 작업을 참조하십시오.

파일 > 유동 격자(레거시)를 선택합니다.
격자의 열 수에 대한 기본값은 미디어 유형 중앙에 표시됩니다. 장치를 위한 열 수를 맞춤화하려면 필요에 따라 이 값을 편집하십시오.
화면 크기와 비교하여 페이지 너비를 설정하려면 값을 퍼센트 단위로 설정하십시오.
거터 너비를 추가적으로 변경할 수 있습니다. 이 거터는 두 열 사이의 공간입니다.
이 페이지에 대한 CSS 옵션을 지정합니다.

[생성]을 클릭하면 CSS 파일을 지정하는 메시지가 표시됩니다. 다음과 같은 작업을 수행할 수 있습니다.
- 새 CSS 파일을 만듭니다.
- 기존 CSS 파일을 엽니다.
- 유동 격자 CSS 파일로 열 CSS 파일을 지정합니다.
기본값으로 휴대폰 유동 격자가 표시됩니다. 또한, 유동 격자를 위한 삽입 패널이 표시됩니다. [삽입] 패널의 옵션을 사용하여 레이아웃을 생성합니다.

다른 장치를 위한 레이아웃 설계로 전환하려면 [디자인 보기] 아래의 옵션에서 해당 아이콘을 클릭합니다.
파일을 저장합니다. HTML 파일을 저장할 때 boilerplate.css 및 respond.min.js와 같은 종속 파일을 컴퓨터의 특정 위치에 저장하라는 메시지가 표시됩니다. 위치를 지정한 다음 [복사]를 클릭합니다.

boilerplate.css는 HTML5 상용구를 기준으로 합니다. CSS 스타일 세트는 웹 페이지가 여러 디바이스에서 렌더링하는 방식으로 일관성을 유지합니다. respond.min.js는 이전 버전의 브라우저에서 미디어 쿼리 지원 제공을 돕는 JavaScript 라이브러리입니다.

유동 격자 문서 편집

라이브 뷰에서 다음으로 직접 유동 격자 문서를 편집할 수 있습니다.

HTML 클래스와 ID를 요소에 연결 자세한 내용은 요소 표시를 참조하십시오.
이미지 속성 및 텍스트 편집 자세한 내용은 빠른 속성 관리자 및 라이브 뷰에서 텍스트 편집을 참조하십시오.
새로운 요소 삽입 자세한 내용은 유동 격자 요소 삽입을 참조하십시오.

요소 간략히 보기를 사용하여 유동 격자 문서의 HTML DOM 구조를 시각화할 수 있습니다.

유동 격자 요소 삽입

삽입 패널(Window > 삽입)에 유동 격자 레이아웃에서 사용할 수 있는 요소가 나열됩니다. 요소를 삽입하는 동안 유동 요소로 삽입하도록 선택할 수 있습니다.

삽입 패널에서 삽입할 요소를 클릭합니다.
표시되는 대화 상자에서 이전, 이후 또는 중첩을 클릭하여 문서에서 강조 표시된 참조 요소에 따라 요소를 배치할 수 있습니다.
클래스를 선택하거나 ID 값을 입력합니다. 클래스 메뉴가 페이지를 생성할 때 지정하는 CSS 파일의 클래스를 표시합니다.
[유동 요소로 삽입] 확인란을 선택합니다.

삽입한 요소를 선택할 때 Div를 숨기거나, 복제하거나 삭제하는 옵션이 표시됩니다. 각 요소의 맨 위에 층을 이루는 Divs의 경우, Divs를 교체하는 옵션이 표시됩니다.

옵션	설명
Div 교체	위 또는 아래 요소와 현재 선택된 요소를 교체합니다.
숨기기	요소를 숨깁니다. 요소 숨기기를 취소하려면 다음 중 하나를 수행하십시오. ID 선택기 숨기기를 취소하려면 CSS 파일의 표시 속성을 블록으로 변경합니다. (display:block) 클래스 선택기 숨기기를 취소하려면 소스 코드에서 적용된 클래스(hide_<MediaType>)를 제거합니다.
윗 행으로 이동	행 단위로 요소를 이동합니다.
복제	현재 선택한 요소를 복제합니다. 요소에 연결된 CSS도 복제됩니다.
삭제	ID 선택기에 대해 CSS뿐 아니라 HTML도 삭제합니다. HTML만 삭제하려면 [삭제]를 누릅니다. 클래스 선택기의 경우 HTML만 삭제합니다.
정렬	클래스 선택기의 경우 [정렬] 옵션이 0 여백 버튼 역할을 합니다. ID 선택기의 경우 [정렬] 버튼이 격자에 대한 요소를 정렬합니다.

참고:

페이지의 요소는 위 아래 화살표 키를 사용하여 순환적으로 이동시킬 수 있습니다. 요소 경계를 선택한 다음 화살표 키를 누르십시오.

중첩 요소

다른 유동 요소 내의 유동 요소를 중첩하려면 부모 요소 안쪽에 초점을 맞추도록 하십시오. 그다음 필요한 자식 요소를 삽입합니다.

중첩 복제도 지원됩니다. 중첩 복제는 선택한 요소의 HTML을 복제하고 관련 유동 CSS를 생성합니다. 선택한 요소에 포함된 절대 요소는 적절하게 배치됩니다. 중첩 요소는 [복제] 단추를 사용하여 복제할 수도 있습니다.

부모 요소를 삭제하면 해당 요소, 자식, 관련 HTML에 해당하는 CSS가 삭제됩니다. 중첩 요소는 [삭제] 버튼을 사용하여 함께 삭제할 수 있습니다(키보드 단축키: Ctrl+Delete).

쉽고 빠르게 지원 받기

신규 사용자이신가요?