[WebSquare] 웹스퀘어 가이드 (퍼블리싱)

1. 작업시 열어놓는 창

• Package Explorer 
• Palette
• Style
• Property
• Outline
• Servers : 서버 사용시
• Console : 서버 사용시

 

 

 

 

2.  퍼블리싱 

1. 작업할 파일을 생성

- 웹스퀘어 폴더 안에 있는 WebSquare CSS, WebSquare JS, WebSquare Page 로 생성함.

 

2. CSS는 기존 작성법과 동일

 

3. WebSquare Page

- html 파일이라고 생각하면됨 (웹스퀘어는 XML)

- 하단의 Design 에서 작업

-- Palette에서 원하는 컴포넌트를 클릭하여 화면에 그리는 방식으로 작업

-- 웹스퀘어에서 제공하는 컴포넌트는 고유의 class명이 있음 (별도로 class 추가 가능)

-- 컴포넌트의 속성은 Property에서 설정

-- Group 컴포넌트를 <div> 태그 라고 생각하면됨

-- 스타일 코드는 가능한 CSS파일에 작성. (웹스퀘어 Style 탭에서 작성 X - 코드가 지저분해짐)

-- Package Explorer에서 CSS 파일을 Design 화면에 드래그하면 자동으로 소스에 stylesheet이 작성됨

-- 웹스퀘어 Style 탭에 작성하면 Design 화면에 실시간으로 반영됨 (반영못하는 코드도 있음 ex) display:flex)

-- CSS에 작성하는 코드는 Design 화면에 실시간으로 반영 X

-- 웹스퀘어에서 제공하는 컴포넌트는 이미 지정된 스타일이 있으므로 스타일코드 작성시 참고

-- 가끔 CSS에 작성한 코드가 우선순위에 밀려 반영이 안될때가 있음

-- 우선순위에 맞게 선택자를 작성해도 안되면 최후의 수단으로 !important 사용

-- 좍측 상단에 빨간버튼 클릭하면 작업 내용을 웹 화면으로 볼 수 있음

-- 아코디언 메뉴, 탭 메뉴, 테이블 등 개발 코드가 붙어야하는 것들은 웹스퀘에서 제공하는 컴포넌트를 사용해야함 (개발시 용이하기 때문, Group을 이용해서 원래 하드코딩하던대로 만들면X)

-- 스크립트가 필요한 경우 하단의 Script 영역에 코드 작성

 

 

3. 참고 자료

• https://wtech.inswave.kr/websquare/websquare.html?w2xPath=/ws/index.xml
• http://ws2template.websquare.co.kr/websquare/websquare.jsp?w2xPath=/wqtemplate/index.xml
• https://template.websquare.co.kr/websquare5/websquare/websquare.html?w2xPath=/websquare5/index.xml
• https://www.youtube.com/c/WebsquareCoKr