세부 기능
- 한 페이지 분량의 데이터는 20개를 조회합니다. 사용자의 추가적인 액션 없이 스크롤만으로 데이터를 불러오는 무한스크롤을 채택하였습니다.
- 스크롤을 화면 하단까지 했을 경우 추가적인 데이터를 조회할 수 있습니다.
사용자는 홈 페이지에 있는 추가 버튼을 통해 워크스페이스를 생성할 수 있습니다.
워크스페이스 생성이 성공적으로 완료되면 생성된 워크스페이스로 페이지 이동을 합니다.
- 사용자는 워크스페이스 아이템의 오른쪽 상단에 있는 삭제 버튼을 통해서 워크스페이스를 삭제할 수 있습니다.
- 삭제버튼을 누르면 사용자의 의사를 묻는 모달창이 화면에 나오고 확인 버튼을 누를 시 워크스페이스를 삭제할 수 있습니다.
- 오른쪽 HTML 태그 탭에서 HTML 블록을 카테고리별로 확인하실 수 있습니다. 각 카테고리마다 사용 가능한 블록은 다음과 같습니다.
- 컨테이너 - div, span, header, section, nav, main, article, footer
- 텍스트 - p, strong, h1, h2, h3, h4, h5, h6, small, br, em, i, blockquote, hr
- 폼 - butto, option, textarea, select
- 표 - td, tr, th, caption, table
- 리스트 - ul, ol, li
- 링크 - a
- 내용 - text, img
- 블록을
툴박스에서캔버스로 가져와 조립하며 사용할 수 있습니다. -
캔버스에서는 미리 만들어진html,head,body블록이 존재합니다.html블록 내에 조립을 해야 프리뷰에 보이게 됩니다 .
-
img태그는 다른 태그 블록들과는 사용 방법이 조금 다릅니다. -
img태그의 src 속성에 있는사진을 넣어주세요필드 버튼을 눌러야 이미지 src 속성에 값을 부여할 수 있습니다. - 워크스페이스 내부에 넣고 싶은 별도의 이미지가 있으시다면, 이미지 업로드를 통해 직접 이미지를 올릴 수 있습니다.
-
업로드된 이미지 리스트에서 이미지 파일명들을 확인할 수 있으며, 선택하면이미지 미리보기에서 이미지를 확인할 수 있습니다. - 만약, 이미지를 업로드하지않고 공개된 이미지 url을 가져와 사용하고 싶으시다면,
이미지 미리보기하단에 있는 이미지 url 입력칸에서 직접 설정하실 수 있습니다. -
이미지 선택하기버튼을 누르셔야 url 적용이 완료됩니다.
- 원하는 CSS 클래스 블록을 생성할 수 있습니다.
- 생성된 블록은 HTML 블록에 조립할 수 있습니다.
- 왼쪽 하단에 있는 CSS 속성 설정 패널에서 생성한 CSS 클래스 블록을 선택해 원하는 스타일 속성을 추가할 수 있습니다.
- 워크스페이스 내 블록을 조립하는 공간을
캔버스라고 합니다. -
캔버스에서는 블록조립 외 다양한 동작 상호작용이 가능합니다. - (스케일 조정) Zoom In/Zoom Out -
Ctrl키 + 마우스 휠동작 혹은캔버스영역 내 우상단+/- 버튼을 통해 이용 가능합니다. - 스케일 조정 원상복구 -
캔버스영역 내 우상단 표적마크를 통해 이용 가능합니다. - 블록 버리기 - 블록을 드래그하여
캔버스영역 내 좌하단 쓰레기통 위 혹은 툴박스 위로 가져가시면 삭제 가능합니다. (html,head,body는 서비스 이용에 있어 반드시 필요한 블록으로 삭제가 불가능합니다.) - Undo/Redo -
Ctrl키 + z키/Ctrl키 + y키혹은 우상단 헤더의Undo/Redo 버튼을 통해 이용가능합니다.
- 기본적인 스타일을 초기화하기 위해 Reset CSS를 적용할 수 있습니다.
- Reset CSS는 브라우저 기본 스타일을 제거하여 다양한 브라우저에서 일관된 스타일을 유지하도록 도와줍니다.
- 생성한 스타일 클래스에 왼쪽 하단에 있는 CSS 속성 설정 패널에서 편집할 CSS 클래스를 옵션으로 선택하거나 작업 공간에서 클래스 블록을 선택한 뒤 원하는 스타일 속성을 추가할 수 있습니다.
- 스타일에 해당하는 값을 직접 입력한 뒤 체크 박스를 눌러 스타일을 적용할 수 있습니다.
- 왼쪽 상단 프리뷰창 미리보기 탭에서는 블록 코딩으로 만든 화면을 실시간으로 확인할 수 있습니다.
- HTML/CSS 탭에서는 작업한 결과물의 코드 확인할 수 있습니다.
- 복사 버튼을 클릭하면 작성된 코드를 손쉽게 복사하여 외부 에디터나 프로젝트에 적용할 수 있습니다.
- 작업 공간에서 블록을 선택하면 블록에 해당하는 코드를 코드 에디터에서 하이라이팅해서 볼 수 있습니다.
- 저장 버튼을 누르면 워크스페이스를 저장할 수 있습니다.
- 현재 만든 웹사이트의 미리보기 모습이 썸네일로 만들어집니다.
