반응형 웹 디자인은 하나의 디자인을 기반으로 데스크탑, 태블릿, 스마트폰 및 다른 디바이스의 브라우저에 최적화된 웹 사이트를 구축하기 위한 방법입니다.
Dreamweaver CC 2015의 새로운 반응형 웹 디자인 기능에는 Bootstrap에 대한 시각적인 툴 지원과 Bootstrap 구성 요소 추가 기능, 라이브 뷰의 드래그 가능한 스크러버, 시각적인 미디어 쿼리 중단점이 포함되어 있습니다.
Bootstrap은 필요한 경우 수정할 수 있도록 웹 사이트를 위한 다양한 레이아웃 및 기능을 제공하는 널리 사용되는 프레임워크입니다.
새로운 기능을 사용하여 처음부터 반응형 웹 사이트 디자인을 만들 수 있습니다.
새 문서 대화 상자에는 기존 또는 새 Bootstrap 스타일 시트를 기반으로 반응형 디자인을 시작할 수 있는 옵션이 포함되어 있습니다.
이 예제에서는 Bootstrap 탭을 클릭하고 새 Bootstrap CSS 파일 만들기를 선택한 다음 세 개의 레이아웃에 대한 열 및 크기 수를 선택합니다.
원하는 대로 기본 설정을 적용하면 만들기를 클릭하고 파일을 저장합니다.
이러한 설정을 통해 Dreamweaver는 CSS, JavaScript, 글꼴을 생성하고 반응형 Bootstrap 파일을 폴더에 추가합니다.
이러한 파일이 사이트의 기본 레이아웃을 제공하는 그리드 시스템을 정의합니다.
자리 표시자 텍스트를 삭제하고 스크러버로 라이브 뷰의 크기를 조정한 다음 중단점을 클릭해 새 CSS 파일에 추가하여 기본 Bootstrap.css를 그대로 유지합니다.
그런 다음 라이브 뷰를 두 번 클릭하여 확장합니다.
Bootstrap 구성 요소는 재사용할 수 있는데요.
버튼, 반응형 이미지, Carousel, 내비게이션 막대 및 기타 요소의 레이아웃 및 스타일을 빠르게 정의할 수 있습니다.
컨테이너 구성 요소를 추가하여 페이지의 컨텐츠를 대부분 유지해 보겠습니다.
페이지가 거의 완성되어 있고 일부 갤러리 이미지를 추가해 보죠.
DOM 패널을 사용하여 이러한 이미지의 행을 추가할 아트 섹션의 열로 신속하게 이동합니다.
열이 포함된 그리드 행 Bootstrap 구성 요소를 사용하여 사전 정의된 열이 포함된 행을 삽입합니다.
세 개의 열이 적용되도록 기본값을 입력하고 확인을 클릭합니다.
라이브 뷰에서 HUD를 보면 클래스 선택기가 Bootstrap 스타일 시트의 행 및 열 div에 자동으로 적용된 것을 확인할 수 있습니다.
Bootstrap 스타일 시트에서 추가 사전 정의된 선택기를 설정하여 각 열의 폭을 설정하면 태블릿 및 스마트폰과 같은 레이아웃에 맞게 컨텐츠가 표시되도록 크기를 정확하게 조정할 수 있습니다.
이제 이미지를 삽입하고 각 열에 중첩합니다.
두 개의 이미지를 이 섹션에 추가해 보겠습니다.
라이브 뷰를 통해 그리드 시스템에 행과 열을 손쉽게 추가할 수 있습니다.
행의 마지막 div 열에 있는 이 아이콘을 클릭하여 마지막 두 이미지에 대한 열을 추가합니다.
Dreamweaver는 Bootstrap 클래스를 실시간으로 업데이트하므로 효과가 디자인에 적용되는 것을 즉시 확인할 수 있습니다.
마지막으로 시각적인 미디어 쿼리 중단점을 클릭하여 다양한 레이아웃을 시각적으로 테스트합니다.
Creative Suite 버전과 달리 Dreamweaver CC는 최신 반응형 웹 사이트를 구축할 수 있는 완벽한 올인원 툴입니다.
Dreamweaver에 최신 업데이트를 설치하고 새로운 반응형 기능을 확인해 보시기 바랍니다.
