부트스트랩 5 독학 3일차 - 부트스트랩 스튜디오 살펴보기

튜토리얼이 있습니다.

https://bootstrapstudio.io/docs/#the-application-window

Bootstrap Studio Docs | Bootstrap Studio

영어에 자신 있는 분이라면 쉽게 보실수 있겠지만 영포자들은 번역에 기댈수 밖에 없습니다.

하지만 오역이 많습니다.

그래서 나름 정리를 좀 하려고 합니다.  그러면서 공부하면 빨리 익힐수 있고 머리에 오래 남고 또...

암튼 도전 해 봅니다.

부트스트랩 버전에 따라 제공해주는 템플릿은 다르지만 공통적으로 빈 템플릿을 제공 하고 있습니다.

빈 템플릿을 선택한 화면입니다.

컴포넌트 패널 (좌측 상단) – Studio, Online 2개의 탭으로 구성 되어 있습니다.  드래그 앤 드랍 방식으로 사용할 수 있는 컴포넌트들이 모여 있는 패널입니다.

오버뷰 패널 (좌측 하단) – 페이지의 구성 요소를 트리 형태로 보여 줍니다.

옵션 패널 (우측 상단) – 선택한 구성 요소의 옵션을 쉽게 수정할 수 있습니다.  외형(Appearance)과 움직임(Animation)탭 잠시 패스 하도록 하겠습니다.

디자인 패널 (우측 하단) – 페이지, CSS, SASS 파일 및 디자인 이미지를 보관 할 수 있습니다.  실제로 폴더에 저장되거나 저장된 파일이 아니라 Export 될 환경을 미리보기 한다고 생각하면 될 듯 합니다.

에디터 패널 (중앙 하단) – HTML, Styles 2개의 탭으로 구성 되어 있습니다.  클릭을 하면 확장이 되고 별도의 창으로 분리도 가능합니다.  HTML 부분은 여타의 에디터처럼 코딩은 불가능합니다.  id나 class와 같은 속성을 추가할 수 있는 별도의 패널을 통해서만 코딩이 가능합니다.  불편할수도 있겠지만 어쩌면 규칙적인 코딩에는 도움이 될 수도 있을거 같습니다.

스테이지 (중앙 가장 큰 영역) – 페이지의 보면서 구성요소를 드래그 앤 드롭하고 텍스트를 편집할 수 있는 메인 화면입니다.