[웹스퀘어5] 디자인 탭 깨질 때 CSS 적용 방법

 

웹스퀘어5를 처음 세팅할 때 Design 탭에서 깨져보이는 경우가 있습니다. 서버를 기동해서 보면 정상적으로 CSS가 먹혀서 나오는데, 로컬 환경에서는 깨지는 현상이다. 이에 대한 조치법을 찾기 너무 어려워서 직접 작성해두려한다. 아래 내용을 순서대로 적용해보면 됩니다. 그래도 해결이 안 되면 웹스퀘어 제작사인 인스웨이브의 Support 창구인 W-tech에 문의하도록 합니다.

 

우선 이 증상은 서버에서는 css 경로를 잘 찾아가는 반면 로컬에서 css 경로를 못 찾아서 발생합니다.

 

 

 

1. Context Root 설정

* Project Explorer의 Project 우클릭 > Properties > Websquare > Context Root

 

context root

 

* 위 창이 뜨면 Context Root 를 / 로 설정해줍니다. 그러면 이제 웹스퀘어에서 보는 기준 폴더가 프로젝트의 root 경로와 같아집니다. workspace에 프로젝트명이 ddol 이라면 context root는 d:\Eclipse\workspace\ddol 이 되는 것 입니다.

 

* Deploy Source는 말 그대로 Deploy 될 소스들이 어디있냐는 뜻으로 Browse를 눌러 프로젝트 안의 webapps를 선택해줍니다. (소스 폴더명은 프로젝트마다 다를 수 있습니다)

 

* 완료 후 Apply > OK

 

 

 

반응형

 

 

2. Stylesheet 수정

* Eclipse 메뉴 Window > Preferences > WebSquare > Engine Modification

 

Engine Modification

 

* 위 경로를 따라가면 아래 HTML 박스에 위 사진과 같은 stylesheet이 보일 것입니다.

 

<stylesheet earlyImportList="" value="stylesheet_ext.css" import="link" enable="true"/>

 

* 아마 처음엔 earlyImportList가 비어있을 것입니다. 이 곳에 이제 css경로를 Deploy Source 위치부터 넣어주면 됩니다.

 

* 저의 경우 workspace\ddol\webapps\css 위치에 있었기에 css\style.css 를 넣었습니다.

 

 

화면 파일

 

*  어떤 css파일을 넣어야 되는지 모를 때는 아무 화면 파일을 열어보면 위 사진처럼 어떤 css파일을 공통적용하는지 나올 것입니다.

 

 

 

문제가 원만히 해결되시길