반응형 레이아웃을 직접 만들려고 합니다
그동안 하드코딩(에디트플러스)으로 하나하나 작업했었는데

XE를 처음 알고나서 레이아웃이나 모듈 등을 쉽게 적용시킬수 있어서 많이 놀랍고 신기했습니다!

이번에 직접 레이아웃을 만들려고 하는데 어떤식으로 코딩을 시작 해야할지 막막합니다.

 


이전에는 반응형으로 작업할때 

@media (max-width:640px){
}

이런식으로 미디어 쿼리를 이용해서 작업했었습니다.

 


1) xe의 경우에도 이렇게 반응형을 코딩해도 작동될까요?

 

2) 독타입이나 메타 같은것도 같이 넣어서 작업해야하나요?

<!doctype html>
<html>
<head>
    <meta charset="utf-8">


3) 혹시 xe에서 정해놓은 html파일명이나 css파일명이 있나요?
제가 임의로 main.html / main.css 이런식으로 작성해서 FTP로 올려놓으면 인식이 안되는지요?


xe스쿨에서 "레이아웃 디렉터리" 내용중에서 "이름고정"이라고 적혀있는 파일을 보았습니다. 
이외에는 임의로 지정해도 될까요? (해당내용 xe스쿨 : http://www.xeschool.com/xe/step3_2)

 

 


직접 디자인해서 레이아웃을 만들려고 하니 어떤파일에서 코딩을 해야할지,
PC와 모바일용으로 따로 작업이 필요한지 잘 모르겠습니다.

그리고, xe스쿨에서 내용들을 읽어보았는데 반응형에 대한 부분은 따로 설명이 없는데
혹시 참고할만한 곳이 있을까요?

 

처음 질문을 올리는거라서 다소 두서없이 들렸다면 죄송합니다^^;
 

  • profile

    저도 직접 제작한 레이아웃 사용중입니다. xe -> layouts폴더 안에 있는 파일 복사하고 그 내용을 수정하는 방식으로 만들었어요 반응형도 미디어쿼리 사용해도 작동합니다.
    추가적으로 모바일 레이아웃은  m.layouts 폴더 안에 있으니 모바일버전따로 하셔도되고 일반 레이아웃을 모바일까지 반응하게 제작하셔도됩니다. 일반레이아웃 사용으로 모바일 사용하시려면 모바일뷰 체크해제하시면되요

  • profile ?
    답변 감사드립니다^^ 직접 제작해서 사용중이시라니 존경스럽습니다!
    저도 얼른 제가 만든걸로 사용해보고싶네요.
    모바일 레이아웃 폴더가 따로 구분되어있는줄 몰랐는데 정보 감사합니다
  • ?

    1.
    그렇게 진행하시면 됩니다.
    평소에 사용하시던대로, 반응형이든, 고정형이든, 평소에 하시던대로 진행하시면 됩니다.



    2.
    요즘 무료로 배포되거나, 유료로 판매되는 레이아웃들중 독타입, 메타태그를 그냥 집어넣으시는 분들이 계시던데, 그렇게 하면 안되는걸로 압니다.

    html 태그, head, body 태그 모두 작성하시면 안됩니다. 레이아웃으로 작성한 파일은 body 태그 안으로 들어가고, 템플릿 문법을 사용한 특별한 코드들은 각자의 특성에 따라 head 또는 body 하단에 들어갑니다.

    CSS/JS는 3번에서 설명하기로 하고, 메타태그의 경우 아래의 코드를 넣으시면 됩니다.

     

    {Context::addHtmlHeader('<meta name="viewport" content="width=device-width, user-scalable=yes">')}

    위 코드를 사용하시면 HTML 헤더에 <meta ~~~> 태그가 삽입됩니다. 따로 헤더에 추가할 게 있다면 위 코드를 사용하세요.



    3.
    메인 HTML 코드와 레이아웃 정보가 들어간 파일을 제외하고는 이름을 마음대로 설정해도 됩니다.
    layout.html -> 레이아웃의 메인 코드
    conf/info.xml -> 레이아웃 정보

    CSS 파일이나 JS 같은 경우, XE의 템플릿 문법을 사용하여 불러올 수 있습니다.
    <load target="파일 경로" /> 를 사용하시면 됩니다. 파일 경로는 해당 레이아웃의 경로를 기준으로 잡고 상대경로 형식으로 작성하시면 됩니다.
    body 하단으로 넣고 싶으시다면 type="body" 속성을 추가하시면 되구요.

  • ? ?
    답변 감사드립니다.
    코드와 자세한 설명까지! 잘 읽고 설명해주신대로 한번 열심히 작업해 보도록 하겠습니다^^