스킨 폴더에 있는 HTML 파일들은 XE에서 사용하는 템플릿 파일들입니다.

CSS나 JS, 변수 등은 XE 내부에서 따로 컴파일해서 보여주기 때문에

템플릿 파일을 HTML 편집기로 열면 깨져서 보일 수 밖에 없습니다.

결론적으로 스킨(템플릿)은 XE에서 사용하는 프로그래밍 언어입니다.

스쿨 내용을 이해 못 하신다면 스킨 만드는 건 어렵습니다.

답변드리기엔 양이 너무 많기때문에 가이드를 읽어보라고 하는거구요. XE레이아웃을 만들기 위해서는..

HTML+CSS는 기본적으로 아셔야 하고, 거기에  메뉴와, 각종레이아웃 설정을 위해서 XE에서 제공하는 템플릿 코드를 사용합니다.

(굳이 템플릿코드를 사용하지 않고 링크로만 해서 레이아웃을 구성할 수도 있지만서도요)

<!--@if($layout_info)-->
!--@end--

이런 문법은 XE의 템플릿코드이며, php등을 대신하기 위한 코드입니다. 우선은 div와, p태그 ul태그를 CSS로 정확히 웹표준을 할 수 있도록 CSS공부를 빡시게 하시고, 나중되서 XE템플릿코드를 다른 레이아웃에서 하나씨 가져와서 사용하시면 됩니다.

레이아웃을 만들려면 미리보기를 하면서 해야하는데 다 깨져보이니 어떻게 만드는거죠?

개발을 하시려면 사실 테스트 서버가 있는 것이 좋습니다. 하지만 형편상 그러지 못하는 경우에는 

여기서 다운로드하셔서 일단 개인PC에 로컬서버를 구축하는 것이 가장 좋습니다.

그런다음 편집툴(드림위버,에디터플러스,울트라에디터,기타등등)로 로컬서버의 파일을 바로 수정하고 로컬PC에서 사이트 테스트하고 하는 방식으로 작업하는 것이 좋습니다. 공부하기 전에 좋은 환경이 구축되면 공부할 맛이 나죠...

그런 후에 윗 분들이 말씀하신 것들을 하나씩 하나씩 연구하시면 되겠습니다. 로컬 서버 세팅에는 1시간 정도면 되니 그렇게 해 보시죠...

http://html.nhncorp.com/ 이건 개발하실 때 도움이 되실겁니다. 시간날 때마다 하나씩 읽어보면 재미있습니다.

css 빨리 배우시려면 여기가셔서 다운로드 하셔서 css소스만 보시면 도움됩니다. 하루에 10개씩만 보시면 한 달 후면 css 어느정도 이해가 되실겁니다.